CSS3 伸縮佈局盒模型

時間 2019-11-17

標籤 css3 css 伸縮佈局模型欄目 CSS 简体版

原文原文鏈接

CSS3引入的佈局模式Flexbox佈局，主要思想是讓容器有能力讓其子項目可以改變其寬度，高度，以最佳方式填充可用空間。Flex容器使用Flex項目能夠自動放大與收縮，用來填補可用的空閒空間。更重要的是，Flexbox佈局方向不可預知，不像常規的佈局(塊級從上到下，內聯從左到右)，而那些常規的適合頁面佈局，但對於支持大型或者複雜的應用程序就缺少靈活性。若是常規佈局是基於塊和內聯文本流方向，那麼Flex佈局就是基於「Flex-flow」方向。先來了解一下伸縮盒模型的一些專用術語。
html

主軸：Flex容器的主軸主要用來配置Flex項目。他不必定是水平的，這主要取決於fle-direction屬性。
主軸起點，主軸終點：Flex項目的配置從容器的主軸起點邊開始，往主軸終點邊結束。
主軸長度：Flex項目在主軸方向的寬度或高度就是項目的主軸長度，Flex項目的主軸長度屬性是width或height屬性，由哪個對着主軸方向決定。
側軸：與主軸垂直的軸稱做側軸，是側軸方向的延伸。
側軸起點，側軸終點：伸縮行的配置從容器的側軸起點邊開始，往側軸終點邊結束。
側軸長度：Flex項目在側軸方向的寬度或高度就是項目的側軸長度，Flex項目的側軸長度屬性是widht或height屬性，由哪個對着主軸方向決定。web

Flex佈局的語法規範通過幾年發生了很大的變化，也給Flexbox的使用帶來必定的侷限性，由於語法規範版本衆多，瀏覽器支持不一致，導致Flexbox佈局使用很少。Flexbox佈局語法規範主要分紅三種。瀏覽器

舊版本，2009年版本，是最先的伸縮佈局，各大主流瀏覽器對其支持性略有不一樣，惋惜的是，對Flexbox佈局的各屬性支持也不徹底，在使用時還需添加各瀏覽器的前綴。
混合版本，2011年版本，只有IE10支持。
最新版本,2012年版本,除了Safari瀏覽器不支持外，其餘最新瀏覽器都支持這個版本。佈局

Flex容器屬性

display

　　要改變元素的模式爲伸縮容器，須要使用display屬性。flex

display:flex | inline-flex

flex:設置爲塊級伸縮容器。
inline-flex:設置爲內聯級伸縮容器。flexbox

 1 <!DOCTYPE html>
 2 <html lang="en" xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4 <meta charset="utf-8" />
 5 <title></title>
 6 <style>
 7     *{
 8         margin:0;
 9         padding:0;
10     }
11     div>div{
12         width:100px;
13         height:100px;
14         line-height:100px;
15         border:1px solid;
16         text-align:center;
17         margin:10px;
18     }
19     #box{
20         display:-moz-box;
21         display:-webkit-box;
22         display:-ms-flexbox;
23         display:-webkit-flex; 
24         display:flex;     
25         border:1px solid;
26         margin:20px;
27     }
28     #inline{            
29         display:-moz-inline-box;
30         display:-webkit-inline-box;
31         display:-ms-inline-flexbox;
32         display:-webkit-inline-flexbox;
33         display:inline-flex;
34         border:1px solid;
35         margin:20px;
36     }
37 </style>
38 </head>
39 <body>
40 <div id="box">
41     <div>A</div>
42     <div>B</div>
43     <div>C</div>
44     <div>D</div>
45 </div>
46 <div id="inline">
47     <div>A</div>
48     <div>B</div>
49     <div>C</div>
50     <div>D</div>
51 </div>
52 </body>
53 </html>

塊級伸縮容器與內聯級伸縮容器相似，默認都是從左往右排列，惟一不一樣的是塊級伸縮容器獨佔一行，而內聯級伸縮容器隨着內容改變。
Flex容器不是塊容器，所以有些設計用來控制塊佈局的屬性在伸縮佈局中不適用。浮動沒法影響伸縮容器，並且伸縮容器的margin與其內容的margin不會重疊。若是內聯伸縮容器設置了浮動，元素將會以塊級伸縮容器顯示。spa

flex-direction

　　定義Flex項目在Flex容器中放置的方向。設計

flex-direction:row | row-reverse | column | column-reverse

row:默認值，若是書寫方式是ltr，那麼Flex項目從左向右排列；若是書寫方式是rtl，那麼Flex項目從右向左排列。
row-reverse:若是書寫方式是ltr，那麼Flex項目從右向左排列；若是書寫方式是rtl，那麼Flex項目從左向右排列。
column:和row相似，方向從上到下排列。
column-reverse:和row-reverse相似，方向從下到上排列。3d

 1 <!DOCTYPE html>
 2 <html lang="en" xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4 <meta charset="utf-8" />
 5 <title></title>
 6 <style>
 7     *{
 8         margin:0;
 9         padding:0;
10     }
11     div>div{
12         width:100px;
13         height:100px;
14         line-height:100px;
15         border:1px solid;
16         text-align:center;
17         margin:10px;
18     }
19     .box{
20         display:-moz-box;
21         display:-webkit-box;
22         display:-ms-flexbox;
23         display:-webkit-flexbox;
24         display:flex;
25         border:1px solid;
26         margin:20px;
27     }
28     .box1{                        
29         /*定義Flex項目在Flex容器中放置的方向,從左往右。*/
30         -moz-box-orient:block-axis;
31         -moz-box-direction:normal;
32         -webkit-box-orient:block-axis;
33         -webkit-box-direction:normal;
34         flex-direction:row;           
35     }
36     .box2{     
37         /*定義Flex項目在Flex容器中放置的方向，從右往左。*/
38         -moz-box-orient:block-axis;
39         -moz-box-direction:reverse;
40         -webkit-box-orient:block-axis;
41         -webkit-box-direction:reverse;
42         flex-direction:row-reverse;                      
43     }        
44     .box3{            
45        /*定義Flex項目在Flex容器中放置的方向，從上往下。*/
46         -moz-box-orient:inline-axis;
47         -moz-box-direction:normal;
48         -webkit-box-orient:inline-axis;
49         -webkit-box-direction:normal;
50         flex-direction:column;   
51     }
52     .box4{            
53         /*定義Flex項目在Flex容器中放置的方向，從下往上。*/
54         -moz-box-orient:inline-axis;
55         -moz-box-direction:reverse;
56         -webkit-box-orient:inline-axis;
57         -webkit-box-direction:reverse;
58         flex-direction:column-reverse;   
59     }
60 </style>
61 </head>
62 <body>
63 <div class="box box1">
64     <div>A</div>
65     <div>B</div>
66     <div>C</div>
67     <div>D</div>
68 </div>
69 <div class="box box2">
70     <div>A</div>
71     <div>B</div>
72     <div>C</div>
73     <div>D</div>
74 </div>
75 <div class="box box3">
76     <div>A</div>
77     <div>B</div>
78     <div>C</div>
79     <div>D</div>
80 </div>
81 <div class="box box4">
82     <div>A</div>
83     <div>B</div>
84     <div>C</div>
85     <div>D</div>
86 </div>        
87 </body>
88 </html>

默認值flex-direction等於row時，Flex項目從左往右排列。code

flex-direction等於row-reverse時，Flex項目從右往左排列。

flex-direction等於column時，Flex項目從上往下排列。

flex-direction等於column-reverse時，Flex項目從下往上排列。

flex-wrap

　　默認狀況下，Flex項目都儘量在一行顯示，你能夠根據flex-wrap的屬性值來改變，讓Flex項目多行顯示。

1 flex-wrap:nowrap | wrap | wrap-reverse

nowrap:默認值，單行顯示，若是書寫方式是ltr，Flex項目從左往右排列；若是書寫方式是trl，Flex項目從右往左排列。
wrap:多行顯示，若是書寫方式是ltr，Flex項目從左往右排列；若是書寫方式是trl，Flex項目從右往左排列。
wrap-reverse:多行顯示，若是書寫方式是ltr，Flex項目從右往左排列；若是書寫方式是trl，Flex項目從左往右排列。

 1 <!DOCTYPE html>
 2 <html lang="en" xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4 <meta charset="utf-8" />
 5 <title></title>
 6 <style>
 7     *{
 8         margin:0;
 9         padding:0;
10     }       
11     .box{
12         display:-moz-box;
13         display:-webkit-box;
14         display:-ms-flexbox;
15         display:-webkit-flexbox;
16         display:flex;
17         border:1px solid;
18         margin:20px;
19         -moz-box-lines:multiple;
20         /*定義伸縮換行屬性爲nowrap(默認值)*/
21         flex-wrap:nowrap;
22     }
23     .box div{
24         width:100px;
25         height:100px;
26         line-height:100px;
27         border:1px solid;
28         text-align:center;
29         margin:10px;
30     }
31    
32 </style>
33 </head>
34 <body>
35 <div class="box">
36     <div>A</div>
37     <div>B</div>
38     <div>C</div>
39     <div>D</div>
40     <div>E</div>
41     <div>F</div>
42     <div>G</div>
43     <div>H</div>
44     <div>I</div>
45     <div>J</div>
46     <div>K</div>
47     <div>L</div>
48 </div>    
49 </body>
50 </html>

由於默認值nowrap不許換行，伸縮容器容納不下伸縮項目時，各伸縮項目會根據默認的收縮比例進行縮小以適應伸縮容器的寬度。

1 .box{
2    ...
3    flex-wrap:wrap;
4 }

flex-wrap等於wrap時，伸縮容器容不下伸縮項目時自動換行了。

1 .box{
2    ...
3    flex-wrap:wrap-reverse;
4 }

flex-wrap等於wrap-reverse時，伸縮容器容不下伸縮項目時換行了。不一樣的是換行的方向相反。

flex-flow

　　這是flex-direction和flex-wrap兩個屬性的縮寫,默認值是row nowrap。

1 flex-flow:flex-direction || flex-wrap

justify-content

　　用來設置伸縮項目在主軸上的對齊方式。指定如何在伸縮項目之間分佈伸縮容器額外空間。當一行上的全部伸縮項目不能伸縮或可伸縮可是已達到最大長度時，這一屬性纔會對伸縮容器額外空間進行分配。當伸縮項目溢出某一行時，這一屬性也會在項目的對齊上施加一些控制。

1 justify-content:flex-start | flex-end | center | space-between | space-around

flex-start:默認值，伸縮項目向一行的起始位置靠齊。伸縮容器沿着佈局軸方向的全部額外空間都被置於佈局軸的末尾。
flex-end:和flex-start相反，伸縮項目向一行的結束位置靠齊。伸縮容器沿着佈局軸方向的全部額外空間都被置於佈局軸的開始。
center:伸縮項目向一行的中間位置靠齊。伸縮容器的全部額外空間平均分佈在第一伸縮項目前面和最後一個伸縮項目的後面。
space-between:伸縮項目會平均分佈在行裏。伸縮容器的全部額外空間平均分佈在全部伸縮項目之間，可是在第一個伸縮項目以前和最後一個伸縮項目以後不分配空間，也就是說，第一個伸縮項目靠齊開始位置，最後一個伸縮項目靠齊結束位置。
space-around:伸縮項目會品均分佈在行裏。伸縮容器的全部額外空間品均分佈在全部伸縮項目之間，可是第一個伸縮項目以前與最後一個伸縮項目以後只分配其餘位置獲得額外空間的一半。

 1 <!DOCTYPE html>
 2 <html lang="en" xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4 <meta charset="utf-8" />
 5 <title></title>
 6 <style>
 7     *{
 8         margin:0;
 9         padding:0;
10     }       
11     .box{
12     width:500px;
13     height:500px;
14         border:1px solid;
15         margin:20px;
16         display:flex;            
17         justify-content:flex-start;
18     }
19     body>div:first-child{
20         flex-flow:row nowrap;
21     } 
22     body>div:last-child{
23         flex-flow:column nowrap;
24     }
25     .box div{
26         width:100px;
27         height:100px;
28         line-height:100px;
29         border:1px solid;
30         text-align:center;
31         margin:10px;
32     }
33    
34 </style>
35 </head>
36 <body>
37 <div class="box">
38     <div>A</div>
39     <div>B</div>
40     <div>C</div>       
41 </div>   
42 <div class="box">
43     <div>A</div>
44     <div>B</div>
45     <div>C</div>
46 </div>  
47 </body>
48 </html>

justify-content等於默認值flex-start時，伸縮項目在主軸起點處對齊，全部額外空間在最後一個伸縮項目的後面。

1 .box{
2    ...
3    justify-content:flex-end;
4 }

justify-content等於flex-end時，伸縮項目在主軸結束處對齊，全部額外空間在第一個伸縮項目前面。

1 .box{
2    ...
3    justify-content:center;
4 }

justify-content等於center時，全部項目在容器主軸中間處對齊，額外空間在第一個前面和最後一個後面。

1 .box{
2    ...
3    justify-content:space-between;
4 }

justity-content等於space-between時，第一個項目在主軸開始處，最後一個項目在主軸結束處，全部額外空間被其餘項目平分。

.box{
   ...
   justify-content:space-around;
}

justify-content等於space-around時，相似於space-between，可是第一個項目前面與最後一個項目後面分配了其餘項目擁有額外空間一半的空間。

align-items

　　align-items屬性和justify-content一樣是用來管理伸縮容器額外空間，不一樣的是，justify-content是用來管理伸縮容器主軸方向的額外空間，而align-items是用來管理伸縮容器側軸方向的額外空間。

1 align-items:flex-start | flex-end | center | baseline | stretch

flex-start:伸縮項目在側軸起點邊的外邊距緊靠住該行在側軸起始的邊。
flex-end:伸縮項目在側軸終點邊的外邊距靠住該行在側軸終點的邊。
center:伸縮項目的外邊距盒在該行的側軸上居中放置。
baseline:若是伸縮項目的行內軸與側軸爲同一條，則該值和flex-start等效。其它狀況下，該值將參與基線對齊。全部參與該對齊方式的伸縮項目將按下列方式排列：首先將這些伸縮項目的基線進行對齊，隨後其中基線至側軸起點邊的外邊距距離最長的那個項目將緊靠住該行在側軸起點的邊。
stretch:若是側軸長度屬性的值爲auto，則此值會使項目的外邊距盒的尺寸在遵守min/max-width/height屬性的限制下儘量接近所在行的尺寸。

1 .box{
2    ...
3    align-items:flex-start;
4 }

align-items等於flex-start時，伸縮項目在側軸起點處對齊，額外空間在側軸終點處。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。