flex布局
- display:flex | inline-flex 设定flex布局
- flex-direction: row | row-reverse | column | column -reverse 设定主轴方向
- justify-content: flex-start | center | flex-end 设定主轴对齐方式
- align-content: flex-start | center | flex-end 设定副轴对齐方式(多轴)
- align-items: flex-start | center | flex-end 设定副轴对齐方式(单轴)
- flex-wrap: wrap | nowrap 是否换行
- flex-flow: row-reverse wrap flex-direction和flex-wrap的缩写
- flex-grow: 0 放大(剩余空间)默认值0
- flex-shrink: 1 缩小(空间不足)默认值1
- flex-basis: 200px 最低分配空间
- flex: auto| 1 前三项的缩写
- align-self: center 单独设置副轴某一项的对齐方式,覆盖align-items
- order:0 排列顺序,从小到大,默认值0
Grid布局
- display: grid | inline-grid 设定grid布局
- grid-template-columns: 300px | 33.3% | repeat(3, 300px) | repeat(auto-fill ,100px | 100px 1fr 2fr | 1fr 1fr minmax(100px,1fr) | 100px auto 100px) 列宽
- grid-template-rows: 300px | 33.3% | repeat(3, 300px) | repeat(auto-fill ,100px | 100px 1fr 2fr | 1fr 1fr minmax(100px,1fr) | 100px auto 100px) 行高
- grid-row-gap: 20px 行间距
- grid-column-gap: 20px 列间距
- grid-gap: 20px 10px 上面两个的缩写
- grid-template-areas: ‘a b c’
‘d e f’
注:不需要利用的区域用“.”(点)表示
- grid-auto-flow: row | column | row dense 单元格排列顺序;当填充不下需要换行时,row dense可以解决换行留空的问题。
- justify-items:center 单元格内容的水平位置
- align-items: center 单元格内容的垂直位置
- place-items: center center 上述两个属性的简写
- justify-content:center 单元格内容的水平位置
- align- content: center 单元格内容的垂直位置
- place- content: center center 上述两个属性的简写
- justify-self:center 单独设置单元格内容的水平位置
- align- self: center 单独设置单元格内容的垂直位置
- place- self: center center 上述两个属性的简写
- grid-auto-columns: 自动创建多余网格的列宽
- grid-auto-rows: 自动创建多余网格的行高
- 网格属性:作用在每个item上
grid-column-start: 1 网格左边框占的第index条网格线
grid-column-end: 1 网格右边框占的第index条网格线
grid-row-start: 1 网格上边框占的第index条网格线
grid-row-start: 1 网格下边框占的第index条网格线
缩写:grid-column: 1/3 | 1/span2
- grid-area: 指定当前单元格放在某一区域
- 配合grid-template-areas使用 grid-area:e
- 配合grid-column-start等使用 grid-area:1/2/1/2
grid-area: <row-start> / <column-start> / <row-end> / <column-end>;