亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

深入理解css中的align-content屬性

  發(fā)布時(shí)間：2016-05-25 09:08:47   作者：佚名   我要評論
下面小編就為大家?guī)硪黄钊肜斫鈉ss中的align-content屬性。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧

align-content

作用:

會(huì)設(shè)置自由盒內(nèi)部各個(gè)項(xiàng)目在垂直方向排列方式。

條件:
必須對父元素設(shè)置自由盒屬性display:flex;，并且設(shè)置排列方式為橫向排列flex-direction:row;并且設(shè)置換行，flex-wrap:wrap;這樣這個(gè)屬性的設(shè)置才會(huì)起作用。
設(shè)置對象:

這個(gè)屬性是對她容器內(nèi)部的項(xiàng)目起作用，對父元素進(jìn)行設(shè)置。


取值:
stretch:默認(rèn)設(shè)置，會(huì)拉伸容器內(nèi)每個(gè)項(xiàng)目占用的空間，填充方式為給每個(gè)項(xiàng)目下方增加空白。第一個(gè)項(xiàng)目默認(rèn)從容器頂端開始排列。

XML/HTML Code復(fù)制內(nèi)容到剪貼板
  1. <!DOCTYPE=html>  
  2. <html lang="zh-cn">  
  3. <head>  
  4. <meta charset="UTF-8">  
  5. <title>  
  6. Align-content   
  7. </title>  
  8. <style>  
  9.   
  10. #father{   
  11.        
  12.     width:200px;   
  13.     display:flex;   
  14.     flex-direction:row;   
  15.     flex-wrap:wrap;   
  16.     align-content:strech;   
  17.     height:200px;   
  18.     background-color:grey;   
  19. }   
  20. .son1{   
  21.        
  22.       height:30px;   
  23.     width:100px;   
  24.     background-color:orange;   
  25. }   
  26.   
  27. .son2{   
  28.        
  29.     height:30px;   
  30.     width:100px;   
  31.     background-color:red;   
  32. }   
  33.   
  34. .son3{   
  35.        
  36.       height:30px;   
  37.     width:100px;   
  38.     background-color:#08a9b5;   
  39. }   
  40.   
  41.   
  42. </style>  
  43. </head>  
  44. <body>  
  45.   
  46. <div id="father">  
  47.   
  48. <div class="son1">  
  49. q   
  50. </div>  
  51.   
  52. <div class="son2">  
  53. w   
  54. </div>  
  55.   
  56. <div class="son3">  
  57. e   
  58. </div>  
  59. <div class="son3">  
  60. e   
  61. </div>  
  62. <div class="son3">  
  63. e   
  64. </div>  
  65.   
  66.   
  67.   
  68. </div>  
  69.   
  70. </body>  
  71. </html>  

Center：這個(gè)會(huì)取消項(xiàng)目之間的空白并把所有項(xiàng)目垂直居中。

XML/HTML Code復(fù)制內(nèi)容到剪貼板
  1. <!DOCTYPE=html>  
  2. <html lang="zh-cn">  
  3. <head>  
  4. <meta charset="UTF-8">  
  5. <title>  
  6. 關(guān)于文檔元素測試   
  7. </title>  
  8. <style>  
  9.   
  10. #father{   
  11.        
  12.     width:200px;   
  13.     display:flex;   
  14.     flex-direction:row;   
  15.     flex-wrap:wrap;   
  16.     align-content:center;   
  17.     height:200px;   
  18.     background-color:grey;   
  19. }   
  20. .son1{   
  21.        
  22.       height:30px;   
  23.     width:100px;   
  24.     background-color:orange;   
  25. }   
  26.   
  27. .son2{   
  28.        
  29.     height:30px;   
  30.     width:100px;   
  31.     background-color:red;   
  32. }   
  33.   
  34. .son3{   
  35.        
  36.       height:30px;   
  37.     width:100px;   
  38.     background-color:#08a9b5;   
  39. }   
  40.   
  41.   
  42. .son4{   
  43.        
  44.       height:30px;   
  45.     width:100px;   
  46.     background-color:#9ad1c3;   
  47. }   
  48.   
  49. .son5{   
  50.        
  51.       height:30px;   
  52.     width:100px;   
  53.     background-color:rgb(21,123,126);   
  54. }   
  55. </style>  
  56. </head>  
  57. <body>  
  58.   
  59. <div id="father">  
  60.   
  61. <div class="son1">  
  62. q   
  63. </div>  
  64.   
  65. <div class="son2">  
  66. w   
  67. </div>  
  68.   
  69. <div class="son3">  
  70. e   
  71. </div>  
  72. <div class="son4">  
  73. e   
  74. </div>  
  75. <div class="son5">  
  76. e   
  77. </div>  
  78.   
  79.   
  80.   
  81. </div>  
  82.   
  83. </body>  
  84. </html>  

Flex-start:這個(gè)會(huì)取消項(xiàng)目之間的空白，并把項(xiàng)目放在容器頂部。

XML/HTML Code復(fù)制內(nèi)容到剪貼板
  1. <!DOCTYPE=html>  
  2. <html lang="zh-cn">  
  3. <head>  
  4. <meta charset="UTF-8">  
  5. <title>  
  6. 關(guān)于文檔元素測試   
  7. </title>  
  8. <style>  
  9.   
  10. #father{   
  11.        
  12.     width:200px;   
  13.     display:flex;   
  14.     flex-direction:row;   
  15.     flex-wrap:wrap;   
  16.     align-content:flex-start;   
  17.     height:200px;   
  18.     background-color:grey;   
  19. }   
  20. .son1{   
  21.        
  22.       height:30px;   
  23.     width:100px;   
  24.     background-color:orange;   
  25. }   
  26.   
  27. .son2{   
  28.        
  29.     height:30px;   
  30.     width:100px;   
  31.     background-color:red;   
  32. }   
  33.   
  34. .son3{   
  35.        
  36.       height:30px;   
  37.     width:100px;   
  38.     background-color:#08a9b5;   
  39. }   
  40.   
  41.   
  42. .son4{   
  43.        
  44.       height:30px;   
  45.     width:100px;   
  46.     background-color:#9ad1c3;   
  47. }   
  48.   
  49. .son5{   
  50.        
  51.       height:30px;   
  52.     width:100px;   
  53.     background-color:rgb(21,123,126);   
  54. }   
  55. </style>  
  56. </head>  
  57. <body>  
  58.   
  59. <div id="father">  
  60.   
  61. <div class="son1">  
  62. q   
  63. </div>  
  64.   
  65. <div class="son2">  
  66. w   
  67. </div>  
  68.   
  69. <div class="son3">  
  70. e   
  71. </div>  
  72. <div class="son4">  
  73. e   
  74. </div>  
  75. <div class="son5">  
  76. e   
  77. </div>  
  78.   
  79.   
  80.   
  81. </div>  
  82.   
  83. </body>  
  84. </html>  

flex-end:這個(gè)會(huì)取消項(xiàng)目之間的空白并把項(xiàng)目放在容器底部。

align-content:flex-end;

space-between這個(gè)會(huì)使項(xiàng)目在垂直方向兩端對齊。即上面的項(xiàng)目對齊容器頂部，最下面一個(gè)項(xiàng)目對齊容器底部。留相同間隔在每個(gè)項(xiàng)目之間。

align-content:space-between;


Space-around:這個(gè)會(huì)使每個(gè)項(xiàng)目上下位置保留相同長度空白，使得項(xiàng)目之間的空白為兩倍的單個(gè)項(xiàng)目空白。

align-content:space-around;


Inherit：使得元素的這個(gè)屬性繼承自它的父元素。
innitial：使元素這個(gè)屬性為默認(rèn)初始值。

以上這篇深入理解css中的align-content屬性就是小編分享給大家的全部內(nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

相關(guān)文章

  • jquery結(jié)合CSS實(shí)現(xiàn)的多樣式多視頻列表連播效果源碼

    是一段實(shí)現(xiàn)了右側(cè)縮略圖片+文字列表顯示所有視頻、右側(cè)文字列表顯示所有視頻及底部縮略圖片+文字列表顯示所有視頻三種樣式的視頻連播效果代碼，本段代碼適應(yīng)于所有網(wǎng)頁使用
    2016-05-25

  • css中常用的幾種居中方法(推薦)

    下面小編就為大家?guī)硪黄猚ss中常用的幾種居中方法(推薦)。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
    2016-05-25

  • 深入理解CSS中的盒子模型

    下面小編就為大家?guī)硪黄钊肜斫釩SS中的盒子模型。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
    2016-05-25

  • CSS3實(shí)用方法總結(jié)(推薦)

    下面小編就為大家?guī)硪黄狢SS3實(shí)用方法總結(jié)(推薦)。小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
    2016-05-24

  • CSS中的各種選擇器與樣式優(yōu)先級小結(jié)

    這里為大家送上CSS中的各種選擇器與樣式優(yōu)先級小結(jié),基本上常用的都被整理在其中,歡迎隨看隨記^^
    2016-05-24

  • CSS左側(cè)固定寬 右側(cè)自適應(yīng)的實(shí)現(xiàn)代碼(兼容所有瀏覽器)

    下面小編就為大家?guī)硪黄狢SS左側(cè)固定寬 右側(cè)自適應(yīng)的實(shí)現(xiàn)代碼(兼容所有瀏覽器)。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
    2016-05-26

最新評論