标题: css3的flex布局 [打印本页]

---

作者: xiexie    时间: 2020-9-10 11:52     标题: css3的flex布局

Flex布局的容器是一个伸缩容器，首先容器本身会更具容器中的元素动态设置自身大小；然后当Flex容器被应用一个大小时（width和height），将会自动调整容器中的元素适应新大小。Flex容器也可以设置伸缩比例和固定宽度，还可以设置容器中元素的排列方向（横向和纵向）和是否支持元素的自动换行。有了这个神器，做页面布局的可以方便很多了。注意，设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。

一：容器样式说明

给容器设置一个样式,开启容器的flex布局，此时container容器中的元素都会遵循伸缩容器的标准进行显示，不用设置更多了：

.container{

display:flex;

display:-webkit-flex;

}

排列方向和换行：

flex-direction:column;/*从上到下排列，并且子元素的高度会自动伸缩铺满整个容器的高度*/

flex-direction:column-reverse;/*从下往上排列，并且子元素的高度会自动伸缩铺满整个容器的高度*/

flex-direction:row;/*从左到右排列，并且子元素的宽度会自动伸缩铺满整个容器的宽度*/

flex-direction:row-reverse;/*从右到左排列，并且子元素的宽度会自动伸缩铺满整个容器的宽度*/

flex-wrap:wrap;/*支持换行，当元素的总宽度超过了容器的宽度，会换行显示*/<br>/*这两个样式可以写在一起*/<br>flex-flow:column wrap;/*纵向排列，并且支持换行*/

对齐方式：

justify-content: flex-start | flex-end | center | space-between | space-around;/*左右的对齐方式*/

• flex-start（默认值）：左对齐
• flex-end：右对齐
• center： 居中
• space-between：两端对齐，项目之间的间隔都相等。
• space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。

[ 本帖最后由 xiexie 于 2020-9-10 11:54 编辑 ]

---

欢迎光临 PHP开发笔记 (http://phpvi.com/)

Powered by Discuz! 6.1.0