前言
前端开发中，布局一直是桎梏我们的一个问题。以前，要用大量的 float、position、clear 等属性来达到设计师的想法，可想而知，这样的写法非常冗长，而且还容易有兼容性问题。CSS Flexbox 利用新的布局模式，让我们可以更方便地处理布局问题，减少代码冗余。本文将探讨如何使用 CSS Flexbox 实用技巧，快速搞定布局问题。
基本概念
在开始介绍实用技巧前，我们先来了解一些基本概念。
- 弹性容器：通过设置容器的
display:flex，将其转换为一个弹性容器。 - 弹性子元素：在弹性容器中，直接包裹的元素就是弹性子元素。
- 主轴：弹性容器的主轴就是弹性子元素从主轴开始排列的方向。默认为水平方向（
row）。 - 交叉轴：弹性容器的交叉轴则是垂直主轴的方向。
容器属性
现在，我们来看一下一些弹性容器的属性：
display
通过设置容器的 display:flex 或 display:inline-flex，将其转换为一个弹性容器。display:flex 将容器转为块级元素，而 display:inline-flex 转换为行内元素。
.container {
display: flex;
}flex-direction
该属性用于设置弹性容器的主轴方向，主要有以下四个属性值：
row：默认值，按从左到右的顺序排列。row-reverse：按从右到左的顺序排列。column：按从上到下的顺序排列。column-reverse：按从下到上的顺序排列。
.container {
flex-direction: column;
}justify-content
该属性用于设置弹性子元素在主轴方向上的对齐方式，一共有以下五个属性值：
flex-start：默认值，在主轴起点上对齐。flex-end：在主轴终点上对齐。center：在主轴居中对齐。space-between：两端对齐，而且中间的子元素之间间隔相等。space-around：每个子元素周围都有一定的间距，且中间的子元素之间间隔相等。
.container {
justify-content: center;
}align-items
该属性用于设置弹性子元素在交叉轴方向上的对齐方式，一共有以下五个属性值：
stretch：默认值，子元素会被拉伸以适应容器的高度。flex-start：在交叉轴起点上对齐。flex-end：在交叉轴终点上对齐。center：在交叉轴居中对齐。baseline：在基线上对齐。
.container {
align-items: center;
}flex-wrap
该属性用于设置当空间不足时，弹性子元素是否可以换行，一共有以下三个属性值：
nowrap（默认值）：不换行。wrap：当空间不足时换行。wrap-reverse：与wrap相同，但是换行时是倒序排列的。
.container {
flex-wrap: wrap;
}align-content
该属性用于设置多个弹性子元素在交叉轴上的对齐方式。只有当 flex-wrap 属性为 wrap 时才会起作用，一共有以下六个属性值：
stretch：默认值，子元素会被拉伸以适应容器的高度。flex-start：在交叉轴起点上对齐。flex-end：在交叉轴终点上对齐。center：在交叉轴居中对齐。space-between：在容器的两端对齐，而且子元素之间间隔相等。space-around：在容器中平均分布。
.container {
align-content: center;
}元素属性
除了弹性容器的属性之外，我们还可以通过元素的属性来调整布局。现在，我们来看一下一些弹性子元素的属性：
flex-grow
该属性用于设置弹性子元素的伸展程度，常用于在剩余空间不足时拉伸元素。属性值为数字，代表伸展的比例。
.item {
flex-grow: 1;
}flex-shrink
该属性用于设置弹性子元素的收缩程度，可以用于防止溢出或在空间不足时压缩元素。属性值为数字，代表收缩的比例。
.item {
flex-shrink: 1;
}flex-basis
该属性用于设置弹性子元素的基础大小，默认为 auto，可以设置为固定值或百分比。可以理解为在剩余空间被分配之前，元素所占据的空间大小。
.item {
flex-basis: 50%;
}flex
该属性是 flex-grow、flex-shrink 和 flex-basis 三个属性的缩写形式，常常用于快速设置弹性子元素的伸缩特性。默认值为 0 1 auto，我们可以通过缩写形式来快速设置伸缩比例和基础大小。
.item {
flex: 1 0 50%;
}order
该属性用于设置弹性子元素的出现顺序。默认值为 0，可以设置为任意整数。越小的数字排在越前面。
.item {
order: 1;
}实用技巧
现在，我们来探讨一些实用技巧，针对一些常见的布局问题。这些技巧可以让你快速搞定布局问题。
水平和垂直居中
在过去，水平和垂直居中通常需要使用 absolute 和 margin 来完成，而且比较繁琐。现在，我们只需要通过 CSS Flexbox 就可以轻松实现。
<div class="container"> <div class="item">I am centered</div> </div>
-- -------------------- ---- ------- ---------- - -------- ----- ---------------- ------- ------------ ------- ------- ------ - ----- - ----------- -------- -------- ----- -
自适应两栏布局
当我们需要一栏撑满左侧，一栏占据右侧的时候，CSS Flexbox 可以轻松实现。
<div class="container"> <div class="left"></div> <div class="right"></div> </div>
-- -------------------- ---- ------- ---------- - -------- ----- - ----- - ----------- -------- ---------- -- - ------ - ----------- -------- ----------- ------ -
等高列布局
当我们需要让多列高度相等的时候，CSS Flexbox 也可以轻松实现。
<div class="container"> <div class="item">1</div> <div class="item">2</div> <div class="item">3</div> </div>
.container {
display: flex;
}
.item {
background: #f2f2f2;
flex-grow: 1;
}Flexbox 实现兼容性
虽然 CSS Flexbox 在现代浏览器中已被广泛支持，但在一些老旧的浏览器中仍可能存在兼容性问题。为了避免这些问题，我们可以适当添加一些兼容性的代码。
-- -------------------- ---- ------- ---------- - -------- ----- -------- ------------- -- ------ -- -------- ------------ -- -------- -------- -- -- - ----- - ----------------- -- -- ------ -- --------- - - ----- -- -------- -------- -- -
结论
CSS Flexbox 是一种强大的布局方式，能够快速搞定布局难题，减少代码的冗余。掌握这些基本概念和实用技巧，可以让我们更加高效地完成工作。相信随着更多开发者的使用和探索，CSS Flexbox 一定会变得越来越流行。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/674e0b0d947dc5bcb30662a1