【CSS佈局】深入理解CSS flex佈局
先來看一張圖：
基本概念
1， 主軸預設為x軸，側軸預設為y軸。flex佈局就是圍繞這個軸來進行的
2， flex container就是佈局的父元素，flex item就是子元素
flex container的屬性一共有：
1，主軸方向flex-direction: row/row-reverse/column/column-reverse
來看一個例子：
<style> .parent { display: flex; border: 1px solid red; width: 500px; } .child { border: 1px solid black; width: 100px; height: 50px; margin: 10px; } </style> <div class="parent"> <div class="child"></div> <div class="child"></div> <div class="child"></div> </div>
可以看到給父元素設定display後，三個子元素就排在一行了，因為flex-direction預設為row,就是排在一行
再看看一個flex-direction：row-reverse的例子：
.parent { display: flex; border: 1px solid red; width: 500px; flex-direction: row-reverse; } .child { border: 1px solid black; width: 100px; height: 50px; margin: 10px; }
可以看到，子元素的排列順序反了過來
flex-direction：column就是排在一列，這裡就不做演示了
2，flex-wrap（換行）:nowrap/wrap/wrap-reverse
看個例子：
.parent { display: flex; border: 1px solid red; width: 500px; flex-direction: row-reverse; } .child { border: 1px solid black; width: 100px; height: 50px; margin: 10px; }
可以看到父元素的寬度為500，本來容不下六個子元素，但因為flex-wrap預設為nowrap。
來看加上flex-wrap：wrap的效果：
顯而易見，一行容不下6個子元素，他們自動進行了換行
3，justify-content（主軸內容）
.parent {
display: flex;
border: 1px solid red;
width: 500px;
height: 60px;
flex-direction: row;
flex-wrap: nowrap;
justify-content: space-between
}
.child {
border: 1px solid black;
width: 100px;
height: 50px;
}
<div class="parent">
<div class="child">1</div>
<div class="child">2</div>
<div class="child">3</div>
</div>
使用justify-content：space-between（空隙在中間）
來看效果圖：
可以看到，多餘的空間都在元素的中間
使用justify-content：space-around（空隙在周圍）
來看效果圖：
使用justify-content：flex-start （和主軸第一個元素對齊）
使用justify-content：center（居中）
4，align-items（側軸內容如何排列，）
使用align-items： stretch（預設值，意思是伸展，拉伸）;
.parent {
display: flex;
border: 1px solid red;
width: 500px;
flex-direction: row;
flex-wrap: nowrap;
justify-content: space-around;
align-items: stretch;
}
.child {
border: 1px solid black;
width: 100px;
}
</style>
<div class="parent">
<div class="child">1 <br> 1<br>1 <br>1 <br>1 </div>
<div class="child">2 <br> 2 <br> 2 </div>
<div class="child">3</div>
</div>
可以看到子元素2 和子3元素的內容是不足以撐開容器的高度，但是align-items： stretch吧他們的容器高度進行了拉伸，和最高的元素一樣高
使用align-items： flex-start（意思是所有的元素往側軸的起點靠）;
看效果：
使用align-items： center（往側軸的中間放）：
align-content和justify-content的屬性一樣，只不過前者是側軸，後者是主軸，這裡就不介紹啦。
下面來看flex item的屬性：
1，flex-grow（當空間多餘時，這個屬性決定孩子如何分配多餘的空間）
先看一個不使用flex-grow的例子：
可以看到第三個孩子右邊還有很多空間。
此時，在孩子1身上寫：flex-grow：1，
.child:nth-child(1) {
flex-grow: 1
}
效果如下：
可以看到孩子1吧多餘的空間佔滿了！！！！， 因為他吃的是獨食
給孩子2加上flex-grow：1再看：
.child:nth-child(1) {
flex-grow: 1
}
.child:nth-child(2) {
flex-grow: 1
}
效果圖：
可以看到孩子1和孩子2平分了剩下的空間。
如果在孩子3上加flex-grow：1 ，那麼三個孩子平分這個多餘的空間
如果孩子1寫flex-grow：2， 孩子2寫：fle-grow：1，那麼孩子1就拿三分之二的空間，孩子2就拿三分之一的空間 是不是感覺恍然大悟呢？
2，flex-shrink（當空間不夠時，這個屬性決定孩子瘦了多少），這裡就不展開講了
3，flex-basis（預設為元素本身的大小，一般不用）
4，order（決定flex元素的順序）
看一個例子：
.parent {
display: flex;
border: 1px solid red;
width: 500px;
}
.child {
border: 1px solid black;
margin: 2px;
height: 60px;
}
.child:nth-child(1) {
order: 2;
}
.child:nth-child(2) {
order: 3;
}
.child:nth-child(3) {
order: 1;
}
效果如圖：
可以看到，通過改變order，來改變元素的位置。
algin-self（自己決定自己的位置）
看一個例子：
.parent {
display: flex;
border: 1px solid red;
width: 500px;
justify-content: space-around;
align-items: flex-start;
}
.child {
border: 1px solid black;
margin: 2px;
}
<div class="parent">
<div class="child">111 <br> 111 <br> 111 <br> 111 </div>
<div class="child">222 <br> 222 <br> 222 </div>
<div class="child">333</div>
</div>
現在孩子3是在最上面的，可是他就很皮，就不想在最上面，那怎麼辦呢？
就可以用align-self來調整孩子3的位置，比如：
.child:nth-child(3) {
align-self: center;
}
就有如下效果：
看到這裡，你是不是對flex佈局有的新的體會呢：）
完。