flex 佈局

時間 2019-11-18

標籤 flex 佈局欄目 Flex 简体版

原文原文鏈接

1、什麼是 flex 佈局？css

　　flex 佈局意爲"彈性佈局"，用來爲盒狀模型提供最大的靈活性。html

　　主要思想：給容器控制項目的寬度高度的能力，使用 flex 項目能夠自動填滿容器的可用空間。Flex 容器（父元素）使用 Flex 項目（子元素）能夠自動放大與收縮，用來填補可用的空閒空間。ide

上圖展現的是水平方向的 flex 容器，若 flex-direction 屬性爲豎直方向，則 main axis 的方向爲豎直方向。佈局

main axis: Flex容器的主軸主要用來配置Flex項目。注意，它不必定是水平，這主要取決於flex-direction屬性。
main-start | main-end: Flex項目的配置從容器的主軸起點邊開始，往主軸終點邊結束。
main size: Flex項目的在主軸方向的寬度或高度就是項目的主軸長度，Flex項目的主軸長度屬性是width或height屬性，由哪個對着主軸方向決定。
cross axis: 與主軸垂直的軸稱做側軸，是側軸方向的延伸。
cross-start | cross-end: 伸縮行的配置從容器的側軸起點邊開始，往側軸終點邊結束。
cross size: Flex項目的在側軸方向的寬度或高度就是項目的側軸長度，Flex項目的側軸長度屬性是width或height屬性，由哪個對着側軸方向決定。

2、容器的屬性flex

　　Flex容器不是塊容器，所以有些設計用來控制塊佈局的屬片在Flexbox佈局中不適用。特別是：多列組中全部column-*屬性、float、clear屬性和vertical-align屬性在Flex容器上沒有做用。spa

　　一、display：定義一個 flex 容器，決定其爲內聯仍是塊設計

　　　　取值：flex（塊） | inline-flex（內聯）code

　　　　若是元素 display 的值指定爲 inline-flex，並且元素是一個浮動元素或絕對定位元素，則 display 的計算值是 flex。htm

　　二、flex-direction：建立方向軸，定義 flex 項目在 flex 容器中放置的方向。blog

　　　　取值：row（默認值）：主軸爲水平方向，起點在左端

　　　　　　 row-reverse：主軸爲水平方向，起點在右端

　　　　　　　column：主軸爲垂直方向，起點在上沿

　　　　　　　column-reverse：主軸爲垂直方向，起點在下沿

　　三、flex-wrap：讓 flex 項目多行顯示

　　　　　取值：nowrap（默認值）：單行顯示

　　　　　　　　wrap：多行顯示，第一行在上方

　　　　　　　　wrap-reverse：多行顯示，第一行在下方　　

　　四、flex-flow：屬性 flex-direction 和 flex-wrap 屬性的簡寫

　　五、justify-content：定義項目在主軸上的對齊方式

　　　　取值：flex-start（默認值）：左對齊

　　　　　　　flex-end：右對齊

　　　　　　　center：居中

　　　　　　　space-between：兩端對齊，項目之間的間隔都相等

　　　　　　　space-around：每一個項目兩側的間隔相等。因此，項目之間的間隔比項目與邊框的間隔大一倍。

　　六、align-items：定義項目在交叉軸上的對齊方式

　　　　取值：flex-start：交叉軸的起點對齊

　　　　　　　flex-end：交叉軸的終點對齊

　　　　　　　center：交叉軸的中點對齊

　　　　　　　baseline：項目的第一行文字的基線對齊

　　　　　　　stretch（默認值）：若是項目未設置高度或設爲 auto，將佔滿整個容器的高度。

　　七、align-content：定義多跟軸線的對齊方式。若只有一根軸線，則該屬性不起做用。

　　　　取值：flex-start：與交叉軸的起點對齊

　　　　　　　flex-end：與交叉軸的終點對齊

　　　　　　　center：與交叉軸的中點對齊

　　　　　　　space-between：與交叉軸兩端對齊，軸線之間的間隔平均分佈

　　　　　　　space-around：每根軸線兩側的間隔都相等。因此，軸線之間的間隔比軸線與邊框的間隔大一倍　　　　

　　　　　　　stretch（默認值）：軸線佔滿整個交叉軸

3、項目的屬性

　　一、order：定義項目的排列順序，數值越小排列越靠前，默認爲0

　　二、flex-grow：定義項目的放大比例，默認爲0，即若是存在剩餘空間，也不放大

　　三、flex-shrink：定義項目的縮小比例，默認爲1，即若是空間不足，該項目縮小

　　四、flex-basis：定義 flex 項目在分配多餘空間以前的一個默認尺寸。默認值是 auto，即項目原本的大小。

　　五、flex：是 flex-grow，flex-shrink 和 flex-basis三個屬性的縮寫。第二個和第三個參數( flex-shrink 和 flex-basis )是可選值。其默認值是 0 1 auto。

　　六、align-self：容許單個項目與其餘項目有不同的對齊方式。可覆蓋align-items屬性。默認值爲auto，表示繼承父元素的align-items屬性，若是沒有父元素，則等同於stretch。

4、實例　　

  1 <!DOCTYPE html>
  2 <html lang="en">
  3 
  4 <head>
  5     <meta charset="UTF-8">
  6     <title>Flex 佈局</title>
  7     <style>
  8         /* basic style sheet */
  9         * {
 10             box-sizing: border-box;
 11         }
 12         html, body {
 13             height: 100%;
 14         }
 15         body {
 16             display: flex;
 17             align-items: center;
 18             justify-content: center;
 19             vertical-align: center;
 20             flex-wrap: wrap;
 21             align-content: center;
 22             font-family: 'Open Sans', sans-serif;
 23             background: linear-gradient(top, #222, #333);
 24         }
 25         [class^=box] {
 26             margin: 16px;
 27             padding: 4px;
 28             background-color: #e7e7e7;
 29             width: 104px;
 30             height: 104px;
 31             object-fit: contain;
 32             box-shadow: inset 0 5px white,
 33             inset 0 -5px #bbb,
 34             inset 5px 0 #d7d7d7,
 35             inset -5px 0 #d7d7d7;
 36             border-radius: 10%;
 37         }
 38         .item {
 39             display: block;
 40             width: 24px;
 41             height: 24px;
 42             border-radius: 50%;
 43             margin: 4px;
 44             background-color: #333;
 45             box-shadow: inset 0 3px #111, inset 0 -3px #555;
 46         }
 47         [class^=box] {
 48             display: flex;
 49         }
 50         .box-1 {
 51             justify-content: center;    /* 項目在主軸上的對齊方式，此例中爲水平方向對齊方式 */
 52             align-items: center;        /* 項目在交叉軸上的對齊方式，此例中爲豎直方向對齊方式 */
 53         }
 54         .box-2 {
 55             justify-content: space-between;
 56         }
 57         /* :nth-of-type(N) 選擇器匹配屬於父元素的特定類型的第 N 個子元素的每一個元素 */
 58         .box-2 .item:nth-of-type(2) {
 59             align-self: flex-end;        /* 定義單個項目與其餘項目具備不同的對齊方式 */
 60         }
 61         .box-3 {
 62         }
 63         .box-3 .item:nth-of-type(2) {
 64             justify-content: center;
 65             align-self: center;
 66         }
 67         .box-3 .item:nth-of-type(3) {
 68             align-self: flex-end;
 69         }
 70         .box-4, .box-6 {
 71             justify-content: space-between;
 72         }
 73         .column {
 74             display: flex;
 75             flex-direction: column;        /* 建立方向軸，column表示主軸爲垂直方向，起點在上沿 */
 76             justify-content: space-between;        /* 項目在主軸上的對齊方式，space-between 表示兩端對齊 */
 77         }
 78         .box-5 {
 79             justify-content: space-between;
 80         }
 81         .box-5 .column:nth-of-type(2), .box-7 .column:nth-of-type(2) {
 82             justify-content: center;
 83         }
 84         .box-8 .column:nth-of-type(2) {
 85             justify-content: space-around;
 86         }
 87     </style>
 88 </head>
 89 
 90 <body>
 91     <div class="box-1">
 92         <span class="item"></span>
 93     </div>
 94 
 95     <div class="box-2">
 96         <span class="item"></span>
 97         <span class="item"></span>
 98     </div>
 99 
100     <div class="box-3">
101         <span class="item"></span>
102         <span class="item"></span>
103         <span class="item"></span>
104     </div>
105 
106     <div class="box-4">
107         <div class="column">
108             <span class="item"></span>
109             <span class="item"></span>
110         </div>
111         <div class="column">
112             <span class="item"></span>
113             <span class="item"></span>
114         </div>
115     </div>
116 
117     <div class="box-5">
118         <div class="column">
119             <span class="item"></span>
120             <span class="item"></span>
121         </div>
122         <div class="column">
123             <span class="item"></span>
124         </div>
125         <div class="column">
126             <span class="item"></span>
127             <span class="item"></span>
128         </div>
129     </div>
130 
131     <div class="box-6">
132         <div class="column">
133             <span class="item"></span>
134             <span class="item"></span>
135             <span class="item"></span>
136         </div>
137         <div class="column">
138             <span class="item"></span>
139             <span class="item"></span>
140             <span class="item"></span>
141         </div>
142     </div>
143 
144     <div class="box-7">
145         <div class="column">
146             <span class="item"></span>
147             <span class="item"></span>
148             <span class="item"></span>
149         </div>
150         <div class="column">
151             <span class="item"></span>
152         </div>
153         <div class="column">
154             <span class="item"></span>
155             <span class="item"></span>
156             <span class="item"></span>
157         </div>
158     </div>
159 
160     <div class="box-8">
161         <div class="column">
162             <span class="item"></span>
163             <span class="item"></span>
164             <span class="item"></span>
165         </div>
166         <div class="column">
167             <span class="item"></span>
168             <span class="item"></span>
169         </div>
170         <div class="column">
171             <span class="item"></span>
172             <span class="item"></span>
173             <span class="item"></span>
174         </div>
175     </div>
176 
177     <div class="box-9">
178         <div class="column">
179             <span class="item"></span>
180             <span class="item"></span>
181             <span class="item"></span>
182         </div>
183         <div class="column">
184             <span class="item"></span>
185             <span class="item"></span>
186             <span class="item"></span>
187         </div>
188         <div class="column">
189             <span class="item"></span>
190             <span class="item"></span>
191             <span class="item"></span>
192         </div>
193     </div>
194 </body>
195 
196 </html>

View Code

相關標籤/搜索

每日一句

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