前言
在css中其實也學(xué)過布局，利用display,float,position進行的布局，而最近微信小程序開發(fā)的學(xué)習(xí)是又學(xué)到了新的布局（涉及的比較晚，所以現(xiàn)在才知道而已，其實早都有了），因此來記錄一下學(xué)習(xí)過程。
一、flex布局定義
Flex 是 Flexible Box 的縮寫，意為"彈性布局"，用來為盒狀模型提供最大的靈活性。
任何的容器（盒子）中都可以用flex屬性。
.box{
display:flex;
}
或者行內(nèi)的flex屬性設(shè)置。
.box{
display:inline-flex;
}
二、容器的屬性
在進行了display的屬性設(shè)置后，這是容器擁有了以下幾個屬性可以設(shè)置。
- flex-direction
- flex-wrap
- flex-flow
- justify-content
- align-items
- align-content
以下對其中幾個進行簡要的說明，因為其中一些屬性接觸的次數(shù)也不多，所以沒有太多可以講的。
2.1 flex-direction
.box{
flex-direction: row | row-reverse | column | column-reverse
}
其中row為默認(rèn)值，代表將元素以行排列（以左為起點）。row-reverse代表以右為起點進行行排列。column代表從頁面上方進行列排列。column-reverse代表從頁面下方進行列排列。效果圖如下：
其實這個屬性是用的最多的，因為在他很方便，而且目前階段我對它的接觸最多，因此運用的還算熟練。
2.2 flex-wrap
默認(rèn)將項目排在一條線上，不換行。而 flex-wrap的屬性則設(shè)定如何換行。
.box{
flex-wrap: nowarp | wrap | wrap-reverse;
}
nowrap（默認(rèn)）為不換行，項目全部排列在一行。
wrap為換行，第一行在上面。
wrap-reverse為換行，但是第一行在下面。
2.3 flex-flow
該屬性為flex-direction和flex-wrap的簡寫形式。
.box{
flex-direction: flex-direction || flex-wrap;
}
書寫格式為先寫flex-direction的值，再寫flex-wrap的值。兩個中間加空格。
