简介
Flexbox 是 CSS3 新增的一种布局方式，通过对容器和子元素的属性设置，可以实现灵活、响应式的布局。它的出现解决了传统布局方式的痛点，如水平垂直居中、等高布局等等问题。本文将介绍 Flexbox 的常见属性和使用技巧，以及优化实例。
常见属性
容器属性
display: 设置为flex或inline-flex来定义成为一个 Flexbox 布局。默认为flex。flex-direction: 定义 Flexbox 主轴的方向，可以是row（水平方向）、column（竖直方向）、row-reverse（反向水平方向）、column-reverse（反向竖直方向）。flex-wrap: 控制 Flexbox 是否换行，可以是nowrap（不换行）、wrap（换行，第一行在上面）、wrap-reverse（换行，第一行在下面）。justify-content: 控制子元素在主轴上对齐方式。可以是flex-start（靠左对齐）、center（居中对齐）、flex-end（靠右对齐）、space-between（分散对齐，首尾不留空）、space-around（分散对齐，首尾留空）。align-items: 控制子元素在副轴上对齐方式，可以是flex-start（顶部对齐）、center（居中对齐）、flex-end（底部对齐）、baseline（按文本基线对齐）、stretch（高度撑满容器）。align-content: 仅在存在换行情况下，控制多行子元素在副轴上对齐方式，可以是flex-start（顶部对齐）、center（居中对齐）、flex-end（底部对齐）、space-between（分散对齐，首尾不留空）、space-around（分散对齐，首尾留空）、stretch（高度撑满容器）。
子元素属性
order: 控制子元素排布顺序，数值越小越靠前，默认为0。flex-grow: 控制子元素放大比例，值为0时不放大，为正数时按比例放大。flex-shrink: 控制子元素缩小比例，值为0时不缩小，为正数时按比例缩小。flex-basis: 初始宽度，可以是一个固定值或百分比。flex: 以上三个属性的缩写，值为flex-grow、flex-shrink、flex-basis的组合值。默认值为0 1 auto。align-self: 为单个子元素定义对齐方式，覆盖了align-items中的设置，可以是auto（继承父元素的align-items）、flex-start（顶部对齐）、center（居中对齐）、flex-end（底部对齐）、baseline（按文本基线对齐）、stretch（高度撑满父元素）。
使用技巧
1. 水平垂直居中
使用 Flexbox 最常见的用途就是实现元素的水平垂直居中。我们可以将容器的 display 设为 flex，然后通过 justify-content 和 align-items 属性来设置对齐方式。
<div class="container"> <div class="item">Flexbox</div> </div>
.container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}2. 均分剩余空间
有时候我们需要将子元素均分剩余空间，这时我们可以使用 flex-grow 属性。将子元素的 flex-grow 设为一个正数即可均分剩余空间，如果有多个子元素需要进行均分，则需要保证它们的 flex-grow 值相等。
<div class="container"> <div class="item">1</div> <div class="item">2</div> <div class="item">3</div> </div>
.container {
display: flex;
justify-content: space-between;
}
.item {
flex-grow: 1;
}3. 排序
使用 order 属性可以调整子元素的排布顺序。数值越小越靠前，默认为 0。
<div class="container"> <div class="item" style="order: 1;">2</div> <div class="item" style="order: -1;">1</div> <div class="item" style="order: 0;">3</div> </div>
.container {
display: flex;
}4. 等高布局
传统的等高布局需要通过 JavaScript 等方式来处理，使用 Flexbox 可以轻松实现。
-- -------------------- ---- -------
---- ------------------
---- -------------
---- -------------- -------
------
---- -------------
---- -------------- -------
------
---- -------------
---- -------------- -------
------
-------- -------------------- ---- ------- ---------- - -------- ----- - ----- - ----- -- -------- ----- ---------------- ------- ------------ ------- - ----- --- - ----------- ----- ---------- ----- ------- ----- -
5. 响应式布局
由于 Flexbox 可以轻松实现元素的自适应，因此它非常适合应用于响应式布局中。根据不同的屏幕尺寸，我们可以通过媒体查询来设置容器的宽度和 flex-wrap 属性。
<div class="container"> <div class="item">1</div> <div class="item">2</div> <div class="item">3</div> <div class="item">4</div> <div class="item">5</div> </div>
-- -------------------- ---- -------
---------- -
-------- -----
---------- -----
---------------- -------
-
----- -
------ ------
------- ------
------- -----
-
------ ------ --- ----------- ------ -
----- -
------ -----
------- ---- --
-
-优化实例
1. 使用 Flexbox を优化网页头部
在网页的头部通常会有一个导航栏，我们可以使用 Flexbox 对其进行优化。
-- -------------------- ---- -------
--------
---- ------------------
---- -----------------------
--- -------------
-------------
--------------
----------------
-----
------
----------- -------------------- ---- ------- ------ - ------- ----- ----------------- ----- ------ ----- -------- ----- ------------ ------- - ---------- - -------- ----- ---------------- -------------- ------ ------ ------- - ----- - ----- - ---------- ----- - ----- - -------- ----- ----------- ----- ------- -- -------- -- - ----- -- - ------- - ----- -
2. 使用 Flexbox 优化图片画廊
图片画廊通常需要展示同时具备等高和等宽两个特性的图片，使用 Flexbox 可以轻松实现。
-- -------------------- ---- -------
---- ------------------
---- -------------
---- -------------- -------
------
---- -------------
---- -------------- -------
------
---- -------------
---- -------------- -------
------
---- -------------
---- -------------- -------
------
-------- -------------------- ---- ------- ---------- - -------- ----- ---------------- -------------- ------------ ------- ---------- ----- - ----- - ------ -------- - ------ -------------- ----- - ----- --- - ------ ----- ------- ----- -------- ------ --------------- ------- -
总结
Flexbox 是一种非常灵活的布局方式，可以实现多种繁琐的布局效果。通过本文的介绍，相信读者已经对 Flexbox 的常见属性和使用技巧有了一定的了解，可以在实际开发中灵活运用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/646c56a7968c7c53b0b54c22