前言
前端界的小众技能 CSS Flexbox，又称弹性布局或伸缩布局，是一种用于页面布局的 CSS3 新特性。它可以在不同尺寸的屏幕上，实现不同的自适应布局，因此，它也是响应式布局的利器。
本文将通过示例代码，详细讲解如何使用 CSS Flexbox 实现两列自适应布局。
什么是 CSS Flexbox？
CSS Flexbox 是一种用于页面布局的 CSS3 新特性，它可以为容器中的子元素提供更加灵活的定位方式。
使用 Flexbox 布局，我们可以轻松地实现如下布局需求：
- 水平居中，垂直居中
- 自适应两列布局
- 定义了高度的容器中实现滚动条
- 等等...
如何使用 CSS Flexbox？
首先，将容器的display属性设置为flex：
.container {
display: flex;
}当容器设置 display: flex; 后，容器中的每个子元素都将变成一个 Flexbox 元素，并且可以通过justify-content和align-items属性对子元素进行对齐。
Flexbox 常用的 CSS 属性
flex-direction
该属性用于设置 flex 容器的主轴方向，默认值为row。主轴方向一般是水平方向，交叉轴方向一般是垂直方向。
.container {
flex-direction: row;
}justify-content
它指定了 flex 容器中子元素在主轴方向上的对齐方式。
.container {
justify-content: center; /* 子元素在主轴方向上居中对齐 */
}align-items
它指定了 flex 容器中子元素在交叉轴方向上的对齐方式。
.container {
align-items: center; /* 子元素在交叉轴方向上居中对齐 */
}flex
它是一个复合属性，包含了flex-grow、flex-shrink和flex-basis三个属性。
.item {
flex: 1 0 auto; /* 相当于 flex-grow: 1; flex-shrink: 0; flex-basis: auto; */
}flex-grow属性：指定了 Flexbox 元素的放大比例。当父元素的宽度大于所有子元素的宽度之和时，flex-grow属性将按照比例分配剩余空间。flex-shrink属性：指定了 Flexbox 元素的缩小比例。当父元素的宽度小于所有子元素的宽度之和时，flex-shrink属性将按照比例分配子元素缩小的宽度。flex-basis属性：指定了 Flexbox 元素的初始宽度，相对于父元素的宽度。
flex-wrap
该属性指定了 Flexbox 子元素是否换行，以及如何换行。
.container {
flex-wrap: wrap; /* 子元素在父容器中自动换行 */
}align-content
它定义了 Flexbox 元素在交叉轴方向上的对齐方式。
.container {
align-content: center; /* Flexbox 元素在交叉轴方向上居中对齐 */
}示例代码
下面的示例代码展示了如何使用 CSS Flexbox 实现两列布局：
HTML：
<div class="container"> <div class="left">Left Content</div> <div class="right">Right Content</div> </div>
CSS：
.container {
display: flex;
justify-content: center;
align-items: center;
}
.left,
.right {
flex: 1;
padding: 10px;
}
.left {
background-color: pink;
}
.right {
background-color: lightgreen;
}在这个例子中，我们设置了容器的display属性为flex，并将内部的左右两列都设置为flex: 1;，这相当于设置了它们的宽度为父容器的一半。最后，通过justify-content: center、align-items: center属性把它们居中对齐。
总结
CSS Flexbox 是一种非常实用的 CSS 布局技能，它能够实现响应式布局，并为网页开发者提供了更加灵活的定位方式。希望这篇文章能够帮助你了解如何使用 CSS Flexbox 实现两列自适应布局，以及更深入了解 CSS Flexbox 的其他用法。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6595f53feb4cecbf2d9e1b19