布局
布局 無(wú)非就是 水平 灭美、垂直 對(duì)齊屈张，左對(duì)齊、右對(duì)齊诉植。
水平居中 可以同 通過(guò) margin:0 auto 實(shí)現(xiàn)祥国。
垂直居中可以通過(guò) 絕對(duì)定位 等方法實(shí)現(xiàn)。
.parent {
position: relative
}
.child {
width: 100px;
height: 100px;
position: absolute;
top: 50%;
left: 50%;
margin-top: -50px;
margin-left: -50px;
}
.center{
position: absolute;
top: 50%;
left: 50%;
width:50%;
height:30%;
padding:20px;
text-align:center;
transform: translate(-50%, -50%);
}
最近做了一個(gè)移動(dòng)端頁(yè)面晾腔，開(kāi)始學(xué)習(xí)使用 flex布局舌稀。
flex布局
使用flex布局 設(shè)置父容器 display:flex, justify-content:center 水平居中
align-items:center 實(shí)現(xiàn)垂直居中. 只需要三行代碼。
flex的核心就是容器和軸灼擂。
容器
父容器可以統(tǒng)一設(shè)置子容器的排列方式壁查，子容器也可以單獨(dú)設(shè)置自身的排列方式
- justify-content 定義如何沿著主軸方向排列子容器
| 值 | 說(shuō)明 |
|---|---|
| flex-start | 起始端對(duì)齊 |
| flex-end | 末尾短對(duì)齊 |
| center | 居中對(duì)齊 |
| space-around | 子容器沿著主軸均勻分布，位于首尾的容器到父容器距離是子容器間距的一半 |
| space-between | 子容器均勻分布缤至，首尾子容器與父容器相切 |
- align-items 設(shè)置子容器如何沿交叉軸排列
| 值 | 說(shuō)明 |
|---|---|
| flex-start | 起始端對(duì)齊 |
| flex-end | 末尾端對(duì)齊 |
| center | 居中對(duì)齊 |
| baseline | 基線對(duì)齊潮罪，這里的 baseline 默認(rèn)是指首行文字，所有子容器向基線對(duì)齊领斥，交叉軸起點(diǎn)到元素基線距離最大的子容器將會(huì)與交叉軸起始端相切以確定基線嫉到。 |
| stretch | 子容器沿交叉軸方向的尺寸拉伸至與父容器一致。 |
-
flex-wrap 設(shè)置換行方式
- nowrap：不換行
- wrap：換行
- wrap-reverse：逆序換行 逆序換行是指沿著交叉軸的反方向換行月洛。
更多高級(jí)用法何恶。。嚼黔。
子容器
子容器具有彈性（flex）它們會(huì)自動(dòng)填充剩余控件细层，子容器的伸縮比例由flex決定。
- 主軸上伸縮 flex
flex 的值可以是無(wú)單位數(shù)字（如：1, 2, 3）唬涧，也可以是有單位數(shù)字（如：15px疫赎，30px，60px）碎节，還可以是 none 關(guān)鍵字捧搞。子容器會(huì)按照 flex 定義的尺寸比例自動(dòng)伸縮，如果取值為none 則不伸縮狮荔。
雖然 flex 是多個(gè)屬性的縮寫胎撇，允許 1 - 3 個(gè)值連用，但通常用 1 個(gè)值就可以滿足需求
- 單獨(dú)設(shè)置子容器如何沿交叉軸排列：align-self
每個(gè)子容器也可以單獨(dú)定義沿交叉軸排列的方式殖氏，此屬性的可選值與父容器 align-items 屬性完全一致晚树，如果兩者同時(shí)設(shè)置則以子容器的 align-self 屬性為準(zhǔn)。
- flex-basis 表示在不伸縮的情況下子容器的原始尺寸雅采。主軸為橫向時(shí)代表寬度爵憎，主軸為縱向時(shí)代表高度慨亲。
- flex-grow 子容器彈性伸展的比例
- flex-shrink 子容器彈性收縮的比例
- order 設(shè)置排列順序 默認(rèn)值為 0，可以為負(fù)值纲堵，數(shù)值越小排列越靠前
軸
軸 包括 主軸 和 交叉軸巡雨，justify-content 屬性決定子容器沿主軸的排列方式，align-items 屬性決定子容器沿著交叉軸的排列方式席函。
flex-direction 屬性決定主軸的方向铐望，交叉軸的方向由主軸確定。
- flex-direction: row 向右
- flex-direction: column 向下
- flex-direction: row-reverse 向左
- flex-direction: column-reverse
網(wǎng)上找了一個(gè)圖茂附，總結(jié)的很清楚：
