在前端开发中，我们时常需要进行不同设备下的页面布局。而 CSS Flexbox 可以帮助我们实现自适应的布局，特别是实现两栏布局时非常方便。本文将详细讲述 Flexbox 的相关属性及其使用，为读者提供深入了解 Flexbox 的学习指导。
Flexbox 是什么？
Flexbox 是 CSS 的一种布局模式，它可以使容器内的元素按照一定规则排列，并且可以根据容器大小调整子元素的尺寸和位置。使用 Flexbox 可以实现复杂的布局设计，比如实现多列等分布局、实现导航栏的水平和垂直居中等。
Flexbox 布局的实现方式
Flexbox 的实现需要使用容器和子元素两个概念。
容器：用 display: flex; 或 display: inline-flex; 来定义一个 Flexbox 容器。
子元素：直接作为容器的 child 元素，成为容器内的项。Flexbox 容器内的子元素都是 Flexbox 元素。
将一个元素设置为 Flexbox 容器非常简单，只需要在它的 CSS 样式中添加 display: flex; 或 display: inline-flex; 即可。另外，Flexbox 容器内的子元素默认的 display 值为 block。
实现自适应的两栏布局
接下来，我们就通过一个实例来介绍如何使用 Flexbox 实现自适应的两栏布局。两栏布局的实现方式有很多种，这里我们采用 Flexbox 布局来完成。具体实现代码如下：
<div class="wrapper"> <div class="left">左侧栏目</div> <div class="right">右侧栏目</div> </div>
// javascriptcn.com 代码示例
.wrapper {
display: flex;
}
.left {
flex: 1;
background-color: #ccc;
padding: 10px;
}
.right {
width: 200px;
background-color: #eee;
padding: 10px;
}上面的代码中，我们通过将 wrapper 设置为 Flexbox 容器来实现两栏布局。同时，我们将左侧栏目设为 flex: 1;，表示自适应宽度，右侧栏目指定宽度为 200px，灰色区域为左侧栏目，浅灰色区域为右侧栏目。这个布局在不同屏幕下都可以良好地自适应。
Flexbox 常用属性和用法
下面我们介绍一些常用的 Flexbox 属性及其用法。
flex-direction
定义 Flexbox 容器内子元素排列的方向，可以有水平和垂直两种方向。
flex-direction: row | row-reverse | column | column-reverse;
其中：
- row：子元素将水平排列，第一项在左边；
- row-reverse：子元素将反向水平排列，第一项在右边；
- column：子元素将垂直排列，第一项在上面；
- column-reverse：子元素将反向垂直排列，第一项在下面。
默认值是 row。
justify-content
定义子元素在主轴上的对齐方式。
justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly;
其中：
- flex-start：子元素靠主轴的起始位置排列；
- flex-end：子元素靠主轴的末尾位置排列；
- center：子元素在主轴上居中排列；
- space-between：子元素均匀地分布在主轴上，第一项在起始位置，最后一项在末尾位置；
- space-around：子元素均匀地分布在主轴上，两侧间隔相等；
- space-evenly：子元素均匀地分布在主轴上，包括两侧间隔和子元素间隔。
默认值是 flex-start。
align-items
定义子元素在侧轴（与主轴垂直的轴线）上的对齐方式。
align-items: flex-start | flex-end | center | baseline | stretch;
其中：
- flex-start：子元素靠侧轴的起始位置排列；
- flex-end：子元素靠侧轴的末尾位置排列；
- center：子元素在侧轴上居中排列；
- baseline：子元素在侧轴上以基线对齐排列；
- stretch：子元素在侧轴上占满整个容器高度。
默认值是 stretch。
flex-wrap
指定子元素是否换行。
flex-wrap: nowrap | wrap | wrap-reverse;
其中：
- nowrap：子元素不换行，通常它们会从一行溢出到下一行；
- wrap：子元素在必要时换行（向下），余下的子元素都移到新行；
- wrap-reverse：子元素在必要时换行（向上），余下的子元素都移到新行。
默认值是 nowrap。
flex-flow
是 flex-direction 和 flex-wrap 的简写方式，分别用空格隔开。
flex-flow: <flex-direction> <flex-wrap>;
align-content
定义子元素在多个轴线上的最终位置（如果子元素只有一行，则不起作用）。
align-content: flex-start | flex-end | center | space-between | space-around | stretch;
其中：
- flex-start：多行子元素在侧轴的起始位置排列；
- flex-end：多行子元素在侧轴的末尾位置排列；
- center：多行子元素在侧轴上居中排列；
- space-between：多行子元素在侧轴上均匀分布，两边的子元素与容器的起始位置和末尾位置之间没有空隙；
- space-around：多行子元素在侧轴上均匀分布，两边的子元素与容器的起始位置和末尾位置之间留有空隙；
- stretch：在侧轴上将所有子元素拉伸，以适应整个容器高度。
默认值是 stretch。
order
指定子元素在容器内的顺序。默认值是 0，可以为正数或负数。
order: <integer>;
flex-grow
指定子元素的放大比例，以填充容器。默认值为 0，即不放大。
flex-grow: <number>;
flex-shrink
指定子元素的缩小比例，以适应容器。默认值为 1。
flex-shrink: <number>;
flex-basis
定义子元素占据的主轴空间，默认值为 auto。
flex-basis: <length> | auto;
flex
flex 属性是 flex-grow, flex-shrink 和 flex-basis 的简写方式。
flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
其中，如果省略后两个属性，则此写法简写为 none。
总结
本文介绍了 Flexbox 常用的属性及用法，并以实例的形式展示了如何使用 Flexbox 实现自适应的两栏布局。Flexbox 作为一种布局模式，比传统的布局方式更为简单，同时也更加灵活。初学者可以从实际场景出发，逐步掌握和使用 Flexbox 布局，提高自己的页面开发能力。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6528be367d4982a6ebb4c3fb