本篇主要回顾复习一下CSS中常见的布局方式:弹性盒子、网格、多栅栏(flex box、grid、Multiple-column)总结其共通点及实现方式
flexbox
- 2019: display: box
- 2011: display: flexbox
- 2016: display: flex
根据flex-direction: row | column来确定主轴(main axis)方向那么另外一个就是交叉轴(cross axis)
Flex Container(display: flex)属性: flex-direction | flex-wrap | flex-flow | justify-content | align-items | align-content
Flex Items属性: order | flex-grow | flex-shrink | flex-basis | flex(grow shrink basis) | align-self
通常搭配media query断点来适配不同尺寸并展现不同样式
grid
网格布局可以向网格轨道的行(row)或者列(column)扩展一个或多个单位，从而创建出一个网络区域
网格分为隐式和显示网格,使用grid-template-columns定义列轨道的同时会隐式创建(grid-auto-rows)所需的行
网格线是通过网络轨道交错形成的即是grid-column-start或grid-column-end起始结尾设置的点
网格单元是通过设置起始终点之后形成的块，网格间距通过grid-column-gap和grid-row-gap设置行与列之间的间距
网格区域是由一个或者多个网格单元组成的一个矩形区域，可以使用base line或者grid area方式创建
Grid Container(display: grid)属性: grid | grid-template-rows | grid-template-columns | grid-template-area | grid-auto-rows | gap
Grid Item属性: grid-column-start | grid-column-end | grid-row-start | grid-row-end | grid-area
Grid定位方式: 网格轨道、命名区域、网格命名
Grid中有两个轴线用于对齐(Block axis和Inline/Row axis)可以使用flexbox中的盒对齐属性align-self、align-items、justify-self、justify-items、align-content、justify-content
multiple-column
多列布局解决常见了左中右三列布局,通过设置column-count来制定列数并创建具有弹性的宽度(column-width)任何剩余的空间都将被现有的列平分
Column Container属性: column-count | column-width | column-gap | column-rule Column Item属性: 通常搭配 CSS Fragmentation 属性使用break-inside | page-break-inside