什么是 flex 布局?
时间: 2024-03-16 15:40:28 浏览: 75
Flex布局是一种用于网页布局的CSS3模,它提供了一种灵活的方式来排列、对齐和分配元素的空间。Flex布局通过定义容器和其内部元素的属性来实现布局。
在Flex布局中,有两个主要的概念:容器和项目。容器是指应用Flex布局的父元素,而项目则是容器内部的子元素。
Flex布局的特点包括:
1. 弹性容器:通过设置容器的display属性为flex或inline-flex来创建一个弹性容器。
2. 主轴和交叉轴:容器有一个主轴和一个交叉轴,主轴是项目排列的方向,交叉轴是与主轴垂直的方向。
3. 弹性项目:项目可以根据需要伸缩,以填充可用空间或缩小以适应容器。
4. 对齐方式:可以通过设置容器的justify-content属性来定义项目在主轴上的对齐方式,通过设置align-items属性来定义项目在交叉轴上的对齐方式。
5. 排序:可以通过设置项目的order属性来改变项目的排列顺序。
阅读全文