图解 CSS Flexbox 属性
在页面布局中，难免会遇到各种排版问题，如何解决这些问题呢？今天我们来介绍 CSS 中一个非常实用的属性，Flexbox（Flex 布局）。
Flexbox 是什么？
Flexbox 是一种强大的布局方式，能够让我们轻松地实现各种复杂的布局效果。Flexbox 布局相比传统的布局方式，具有更强的自适应性和响应式能力，不仅能够使页面布局更加灵活，还可以非常精确地控制布局元素之间的间距、对齐方式等。
Flexbox 布局是一种基于容器和项目来工作的。当我们使用 Flexbox 布局时，我们需要定义一个容器元素，即父元素，然后将需要排列的子元素称为项目，这些项目将会被包裹在容器中，从而按照我们所定义的规则进行排列。
Flexbox 容器属性
要使用 Flexbox 布局，我们需要定义一个容器元素。以下是几个常用的容器属性：
display
使用 Flexbox 布局时，我们需要将容器元素的 display 属性设为 flex，以指定该元素要实现 Flexbox 布局。
.container {
display: flex;
}flex-direction
flex-direction 属性定义 Flexbox 容器中项目的排列方向。默认值为 row（水平方向），还可以设置为 row-reverse，column（垂直方向）以及 column-reverse。
.container {
flex-direction: row;
}justify-content
justify-content 属性定义 Flexbox 容器中项目在主轴（默认是水平方向）方向上的排列方式，有以下属性值：
- flex-start：项目靠容器的起点对齐
- flex-end：项目靠容器的终点对齐
- center：项目居中对齐
- space-between：项目平均分布在轴线上
- space-around：项目平均分布在轴线上，两端留有间距
.container {
justify-content: center;
}align-items
align-items 属性定义 Flexbox 容器中项目在交叉轴（默认是垂直方向）方向上的排列方式，有以下属性值：
- flex-start：项目靠容器的起点对齐
- flex-end：项目靠容器的终点对齐
- center：项目居中对齐
- baseline：项目基线对齐
- stretch：项目被拉伸占满整个容器
.container {
align-items: center;
}Flexbox 项目属性
现在我们已经定义了一个 Flexbox 容器，下一步就是在容器内定义项目，以控制项目在容器中的排列方式。以下是几个常用的项目属性：
order
order 属性定义项目的排列顺序，值越小越靠前，默认值为 0。
.item {
order: 1;
}flex-grow
flex-grow 属性定义项目的放大比例，定义为一个非负数，默认值为 0。如果所有项目的 flex-grow 值都为 1，则它们平分剩余空间。如果一个项目的 flex-grow 值为 2，其他项目都为 1，则前者所占空间将比其他项目多一倍。
.item {
flex-grow: 1;
}flex-shrink
flex-shrink 属性定义项目的缩小比例，定义为一个非负数，默认值为 1。如果空间不足，项目将按照 flex-shrink 的比例缩小，例如一个项目的 flex-shrink 值为 2，另一个项目的 flex-shrink 值为 1，则前者将缩小两倍。
.item {
flex-shrink: 1;
}flex-basis
flex-basis 属性定义了项目在分配多余空间之前所占据的主轴空间。默认值为 auto，即由项目本身的大小决定。
.item {
flex-basis: 100px;
}flex
flex 属性是 flex-grow、flex-shrink 和 flex-basis 的缩写，其中，flex-basis 的值可以省略，其默认值为 auto。
.item {
flex: 1 1 auto;
}align-self
align-self 属性定义单个项目在交叉轴（默认是垂直方向）方向上的排列方式。该属性的值覆盖父容器的 align-items 值。除了 auto 以外，它的取值与 align-items 相同。
.item {
align-self: center;
}示例代码
HTML 代码：
<div class="container"> <div class="item item1">1</div> <div class="item item2">2</div> <div class="item item3">3</div> </div>
CSS 代码：
-- -------------------- ---- ------- ---------- - -------- ----- ---------------- -------------- ------------ ------- ------- ------ ----------------- -------- -------- - ----- - ----- - ------ ----- ------- ----- ----------------- -------- ------ ----- ----------- ------- ------------ ----- ---------- ----- - ------ - ---------- -- - ------ - ---------- -- ------- - ----- - ------ - ---------- -- -
上述代码实现了一个简单的 Flexbox 布局，容器元素通过 justify-content 和 align-items 属性分别对排列和对齐进行了配置，而项目元素使用了 flex-grow 属性来对空间进行调配，达到了左右对齐、自适应大小的效果。
总结
本文介绍了 CSS 中灵活使用的 Flexbox 属性及其相关概念，相信使用 Flexbox 布局能够让我们更加方便、快捷地控制页面的排版效果。初学者可以通过反复练习和尝试掌握这些属性的使用方法，而在丰富的实际项目中，这些技能也必将助力于更好地完成页面的优化和设计。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64aa74cb48841e9894698d6a