display:grid;
一：常见的容器属性
- 1、
display:grid定义一个容器属性为网格布局 - 2、
grid-template-columns: 100px 100px 100px表示创建三列,每列的宽度是100px - 3、
grid-template-columns: repeat(3, 1fr)表示创建三列,每列平均分配 - 4、
grid-template-columns: 150px 100px 50px 1fr;表示创建四列,最后一列占全部剩余的位置 - 5、
grid-template-rows: 50px 50px表示创建两行,每行的高度是50px - 6、行其他的也可以跟列一样的
- 7、
grid-gap: 1px;表示每个项目之间的间隙
二：常见的项目属性
- 1、
grid-column-start: 1;表示该项目所开始的位置(从最左边开始) - 2、
grid-column-end: 4;表示该项目所结束的位置 - 3、上面1和2的简写可以是
grid-column: 1 / 4; - 4、
grid-row-start: 2;类似上面的列的处理一样的 - 5、
grid-row-end: 4;
display:flex;
一：常见的容器属性
- 1、flex-direction 决定项目是水平排列还是垂直排列
- row 水平排列
- row-reverse 水平反向排列
- column 垂直排列
- column-reverse 垂直反向排列
- 2、flex-wrap 决定项目如果一行排列不下以什么方式展示
- nowrap 不换行
- wrap 换行
- wrap-reverse; 换行排列在上面
- 3、flex-flow 是flex-direction属性和flex-wrap属性的简写形式可以不去理会
- 4、justify-content 项目在主轴上的对齐方式
- flex-start 开始位置
- flex-end 结束位置
- center 中间
- space-between 两端对齐，项目之间的间隔都相等
- space-around 每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍
- 5、align-items 项目在交叉轴（侧轴）上的对齐方式
- flex-start 伸缩项目在侧轴起点边的外边距 紧靠住 该行在侧轴起始边；
- flex-end 伸缩项目在侧轴终点边的外边距 紧靠住 该行在侧轴终点边；
- center 伸缩项目的外边距盒 在该行的侧轴上居中放置；
- baseline 伸缩项目根据伸缩项目的基线对齐；
- stretch 伸缩项目拉伸填充整个伸缩容器。
- 6、align-content (行与行之间的对齐方式) 定义多个伸缩行的对齐方式； 没有换行就不存在多行的情况。
二：常见的项目属性
- 1、order 排序方式,数字越小就越在前面
- 2、flex-grow 定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大
- 3、flex-shrink 定义了项目的缩小比例，默认为1
- 4、flex-basis 属性定义了在分配多余空间之前，项目占据的主轴空间
- 5、flex 是flex-grow、flex-shrink和flex-basis三属性的简写总和
- 6、align-self 允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性
项目属性中常用的flex:1表示平分 align-self表示单独定义项目的布局方式
来源：CSDN
作者：luck_lin
链接：https://blog.csdn.net/qwe502763576/article/details/78936272