title: FlexBox
date: 2016-09-08 11:55
tags: CSS
0x00 FlexBox
flexbox 可以自動擴展其內(nèi)部的 items 項目(元素) 的寬度或者高度以最大限度的去填充 flex 容器的可用空間，或者自動收縮其內(nèi)部空間，以防止其內(nèi)容溢出。
flexbox 的布局算法是與方向無關的，對于應用程序組件或者小規(guī)模的布局需求，flexbox 布局是很適合的，而針對大規(guī)模的布局，新興的 Grid 布局或許是個不錯的選擇。
0x01 display:flex
對指定的元素使用 display:flex 屬性，它便成為了一個 FlexBox 元素，它依舊是塊級元素，只是擁了有一些 FlexBox 的特性。
當然，脫離了傳統(tǒng)的 vertical 和 horizontal 形式，F(xiàn)lexBox 需要一些新的概念，比如，主軸(main axis)，交叉軸(cross axis) 等。如下圖：
main axis: 是沿著 FlexBox 的布局方向，它并非就是水平或者垂直的，我們可以使用 flex-direction 這個屬性去設置的我們布局方向，即是 main axis。
cross axis: 是與布局方向，即是與主軸垂直的軸。
先有這個兩個概念。
當一個元素成為 flex 容器后，
float,clear,vertical-align屬性不再適用于 flexbox中的 item 了
0x02 flex-direction
flex-direction 決定哪個方向為主軸的方向。
flex-diretion 屬性值如下:
flex-direction:row:主軸為橫向的，即是沿著水平方向布局(從左向右)。
flex-direction:row-reverse:與 row 相反，沿著從右向左的方向布局
flex-direction:colum:主軸為垂直的，沿著從上到下的方向布局。
flex-direction:colum-reverse:與 colum 相反，沿著從下到上的方向布局。
實例代碼:
//HTML
<div class="wrap">
<div class="flex_item">1</div>
<div class="flex_item">2</div>
<div class="flex_item">3</div>
</div>
//CSS
html{
font-size: 100px;
max-width: 640px;
min-width: 640px;
}
.wrap{
margin: 1.5rem auto;
border:1px solid deeppink;
font-size: 0.16rem;
width: 3.2rem;
}
.flex_item{
width: 2rem;
height: 2rem;
text-align:center;
}
.wrap .flex_item:nth-child(1){
background: #333;
}
.wrap .flex_item:nth-child(2){
background: deeppink;
}
.wrap .flex_item:nth-child(3){
background: green;
}
對 wrap 使用 display:flex 和 flex-direction:row-reverse
.wrap{
display: flex;
flex-direction: row-reverse;
margin: 1.5rem auto;
border:1px solid deeppink;
font-size: 0.16rem;
width: 3.2rem;
}
0x03 flex-wrap
flex-wrap 是 FlexBox 的換行屬性，默認值為 flex-wrap:no-wrap 即不換行，此時 flex 容器中的 items （子元素）會隨著 flex 容器的大小自動縮放，即使 items 設置了固定的 width/height 并且超過了容器的大小，也不會溢出，而是平分 flex 容器的空間。
flex-wrap 的屬性值如下:
flex-wrap:nowrap（默認值）:不換行
flex-wrap:wrap:換行，第一行在最上
flex-wrap:wrap-reverse:換行，第一行在最后
.wrap{
width: 3.2rem;
/*flex 容器寬度為 3.2 rem*/
}
.flex_item{
width: 3rem;
/*items 的寬度和 6rem，沒有 overflow ，而是平分 flex 容器的空間*/
}
為 flex 容器設置 flex-wrap:wrap:
.wrap{
flex-wrap:wrap;
width: 3.2rem;
/*flex 容器寬度為 3.2 rem*/
}
.flex_item{
width: 3rem;
/* items 寬度和 6rem，同樣沒有 overflow ，而是自動換行*/
}
0x04 flex-flow
flex-flow 是 flex-direction 和 flex-wrap 兩個屬性的簡寫屬性，只是這兩個屬性。
.wrap{
flex-flow:row-reverse wrap-reverse;
}
0x04 items 中的 flex
在 items 中使用 flex 可以設定每個 items 在 flex 容器中所占據(jù)的空間比例，而且還可以指定最小值。
flex 的書寫格式是: flex: flex-grow flex-shrink flex-basis
flex-grow:表示 item 擴展時在容器中所占據(jù)的空間比例
flex-shrink:表示 item 縮放時在容器中所占據(jù)的空間比例
flex-basis:表 item 的原始大小。
.wrap .flex_item:nth-child(1){
background: #333;
flex:1 1 1rem;
}
.wrap .flex_item:nth-child(2){
background: deeppink;
flex: 2 1 2rem;
}
.wrap .flex_item:nth-child(3){
background: green;
flex: 3 1 3rem;
}
justify-content
justify-content 設置 flex 容器的 main axis 對齊方式。
justify-content 各屬性值如下:
justify-content:flex-start(默認值):在 main axis 的 flex-start 對齊
justify-content:flex-end:在 main axis 的 flex-end 對齊
justify-content:center:在 main axis 的 中心對齊
justify-content:space-between:在 main axis 的兩端對齊。
justify-content:space-around:
align-items
align-items 決定 cross axis 的對齊方式,align-items 于 justify-content 的作用是一致的，只是他們的方向不同而已，但是其與 align-content 區(qū)別在于，align-items 是作用于當前 flex 容器中的 items，而 align-content 則是用于 item 中內(nèi)容的垂直對齊。
aling-items 其屬性值有:
align-items:center: 在 cross axis 中心對齊
align-items:flex-start: 在 cross axis 的 flex-sart 對齊
aling-items:flex-end: 在 cross axis 的 flex-end 對齊
align-items:stretch默認值):當 flex 容器有高度，而 items 沒有高度時，items 的高度將會充滿 flex 容器的高度。
align-items:baseline:在 items 中的 文字基線對齊
align-self
align-self 是在單獨項目上的對齊方式。
其可選屬性值有:auto,flex-start,flex-end,center,baseline,strech.
DOM 結(jié)構
<body>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</body>
SCSS樣式:
body{
padding-top: 20vh;
display: flex;
justify-content: space-around;
align-items: flex-start;
min-height: 100vh;
background: deeppink;
.item{
background: gray;
width: 40vh;
height: 40vh;
}
.item:nth-child(2){
background: #333;
align-self: center;
}
}
0x0 flex
未完待續(xù)...
