Flexbox 布局基础

阅读时长 3 分钟读完

Flexbox 布局是一种用于在容器中排列元素的 CSS 技术。它可以使网站布局更灵活和响应式,管理元素的大小和位置。

Flex 容器和 Flex 元素

Flexbox 布局包含 2 个主要概念:Flex 容器和 Flex 元素。Flex 容器用于包含 Flex 元素,并设置了一些规则以控制元素的排列方式。Flex 元素是 Flex 容器中的子元素,在容器中排列。

要创建一个 Flex 容器,需要在容器的样式中设置 display: flex;,如下所示:

容器中包含的子元素即为 Flex 元素,这些元素会根据容器的规则进行排列。设置 Flex 元素的样式时,需要使用 flex-* 属性来控制元素的大小和位置。

Flex 容器的主轴和交叉轴

Flexbox 布局中的排列是基于主轴和交叉轴的。主轴是 Flex 容器中的横向轴,交叉轴是相对于主轴的垂直轴。Flexbox 布局默认是沿着主轴排列元素。

在样式中设置主轴的方向和交叉轴的方向,可以使用 flex-direction 属性。默认情况下,flex-direction 的值为 row,表示主轴是水平方向。可以将其设置为 column,表示主轴是垂直方向。

Flex 元素的排列方式

Flexbox 布局可以控制 Flex 元素的排列方式,包括元素的位置、宽度和高度等。这些设置可以使用 justify-contentalign-items 属性。

justify-content 用于设置 Flex 元素在主轴上的对齐方式,它有以下几个取值:

  • flex-start:元素靠近主轴起点对齐
  • flex-end:元素靠近主轴终点对齐
  • center:元素在主轴上居中对齐
  • space-between:元素平均分布在主轴上,首尾元素分别靠近起点和终点
  • space-around:元素平均分布在主轴上,每个元素周围分布相等的空间

align-items 用于设置 Flex 元素在交叉轴上的对齐方式,它有以下几个取值:

  • flex-start:元素靠近交叉轴起点对齐
  • flex-end:元素靠近交叉轴终点对齐
  • center:元素在交叉轴上居中对齐
  • stretch:元素沿着交叉轴拉伸到容器的高度或宽度
  • baseline:元素在基线上对齐

Flex 元素的排序

Flexbox 布局中,可以使用 order 属性来定义 Flex 元素的顺序。数值越小的元素排在越前面。

-- -------------------- ---- -------
----------------- -
  ------ --
-
------------------ -
  ------ --
-
---------------- -
  ------ --
-

总结

Flexbox 布局是一种强大的 CSS 技术,可以轻松灵活地排列网页中的元素。本文介绍了 Flex 容器和 Flex 元素的基本概念和风格设置,并提供了示例代码。掌握 Flexbox 布局可以使网站布局更加灵活和响应式。

来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/6467455e968c7c53b07a853f

纠错
反馈