移動端的自適應布局神奇—Flex Box(1)

2024-04-27 15:15:50

字體：大中小

來源：轉載

供稿：網友

Flex布局，是W3C于2009年提出的一種新的布局方式。傳統的CSS布局方式，經常會出現一些很難控制的問題，比如垂直居中、多列布局的自適應問題等。而Flex布局方式，可以很方便的實現這些功能，而且不容易出現布局錯誤。

最重要的是，在移動端Web開發過程中，采用Flex布局模式進行開發的效率是非常高的。Flex布局，更適合H5應用開發。

Flex，顧名思義，就是非常靈活的一種布局方式。一般的Flex布局中，首先都會有一個整體元素，稱為flex box。這個容器元素內部包含著的其他元素，就可以很靈活的適應整個容器的變化，而不會出現布局上的紊亂。注意，在flex box元素中，元素的某些屬性會失效，包括float、clear及vertical-align屬性。

在接下來的博客中，將帶大家學習Flex Box各種屬性，以及如何利用這些屬性實現自適應布局。隨文章附上了許多實驗代碼供大家參考。

彈性容器，指的就是使用flex布局的整體的父元素。這個父元素的所有子元素，都屬于這個flex容器的成員，稱為彈性項目。要想讓一個容器成為彈性容器，必須設置這個元素的display屬性為flex或者inline-flex。與block和inline一樣，flex和inline-flex都能將一個元素設定為彈性容器，區別是實用flex屬性值這個元素就是一個塊級元素的彈性容器，而實用inline-flex屬性值，這個元素就是一個保持了inline屬性的彈性容器。

彈性容器和彈性項目都可以通過設定一些屬性，達到我們想要的布局效果。那么一個彈性容器的內部是什么樣的呢？

每一個彈性容器都有一個水平軸和一個縱軸線，彈性容器中的彈性項目，就要根據這兩條軸線的方向進行排列。具體按照哪個軸線排列，可以定義彈性容器的flex-direction屬性進行設定。

一、flex-direction屬性

flex-direction屬性有四個屬性值：row，row-reverse，column，column-reverse。它們分別表示沿水平軸線從左向右排序，沿水平軸線從右向左排序，沿豎直軸從上到下排列，以及沿豎直軸從下到上排列。

下面的例子就是一個Flex布局例子，每個子元素都進行了編號，來直觀看看彈性容器不同的flex-direction屬性值是如何影響彈性項目的布局效果的。

代碼：

<!DOCTYPE><html><head><meta charSet="utf-8" /><meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/><style type="text/css">.container{  display:flex;  display:-webkit-flex;  border: 2px solid black;  padding: 20px;  margin: 20px;}.item{  background: green;  width: 100px;  height: 100px;  margin: 10px;  font-weight: bold;}.row{  flex-direction: row;}.row-reverse{  flex-direction: row-reverse;}.column{  flex-direction: column;}.column-reverse{  flex-direction: column-reverse;}</style></head><body><div class="container row">  <div class="item">1</div>  <div class="item">2</div>  <div class="item">3</div>  <div class="item">4</div></div><div class="container row-reverse">  <div class="item">1</div>  <div class="item">2</div>  <div class="item">3</div>  <div class="item">4</div></div><div class="container column">  <div class="item">1</div>  <div class="item">2</div>  <div class="item">3</div>  <div class="item">4</div></div><div class="container column-reverse">  <div class="item">1</div>  <div class="item">2</div>  <div class="item">3</div>  <div class="item">4</div></div></body></html>
打開瀏覽器，即可直觀觀察到flex-direction屬性對于元素布局的影響。使用row屬性值時，元素會從左側開始布局，使用row-reverse屬性值時，元素會從右側開始布局。使用column和column-reverse時結果類似，只是變成豎直方向的布局了。
現在，我們縮小網頁的屏幕，來看一下會發生什么效果。當我們縮小網頁屏幕到一定范圍后，所有彈性項目會發生等比例的收縮，從而保證元素的排列布局沒有任何紊亂。這就是flex布局最驚人的地方。如何控制彈性項目收縮的程度，將在下面的例子中繼續介紹。這個特性也是為什么彈性項目廣泛應用于移動端應用的原因，它可以很好的適應各種分辨率的手機屏幕。
另外一個需要注意的是，當為父元素設定display屬性時，針對-webkit內核的瀏覽器需要使用-webkit-flex或者-webkit-inline-flex屬性值來進行兼容。
二、flex-wrap屬性
上面的例子中，不管我們怎么在寬度上縮小父容器，其彈性項目都會以犧牲自身原本的大小來適應父元素的寬度，并排列在一行上。但是有的時候我們并不想改變元素形狀，而是當父元素寬度變小的時候，子元素可以自動換行。Flex布局也提供了滿足這個需求的方法，可以通過為父元素設定flex-wrap屬性來實現。
flex-wrap屬性有三個屬性值，nowrap屬性值是默認屬性值，表示不進行換行。wrap和wrap-reverse屬性值可以實現元素的自動換行，并且會保形狀不變。當父元素收縮時，子元素會保證自己的寬度，一行放不下的情況下會選擇換行，其中wrap是正向換行，而wrap-reverse會從反向進行換行。
代碼：
<!DOCTYPE><html><head><meta charSet="utf-8" /><meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/><style type="text/css">.container{  display:flex;  display:-webkit-flex;  border: 2px solid black;  padding: 20px;  margin: 20px;  flex-direction: row;}.item{  background: green;  width: 100px;  height: 100px;  margin: 10px;  font-weight: bold;}.nowrap{  flex-wrap: nowrap;}.wrap{  flex-wrap: wrap;}.wrap-reverse{  flex-wrap: wrap-reverse;}</style></head><body><div class="container nowrap">  <div class="item">1</div>  <div class="item">2</div>  <div class="item">3</div>  <div class="item">4</div>  <div class="item">5</div>  <div class="item">6</div>  <div class="item">7</div></div><div class="container wrap">  <div class="item">1</div>  <div class="item">2</div>  <div class="item">3</div>  <div class="item">4</div>  <div class="item">5</div>  <div class="item">6</div>  <div class="item">7</div></div><div class="container wrap-reverse">  <div class="item">1</div>  <div class="item">2</div>  <div class="item">3</div>  <div class="item">4</div>  <div class="item">5</div>  <div class="item">6</div>  <div class="item">7</div></div></body></html>
可以看到，如果彈性容器設置為允許子元素換行，那么這些子元素會保證自己的大小不發生變化。
三、justify-content屬性
當元素在一行內顯示時，如何規范的規定元素的排列方式呢？Flex布局中可以為父元素設定justify-content屬性。這個屬性有五個選項值，它們可以用來設定元素不同的對齊方式，類似于在Word文章中文字的對齊方式。
flex-start — 設定為左對齊
flex-end — 設定為右對齊
center — 設定為居中對齊
space-between — 設定為居中對齊
space-around — 設定每個元素兩側的距離都相等
為了直觀的看一下justify-content屬性值的作用，來看下面的例子。
代碼：
<!DOCTYPE><html><head><meta charSet="utf-8" /><meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/><style type="text/css">.container{  display:flex;  display:-webkit-flex;  border: 2px solid black;  padding: 20px;  margin: 20px;  flex-direction: row;  flex-wrap: nowrap;}.item1{  background: green;  width: 200px;  height: 100px;  margin: 10px;  font-weight: bold;}.item2{  background: green;  width: 300px;  height: 100px;  margin: 10px;  font-weight: bold;}.item3{  background: green;  width: 100px;  height: 100px;  margin: 10px;  font-weight: bold;}.flex-start{  justify-content: flex-start;}.flex-end{  justify-content: flex-end;}.space-between{  justify-content: space-between;}.space-around{  justify-content: space-around;}.center{  justify-content: center;}</style></head><body><div class="container flex-start">  <div class="item1">1</div>  <div class="item2">2</div>  <div class="item3">3</div></div><div class="container flex-end">  <div class="item1">1</div>  <div class="item2">2</div>  <div class="item3">3</div></div><div class="container center">  <div class="item1">1</div>  <div class="item2">2</div>  <div class="item3">3</div></div><div class="container space-between">  <div class="item1">1</div>  <div class="item2">2</div>  <div class="item3">3</div></div><div class="container space-around">  <div class="item1">1</div>  <div class="item2">2</div>  <div class="item3">3</div></div></body></html>
從上面的例子可以看出，使用justify-content屬性，可以很方便的設定好彈性項目在彈性容器之中的對齊方式。
喜歡讀書的，喜歡學知識的小伙伴，歡迎關注公眾號“精粹微閱讀”加入我們哦～～～