在排頁面中 我們可以應(yīng)用到很多布局：
如：雙飛翼乘凸、多欄鸥拧、彈性党远、流式、瀑布流住涉、響應(yīng)式布局
今天我們就來簡單地說一下彈性布局
1.flex布局是什么麸锉？
是彈性布局，為盒裝模型提供最大的靈活度舆声。
任何一個容器都可以作為彈性盒花沉。
.box{
display: flex;
}
行內(nèi)元素有也可以使用彈性盒布局
.box{
display: inline-flex;
}
Webkit 內(nèi)核的瀏覽器，必須加上-webkit前綴
.box{
display: -webkit-flex; /* Safari */
display: flex;
}
寫了彈性盒布局媳握，浮動啥的都不能用碱屁；
2.基本屬性
如果父級元素設(shè)置了彈性盒子，那么它的子元素都是都跟隨父級蛾找。
3.父級的屬性
flex-direction
flex-wrap
flex-flow
justify-content
align-items
align-content
1.flex-direction決定主軸的方向娩脾，排列方向
.box {
flex-direction: row | row-reverse | column | column-reverse;
}
四個屬性：
row（默認值）：主軸為水平方向，起點在左端打毛∈辽蓿→
row-reverse：主軸為水平方向俩功，起點在右端∨錾←
column：主軸為垂直方向诡蜓，起點在上沿∫忍簦↑
column-reverse：主軸為垂直方向蔓罚，起點在下沿≌八蹋↓
2.flex-wrap如果一條軸線排不下豺谈，如何換行
.box{
flex-wrap: nowrap | wrap | wrap-reverse;
}
有三個值
nowrap 不換行，都在一行顯示贡这。
wrap 換行茬末，第一行在上面，多出來的排到下面
wrap-reverse 換行藕坯，調(diào)換位置
3.flex-flow 是flex-dirextion和flex-wrap的縮寫团南，默認值為row-nowrap；
.box {
flex-flow: <flex-direction> || <flex-wrap>;
}
4.justify-content定義了在主軸上面的對齊方式
.box {
justify-content: flex-start | flex-end | center | space-between | space-around;
}
flex-start 左對齊
flex-end 右對齊
center 居中
space-between 平鋪盒子 平分留白空間
space-around 平鋪盒子 左右有留白
5.align-items在交叉軸上如何對齊
.box {
align-items: flex-start | flex-end | center | baseline | stretch;
}
5個屬性
flex-start：交叉軸的起點對齊炼彪。
flex-end：交叉軸的終點對齊吐根。
center：交叉軸的中點對齊。
baseline: 項目的第一行文字的基線對齊辐马。
stretch（默認值）：如果項目未設(shè)置高度或設(shè)為auto拷橘，將占滿整個容器的高度。
6.align-content很多軸線的對齊方式 如只有一根線 不起作用
.box {
align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}
6個屬性
flex-start：與交叉軸的起點對齊喜爷。
flex-end：與交叉軸的終點對齊冗疮。
center：與交叉軸的中點對齊。
space-between：與交叉軸兩端對齊檩帐，軸線之間的間隔平均分布术幔。
space-around：每根軸線兩側(cè)的間隔都相等。所以湃密，軸線之間的間隔比軸線與邊框的間隔大一倍诅挑。
stretch（默認值）：軸線占滿整個交叉軸。
寫在項目屬性上的
order
flex-grow
flex-shrink
flex-basis
flex
align-self
1.order排列順序 數(shù)越小越靠前
2.flex-grow放大比例 如果都為1則平分空間 如果有一個為2 那么2分到的空間大一點
3.flex-shrink如果項目屬性為1時 在空間不足時泛源，會等比例縮小拔妥，其中有一是0 別的都是1 那么在空間不足時，0不縮放达箍；
4.flex-basis
5.flex 可以寫三個屬性
6.align-self
.item {
align-self: auto | flex-start | flex-end | center | baseline | stretch;
}
希望我的理解可以給你們提供一些幫助没龙，學(xué)識有限，如果有地方出現(xiàn)錯誤或者有更好的方法去實現(xiàn)，歡迎私信硬纤！
