display:table;
常見的容器屬性
- display:table=>相當于“table”標簽；
常見的項目屬性
- display:table-row=>相當于“tr”標簽；
- display:table-cell=>相當于“td”標簽
display: table時padding會失效
display: table-row時margin往湿、padding同時失效
display: table-cell時margin會失效
display:flex;
常見的容器屬性
- flex-direction決定項目是水平排列還是垂直排列
- row 水平排列
- row-reverse 水平反向排列
- column 垂直排列
- column-reverse 垂直反向排列
- flex-wrap 決定項目如果一行排列不下以什么方式展示
- nowrap 不換行
- wrap 換行
- wrap-reverse; 寬度不足換行顯示纷跛，從下往上開始
- flex-flow
- flex-flow屬性是flex-direction和flex-wrap的縮寫喻括，表示flex布局的flow流動特性
- justify-content 項目在主軸上的對齊方式
- flex-start 開始位置
- flex-end 結(jié)束位置
- center 中間
- space-between 兩端對齊，項目之間的間隔都相等
- space-around 每個項目兩側(cè)的間隔相等贫奠。所以唬血，項目之間的間隔比項目與邊框的間隔大一倍
- align-items 項目在交叉軸（側(cè)軸）上的對齊方式
- flex-start 伸縮項目在側(cè)軸起點邊的外邊距 緊靠住 該行在側(cè)軸起始邊；
- flex-end 伸縮項目在側(cè)軸終點邊的外邊距 緊靠住 該行在側(cè)軸終點邊唤崭；
- center 伸縮項目的外邊距盒 在該行的側(cè)軸上居中放置拷恨；
- align-content (行與行之間的對齊方式) 定義多個伸縮行的對齊方式； 沒有換行就不存在多行的情況谢肾。
常見的項目屬性
- order 排序方式,數(shù)字越小就越在前面
- flex-grow 定義項目的放大比例腕侄，默認為0，即如果存在剩余空間芦疏，也不放大
- flex-shrink 定義了項目的縮小比例冕杠，默認為1
- flex-basis 屬性定義了在分配多余空間之前，項目占據(jù)的主軸空間
- flex 是flex-grow酸茴、flex-shrink和flex-basis三屬性的簡寫總和
- align-self 允許單個項目有與其他項目不一樣的對齊方式分预，可覆蓋align-items屬性
項目屬性中常用的flex:1表示平分
align-self表示單獨定義項目的布局方式
display:grid
常見的容器屬性
- display:grid定義一個容器屬性為網(wǎng)格布局
- grid-template-columns: 100px 100px 100px表示創(chuàng)建三列,每列的寬度是100px
- grid-template-columns: repeat(3, 1fr)表示創(chuàng)建三列,每列平均分配
- grid-template-columns: 150px 100px 50px 1fr;表示創(chuàng)建四列,最后一列占全部剩余的位置
- grid-template-rows: 50px 50px表示創(chuàng)建兩行,每行的高度是50px
- 行其他的也可以跟列一樣的
- grid-gap: 1px;表示每個項目之間的間隙
常見的項目屬性
- grid-column-start: 1;表示該項目所開始的位置(從最左邊開始)
- grid-column-end: 4;表示該項目所結(jié)束的位置
- 上面1和2的簡寫可以是grid-column: 1 / 4;
- grid-row-start: 2;類似上面的列的處理一樣的
- grid-row-end: 4;
