主軸:x軸方向,水平向右(行)
側(cè)軸:y軸方向,水平向下(列)
flex-shrink:0? 固定大小
1.父項(xiàng)
設(shè)置flex
display:flex;
主軸的方向
flex-direction:
? row(左到右)
? row-reverse(右到左)
? column(上到下)
? column-reverse(下到上)
主軸的子項(xiàng)的對(duì)齊方式
justify-content:
? flex-start 左對(duì)齊
? flex-end 右對(duì)齊
? center 居中
? space-between先兩邊,在平分
? space-around 空白環(huán)繞
換行
felx-wrap
? wrap(換行)
? nowrap(默認(rèn),不換行)
側(cè)軸的子項(xiàng)的對(duì)齊方式(多行)
align-content
? flex-start(上)
? flex-end(下)
? center(中)
? space-around(空白環(huán)繞)
space-between先兩邊,在平分
側(cè)軸的子項(xiàng)的對(duì)齊方式(單行)
align-items
? flex-start(上)
? flex-end(下)
? center(中)
2.子項(xiàng)
寬默認(rèn)內(nèi)容決定,高默認(rèn)父盒子的高
默認(rèn)父項(xiàng)設(shè)置拉伸align-item:stertch/flex-start;
設(shè)置子項(xiàng)占父項(xiàng)的寬度的份數(shù)
flex:1;
子項(xiàng)自己在側(cè)軸的對(duì)齊的方式
align-self:
? flex-start(上)
? flex-end(下)
? center(中)
設(shè)置子項(xiàng)排列順序
order:數(shù)字;
3.實(shí)現(xiàn)瀑布流布局
1.在父項(xiàng)
? column-count: 2; 表示有兩列
2.在子項(xiàng)
? break-inside: avoid; 表示不分割
其他
1.父項(xiàng)變成伸縮盒子之后 不會(huì)對(duì)布局有影響
2.子項(xiàng)可以設(shè)置寬高
3.子項(xiàng)加浮動(dòng)沒(méi)有效果
4.子項(xiàng)加定位是有效果的
5.主軸的方向
? ? ? 水平? ? 高度默認(rèn)和父元素一樣高,寬由內(nèi)容來(lái)?yè)伍_(kāi)(控制寬度,寬度可變)
? ? ? 垂直? 寬度默認(rèn)和父元素一樣寬,高度由內(nèi)容來(lái)?yè)伍_(kāi)(控制高度,高度可變)
