flex布局


网页布局(layout)是 CSS 的一个重点应用。

 参考:https://www.ruanyifeng.com/blog/2015/07/flex-grammar.html

div标签是容器

>>CSS3 弹性盒子(Flex Box)

弹性盒子是 CSS3 的一种新的布局模式。

https://www.runoob.com/css3/css3-flexbox.html

弹性盒子由弹性容器(Flex container)和弹性子元素(Flex item)组成。

弹性容器通过设置 display 属性的值为 flex 或 inline-flex将其定义为弹性容器。

>>CSS网格布局

网格是一组相交的水平线和垂直线,它定义了网格的列和行。

CSS 提供了一个基于网格的布局系统,带有行和列,可以让我们更轻松地设计网页,而无需使用浮动和定位。

以下是一个简单的网页布局,使用了网格布局,包含六列和三行:

CSS布局方式有几种?