Flexbox 布局是一种用于在容器中排列元素的 CSS 技术。它可以使网站布局更灵活和响应式,管理元素的大小和位置。
Flex 容器和 Flex 元素
Flexbox 布局包含 2 个主要概念:Flex 容器和 Flex 元素。Flex 容器用于包含 Flex 元素,并设置了一些规则以控制元素的排列方式。Flex 元素是 Flex 容器中的子元素,在容器中排列。
要创建一个 Flex 容器,需要在容器的样式中设置 display: flex;
,如下所示:
.container { display: flex; }
容器中包含的子元素即为 Flex 元素,这些元素会根据容器的规则进行排列。设置 Flex 元素的样式时,需要使用 flex-*
属性来控制元素的大小和位置。
Flex 容器的主轴和交叉轴
Flexbox 布局中的排列是基于主轴和交叉轴的。主轴是 Flex 容器中的横向轴,交叉轴是相对于主轴的垂直轴。Flexbox 布局默认是沿着主轴排列元素。
在样式中设置主轴的方向和交叉轴的方向,可以使用 flex-direction
属性。默认情况下,flex-direction
的值为 row
,表示主轴是水平方向。可以将其设置为 column
,表示主轴是垂直方向。
.container { display: flex; flex-direction: column; }
Flex 元素的排列方式
Flexbox 布局可以控制 Flex 元素的排列方式,包括元素的位置、宽度和高度等。这些设置可以使用 justify-content
和 align-items
属性。
justify-content
用于设置 Flex 元素在主轴上的对齐方式,它有以下几个取值:
flex-start
:元素靠近主轴起点对齐flex-end
:元素靠近主轴终点对齐center
:元素在主轴上居中对齐space-between
:元素平均分布在主轴上,首尾元素分别靠近起点和终点space-around
:元素平均分布在主轴上,每个元素周围分布相等的空间
.container { display: flex; justify-content: center; }
align-items
用于设置 Flex 元素在交叉轴上的对齐方式,它有以下几个取值:
flex-start
:元素靠近交叉轴起点对齐flex-end
:元素靠近交叉轴终点对齐center
:元素在交叉轴上居中对齐stretch
:元素沿着交叉轴拉伸到容器的高度或宽度baseline
:元素在基线上对齐
.container { display: flex; align-items: center; }
Flex 元素的排序
Flexbox 布局中,可以使用 order
属性来定义 Flex 元素的顺序。数值越小的元素排在越前面。
-- -------------------- ---- ------- ----------------- - ------ -- - ------------------ - ------ -- - ---------------- - ------ -- -
总结
Flexbox 布局是一种强大的 CSS 技术,可以轻松灵活地排列网页中的元素。本文介绍了 Flex 容器和 Flex 元素的基本概念和风格设置,并提供了示例代码。掌握 Flexbox 布局可以使网站布局更加灵活和响应式。
来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/6467455e968c7c53b07a853f