Css布局之Flex布局和Grid布局

目录

• 概述
• 弹性盒子布局流
• 网格布局流
• Grid和Flex布局的使用策略

正文

1.概述

这里主要给大家总结一下推荐使用的两种布局流：弹性盒子布局流和网格布局流

2.弹性盒子布局流

Flexible Box Layout 是为了提供更加灵活高效的布局方式，即便是在宽高未知的情况下，也能排列和分割一个盒子内部的布局，而且在不同布局方向（横向/纵向）的调整更为灵活。

弹性盒子的相关元素：

作用于父元素： 建立一个弹性盒子 display:flex

规定盒子的主轴方向 flex-direction:row/column;

子元素折行显示形式 felx-wrap：wrap;

主轴方向子元素的排列方式 justify-content: center；

交叉轴方向子元素的对齐方式 align-items:flex-start

交叉轴方向多行子元素的布局方式 align-content: flex-start

以明确值设定子元素的问题 gap:

作用在子元素：

css

复制代码

规定item未放缩之前的默认大小 flex-basis: auto; 规定有剩余空间时，对item的分配比例 felx-grow: number; 规定空间不够时，对item的压缩的比例 flex-shrink:number; 以上三项的缩写 flex:grow shrink basis;默认 0 1 auto 规定item从左到右显示的顺序 order:number;默认是0 规定单个item在交叉轴上的位置 align-self:auto;

示例；

3.网格布局流

2017年推出的Grid布局可以由行和列组成二维布局，然后将元素放置到网格中，元素可以只占其中一个单元格，也可以占据多行或多列。

• 用于父元素：

css

复制代码

display:grid;

css

复制代码

用来生成显式的列，行 grid-template-colums/rows：数值/百分比等 规定区域的分布 grid-tempate-area:"header header" "sidebar content" "footer footer" 规定默认的排序方向 grid-auto-flow:row;

• 用于子元素：

复制代码

规定占用的列，行

sql

复制代码

grid-colum/row:<start-line>/<end-line>; 是grid-colum/row-start和grid-colum/row-end的 缩写形式 规定占用的area grid-area:header;

示例：

4.Grid和Flex布局的使用策略

• Flex布局：1.一维布局；2.基于内容 ；3.浏览器兼容性更好
• Grid布局：1.二维布局 ；2.基于布局 ；3.17年后的浏览器的版本普遍支持

总结：

1. 面积或者整体布局，推荐使用Grid布局
2. 小面积或者组件，或Grid item中可以使用Flex做灵活布局

作者：方圜
链接：https://juejin.cn/post/7272276908380323851
来源：稀土掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。