布局神器：Flexbox

本文轉載自查看原文 2015-04-03 16:47 7809 flexbox/ css3

最近的工作內容大多是移動端網頁的開發，百分比布局，Media Queries,Bootstrap等常規的響應式/自適應的開發技術皆一一試過，但覺以上都不夠靈活，所以，一直再嘗試尋求更加靈活的精確的移動端網頁設計技術。

尋求的過程中知道了兩個讓我眼前一亮的解決方案：一個是Flexbox;另外一個是REM。

初次見到Flexbox的神奇用法，是在慕課網上看到《Flexbox，更優雅的布局》的視頻教程：http://www.imooc.com/video/6048

讓我眼前一亮的是如下的功能：

在線測試demo

http://ued.ctrip.com/blog/wp-content/webkitcss/demo/align-items.html

利用工作完成之余，在兩天的時間內對Flexbox進行了一次全面的認識與實踐，越發喜愛這個神器。

1# 讓我們來認識下：什么是Flexbox?

能夠按照設置好的規則來排列容器內的項目，而不必去計算每一個項目的寬度和邊距。甚至是在容器的大小發生改變的時候，都可以重新計算，以至於更符合預期的排版。不僅解放了計算器，而且更加優美的服務於響應式設計.

flex的字面意思是，伸縮性的、彎曲的，引申含義為可自由配置的、靈活的意思。CSS3中的flex屬性也是這么理解，具有flex屬性的容器和容器內的項目都具有彈性計算的能力，以至於符合預定的規則

2# Flexbox對瀏覽器的兼容性

3#Flexbox原理

一個設有「display:flex」或「display:inline-flex」的元素是一個伸縮容器，伸縮容器的子元素被稱為伸縮項目，這些子元素使用伸縮布局模型來排版。與布局計算偏向使用書寫模式方向的塊布局與行內布局不同，伸縮布局偏向使用伸縮流的方向。「flex-flow」的值決定了這些術語如何對應到物理方向（上／右／下／左）、物理軸（垂直／水平）、物理大小（寬度／高度）。

—來自 http://www.w3.org/html/ig/zh/wiki/Css3-flexbox/zh-hans

4、flex容器屬性

4.1、display（應用於flex屬性）

flex：相當於block
inline-flex：相當於inline-block

4.2、flex-direction（流動布局的主軸方向）

row（默認）：行方向，在“ltr”（left-to-right）排版方式下從左向右排列；在“rtl”（right-to-left）排版方式下從右向左排列。
row-reverse：行反方向，與row排列方向相反。在“ltr”（left-to-right）排版方式下從右向左排列；在“rtl”（right-to-left）排版方式下從左向右排列。
column：列方向，與行方向垂直。在“ttb”（top-to-bottom）排版方式下從上向下排列；在“btt”（bottom-to-top）排版方式下從下向上排列。
column-reverse：類似於row-reverse，與column排列方向相反。在“ttb”（top-to-bottom）排版方式下從下向上排列；在“btt”（bottom-to-top）排版方式下從上向下排列。

4.3、flex-wrap（流動布局的側軸方向）

nowrap（默認）：無側軸，即不換行。
wrap：側軸垂直於主軸。在“ltr”、“rtl”排版方式下，側軸方向向下；在“ttb”、“btt”排版方式下，側軸方向向左。
wrap-inverse：與wrap屬性相反。

4.4、flex-flow（“flex-direction”和“flex-wrap”屬性的縮寫）

row nowrap為其默認屬性值，分別表示flex-direction和flex-wrap屬性。

4.5、justify-content（主軸方向內容對齊方式）

flex-srart（默認）：與主軸起始方向對齊。
flex-end：向主軸終點方向對齊。
center：向主軸中點方向對齊。
space-between：起始位置向主軸起始方向對齊，終點位置向主軸終點方向對齊，其余位置向主軸中點方向對齊。
space-around：與space-between類似，只是起始位置和終點位置保留一半空白。

以上描述，參考下圖：

4.6、align-content（多個主軸沿側軸方向的內容堆棧對齊方式）

flex-start：多個主軸沿側軸起始方向對齊。
flex-end：多個主軸沿側軸終點方向對齊。
center：多個主軸沿側軸中點方向對齊。
space-between：第一個主軸沿主軸起始方向對齊，末尾主軸沿主軸終點方向對齊，其他主軸均勻分布對齊。
space-around：與space-between類似，只是側軸起始位置和側軸終點位置保留一半空白。
stretch（默認）：伸縮多個主軸，保持側軸方向統一距離。

以上描述，參考下圖：

4.7、align-items（側軸方向內容對齊方式）

與justify-content類似，只是這里的參考方向為側軸。

stretch（默認）：在側軸方向拉伸每個項目，使每個項目保持相同的起始位置和終點位置。
flex-srart：與側軸起始方向對齊。
flex-end：向側軸終點方向對齊。
center：向側軸中點方向對齊。
baseline：在側軸上保持基線對齊，以第一個項目的基線為准。

以上描述，參考下圖：

4.8、flex項目屬性3.1、order（排序）

整數，默認為0，負無窮到正無窮。容器中的項目都是依order值從小到大排列，order值越大越就越在主軸方向的末尾。比如：

4.9、flex-grow（空白空間分配比例）

大於0的正數值。

4.10、flex-shrink（項目空間分配比例）

大於0的正數值。

4.11、flex-basis（項目的主軸方向長度）

如果項目制定了實際長度，則此長度為主。否則為自動計算長度。默認為auto。

4.12、flex（flex-grow、flex-shrink和flex-basis三個屬性的簡寫）

格式為：flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]

4.13、align-self（項目在側軸方向的對齊方式）

參考於容器的align-items（2.7）。

-------------------------------------------------

實例

html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>demo:clearfix</title>
	<link rel="stylesheet" type="text/css" href="css/flex.css">
</head>

<body>

<!--flex:垂直/水平居中-->

<div class="wrap">

	<h3>flex:垂直/水平居中:<span class="code">{display:flex;justify-content:center;align-items:center}</span></h3>

<div class="demo">
	<img src="img/1.jpg">
</div>
<div class="demo">
	<img src="img/2.jpg">
</div>
<div class="demo">
<img src="img/3.jpg">	
</div>
<div class="demo">
	<img src="img/1.jpg">
</div>
<div class="demo">
	<img src="img/2.jpg">
</div>
<div class="demo">
	<img src="img/4.jpg">
</div>

</div>

<!--水平響應式列表-->

<div class="wrap">
<h3>水平響應式列表:<span class="code">{display:flex;justify-content:space-between;}</span></h3>
	<div class="demo1">
		<div class="item item1">高120px</div>
		<div class="item item2">高50px</div>
		<div class="item item3">高140px</div>
		<div class="item item4">高100px</div>
	</div>
</div>


<!--水平響應式列表底端對齊-->

<div class="wrap">
<h3>水平響應式列表底端對齊:<span class="code">{display:flex;justify-content:space-around;align-items:flex-end;}</span></h3>
	<div class="demo2">
		<div class="item item1">高120px</div>
		<div class="item item2">高50px</div>
		<div class="item item3">高140px</div>
		<div class="item item4">高100px</div>
	</div>
</div>


<!--多行響應式布局-->

<div class="wrap">
<h3>多行響應式布局:<span class="code">{display:flex;justify-content:space-around;align-items:flex-end;flex-wrap:wrap;}</span></h3>
	<div class="demo3">
		<div class="item"></div>
		<div class="item"></div>
		<div class="item"></div>
		<div class="item"></div>
		<div class="item"></div>
		<div class="item"></div>
		<div class="item"></div>
		<div class="item"></div>
	</div>
</div>



<!--左固定右自適應等高布局-->

<div class="wrap">
<h3>左固定右自適應等高布局:<span class="code">{display:flex(父);flex-grow:0(子/固定);flex-grow:1(子/自適應);}</span></h3>

<div class="demo4">
	<div class="left">左邊固定寬度為100px，這里設置了高度為auto</div>
	<div class="right">右邊寬度自適應，並且左右兩個區域是等高的，這里設置了高度為200px</div>
</div>

</div>


<!--左右固定中間自適應寬度底部對齊布局-->

<div class="wrap">
	
<h3>左右固定中間自適應寬度底部對齊布局:<span class="code">{display:flex(父);flex-grow:0(子/左/固定);flex-grow:1(子/中/自適應);flex-grow:0(子/右/固定);}</span></h3>

<div class="demo5">
	<div class="left">左邊固定寬度為200px，這里設置了高度為auto</div>
	<div class="center">中間寬度自適應，並且左右兩個區域是等高的，這里設置了高度為200px</div>
	<div class="right">右邊固定寬度為200px，這里設置了高度為auto</div>
</div>



</div>



</body>




</html>

  1 /*
  2 *built by @kevin
  3 *2015/4/2
  4 *for learning flex
  5 *http://qianduanblog.com/post/css-learning-16-css3-flex-responsive-design.html
  6 *http://qianduanblog.com/post/css-learning-18-css3-flex-responsive-design-example.html
  7 *https://github.com/amfe/lib.flexible相關解決方案
  8  */
  9 
 10 
 11 *{
 12     margin: 0;
 13     padding: 0;
 14 }
 15 
 16 body{
 17     padding: 15px;
 18 }
 19 
 20 .wrap {
 21     font-family: "microsoft yahei";
 22     width: 100%;
 23     margin-bottom: 50px;
 24    display: inline-block;
 25 }
 26 
 27 h3{
 28     text-align: center;
 29     margin-bottom: 20px;
 30     color: #999;
 31 }
 32 
 33 
 34 .demo{
 35     width: 188px;
 36     height: 188px;
 37     background: #f5f5f5;
 38     margin:5px;
 39     float: left;
 40     margin-left: 20px;
 41 
 42     /*flex布局（作用於容器）*/
 43     display: flex;
 44 
 45     /*水平居中（作用於容器）*/
 46     justify-content: center;
 47 
 48     /*垂直居中（作用於容器）*/
 49     align-items: center;
 50 }
 51 
 52 .demo img{
 53     max-width: 150px;
 54     max-height: 150px;
 55     width: auto;
 56     height: auto;
 57 }
 58 
 59 
 60 
 61 
 62 /*水平響應列表*/
 63 
 64 .demo-wrap{
 65     border: 2px solid #ddd;
 66     background: #f7f7f7;
 67     height: 300px;
 68 }
 69 
 70 /*水平響應式列表*/
 71 
 72 .demo1{
 73     width: 100%;
 74     background-color: #333;
 75     /*flex布局（作用於容器）*/
 76     display: flex;
 77  
 78     /*兩端對齊（作用於容器）*/
 79     justify-content: space-between;
 80 }
 81 
 82 
 83 /*水平響應式列表底端對齊*/
 84 
 85 .demo2{
 86     width: 100%;
 87     background-color: #f5f5f5;
 88     /*flex布局（作用於容器）*/
 89     display: flex;
 90     /*兩端對齊（作用於容器）*/
 91     justify-content: space-around;
 92 
 93     align-items:flex-end;
 94 
 95 }
 96 
 97 
 98 
 99 /*多行響應式布局*/
100 
101 .demo3{
102     width: 100%;
103  
104     /*flex布局（作用於容器）*/
105     display: flex;
106  
107     /*兩端對齊（作用於容器）*/
108     justify-content: space-around;
109  
110     /*側軸方向對齊方式（作用於容器）*/
111     align-items: flex-end;
112  
113     /*換行（作用於容器）*/
114     flex-wrap: wrap;
115 }
116  
117 .demo3 .item{
118     width: 300px;
119     height: 50px;
120     background: #444;
121     margin-bottom: 20px;
122 }
123 
124 /*左固定右自適應等高布局*/
125 
126 .demo4{
127     display: flex;
128     /*項目拉伸對齊，也就是所左邊的高度為拉伸到和右邊等高，默認是拉伸的*/
129     /*align-items: stretch;*/
130 }
131 
132 .demo4 .left{
133 
134     /*左邊固定寬度，必須設置其最小寬度和最大寬度*/
135     width: 200px;
136     min-width: 200px;
137     max-width: 200px;
138 
139     /*高度自由分配*/
140 
141     height:auto;
142 
143     background-color: #333;
144     color:#fff;
145 
146     /*空白區域分配比例為0（作用於項目）*/
147 
148     flex-grow:0;
149 
150 }
151 
152 .demo4 .right{
153     margin-left: 10px;
154     width:auto;
155     height:200px;
156     background-color: #333;
157     color:#fff;
158     /*空白區域分配比例為1（作用於項目）
159     左右得到的空白比例為0:1，所以右邊會分配到剩余的所有空白區域，
160     左邊成固定的寬度，右邊為自適應寬度*/
161     flex-grow: 1;
162 
163 
164 }
165 
166 /*左右固定中間自適應寬度底部對齊布局*/
167 
168 .demo5{
169     display: flex;
170 }
171 
172 .demo5 .left,.demo5 .right{
173     width: 200px;
174     height: auto;
175     max-width: 200px;
176     min-width: 200px;
177     background-color: #333;
178     color:#fff;
179     flex-grow:0;
180 }
181 
182 .demo5 .center{
183     width: auto;
184     height: 200px;
185     background-color: #66cccc;
186     color:#fff;
187     flex-grow:1;
188 
189 }
190 
191 
192 
193  
194  .item{
195     width: 100px;
196     background: #66cccc;
197     color: #C90000;
198     font-size: 20px;
199     text-align: center;
200     line-height: 50px;
201 }
202  
203  .item1{
204     height: 120px;
205 }
206  
207  .item2{
208     height: 50px;
209 }
210  
211  .item3{
212     height: 140px;
213 }
214 
215 .item4{
216     height: 100px;
217 }
218 
219 
220 .demo6{
221     width: 188px;
222     background: #f5f5f5;
223     margin:5px;
224     float: left;
225     margin-left: 20px;
226 
227 }
228 
229 .demo6 img{
230     display: none;
231 }
232 
233 
234 
235 
236 .demo{
237     width: 188px;
238     height: 188px;
239     background: #f5f5f5;
240     margin:5px;
241     float: left;
242     margin-left: 20px;
243 
244     /*flex布局（作用於容器）*/
245     display: flex;
246 
247     /*水平居中（作用於容器）*/
248     justify-content: center;
249 
250     /*垂直居中（作用於容器）*/
251     align-items: center;
252 }
253 
254 .demo img{
255     max-width: 150px;
256     max-height: 150px;
257     width: auto;
258     height: auto;
259 }

參考資料

http://qianduanblog.com/post/css-learning-16-css3-flex-responsive-design.html
http://qianduanblog.com/post/css-learning-18-css3-flex-responsive-design-example.html
http://www.imooc.com/video/6048
http://ued.ctrip.com/blog/wp-content/webkitcss/prop/align-items.html

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 flexbox彈性布局 CSS3之Flexbox布局 iOS - FlexBox 布局之 YogaKit flexbox彈性盒子布局 CSS3 Flexbox布局那些事【RN - 基礎】之FlexBox彈性布局 React Native 彈性布局FlexBox Flexbox 布局的最簡單表單 Flexbox Froggy：練習 Flex 布局的小游戲一篇完整的FlexBox布局指南