CSS Flexbox 属性与属性值详解-JavaScript中文网-JavaScript教程资源分享门户

什么是 Flexbox？

Flexbox 是 CSS3 中新增的一种布局模式，可以让我们轻松地实现复杂的布局效果，尤其适用于响应式设计、移动端布局等场景。

Flexbox 布局是基于弹性盒子的概念，通过设置一些属性和属性值，实现灵活的布局方式。相比于传统的盒子模型，Flexbox 布局更具有适应性，可以轻松实现多列、多行，甚至多层嵌套的布局效果。

Flexbox 属性

接下来，我们来详细介绍一下 Flexbox 布局中的主要属性，以及它们的作用。

display

display 属性可以控制一个元素是否使用 Flexbox 布局。要使用 Flexbox 布局，只需要将 display 属性设置为 flex 即可。

.container {
  display: flex;
}

flex-direction

flex-direction 属性用来指定 Flexbox 的主轴方向，它决定了 Flexbox 元素排列的方向。默认值是 row，表示主轴横向排列，即从左到右。

.container {
  flex-direction: column;
}

justify-content

justify-content 属性用来指定 Flexbox 元素在主轴上的对齐方式，即控制 Flexbox 元素在主轴上的间距和对齐方式。

.container {
  justify-content: center;
}

align-items

align-items 属性用来指定 Flexbox 元素在侧轴上的对齐方式，即控制 Flexbox 元素在侧轴上的间距和对齐方式。

.container {
  align-items: center;
}

flex-wrap

flex-wrap 属性用来指定 Flexbox 元素是否换行。默认情况下，Flexbox 元素是不换行的，即 nowrap。

.container {
  flex-wrap: wrap;
}

align-content

align-content 属性用来指定多行 Flexbox 元素的对齐方式，即控制多行 Flexbox 元素在侧轴上的间距和对齐方式。

.container {
  align-content: center;
}

flex-grow

flex-grow 属性用来指定 Flexbox 元素的放大比例，即如果容器有多余的空间，Flexbox 元素的尺寸可以按照比例进行放大。

.item {
  flex-grow: 1;
}

flex-shrink

flex-shrink 属性用来指定 Flexbox 元素的缩小比例，即如果容器空间不足，Flexbox 元素的尺寸可以按照比例进行缩小。

.item {
  flex-shrink: 1;
}

flex-basis

flex-basis 属性用来指定 Flexbox 元素的初始尺寸。

.item {
  flex-basis: 100px;
}

应用示例

下面是一个基本的 Flexbox 布局示例：

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
</div>

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

----- -
  ----------- ------
  ---------- --
  ------------ --
  ----------------- --------
  ------- -----
  ----------- -------
-展开代码

这段代码实现了以下效果：

结语

Flexbox 布局是一种非常强大、灵活、易于使用的布局方式。如果你想要提高前端布局能力，那么一定要掌握好这一技能。希望本文对你有所帮助，祝你学习愉快！

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/6780c5b2ce7f4861254878b0

CSS Flexbox 属性与属性值详解