CSS之flex布局和Grid布局

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:         指定当前单元格放在某一区域

1. 配合grid-template-areas使用        grid-area：e
2. 配合grid-column-start等使用         grid-area:1/2/1/2

        grid-area: <row-start> / <column-start> / <row-end> / <column-end>;