前言
Flexbox 是 CSS3 中新加入的一种布局方式，它可以轻松地实现响应式布局、复杂的布局结构以及灵活的对齐方式。本文将详细介绍 Flexbox 的使用方法，包括基本概念、属性详解以及示例代码，希望能够对前端开发者有所帮助。
基本概念
Flexbox 的核心概念是容器（container）和项目（item）。容器是指包含项目的父元素，而项目则是容器的子元素。容器和项目都有一些属性可以控制它们的布局。
Flexbox 的最大特点是可以让容器中的项目自由地伸缩、对齐和排序，从而实现复杂的布局结构。下面是一些常用的 Flexbox 属性：
display: flex;：将容器设置为 Flexbox 布局模式。flex-direction：设置主轴的方向，可以是 row（默认值，水平方向）、column（垂直方向）、row-reverse 或 column-reverse。justify-content：设置主轴上的对齐方式，可以是 flex-start（默认值，左对齐）、flex-end（右对齐）、center（居中对齐）、space-between（两端对齐，项目之间的间隔相等）、space-around（每个项目两侧的间隔相等，项目之间的间隔比项目与边框的间隔大一倍）。align-items：设置交叉轴上的对齐方式，可以是 flex-start（上对齐）、flex-end（下对齐）、center（居中对齐）、baseline（基线对齐）或 stretch（拉伸对齐）。flex-wrap：设置是否换行，可以是 nowrap（默认值，不换行）、wrap（换行）、wrap-reverse（反向换行）。align-content：设置多行项目在交叉轴上的对齐方式，可以是 flex-start（上对齐）、flex-end（下对齐）、center（居中对齐）、space-between（两端对齐，项目之间的间隔相等）、space-around（每个项目两侧的间隔相等，项目之间的间隔比项目与边框的间隔大一倍）或 stretch（拉伸对齐）。
属性详解
flex-grow
flex-grow 属性用于控制项目的放大比例，即当容器的空间有剩余时，项目会根据 flex-grow 的值来分配剩余空间。默认值为 0，即项目不会放大。如果所有项目的 flex-grow 值都为 1，则它们会平均分配剩余空间。如果一个项目的 flex-grow 值为 2，而其他项目的 flex-grow 值都为 1，则前者会比后者多分配一倍的剩余空间。
.container { display: flex; } .item { flex-grow: 1; }
上面的代码将容器设置为 Flexbox 布局模式，并将所有项目的 flex-grow 值设置为 1。这样，所有项目都会平均分配容器的剩余空间。
flex-shrink
flex-shrink 属性用于控制项目的缩小比例，即当容器的空间不足时，项目会根据 flex-shrink 的值来缩小。默认值为 1，即项目会按比例缩小。如果一个项目的 flex-shrink 值为 0，则它不会缩小。如果一个项目的 flex-shrink 值为 2，而其他项目的 flex-shrink 值都为 1，则前者会比后者多缩小一倍。
.container { display: flex; } .item { flex-shrink: 1; }
上面的代码将容器设置为 Flexbox 布局模式，并将所有项目的 flex-shrink 值设置为 1。这样，所有项目会按比例缩小。
flex-basis
flex-basis 属性用于设置项目的基准大小，即项目在没有任何放大或缩小的情况下的大小。默认值为 auto，即项目的大小由其内容决定。如果值为一个长度或百分比，则项目的大小会被设置为该值。如果值为 0，则项目的大小为 0。
.container { display: flex; } .item { flex-basis: 100px; }
上面的代码将容器设置为 Flexbox 布局模式，并将所有项目的 flex-basis 值设置为 100px。这样，所有项目的基准大小都为 100px。
flex
flex 属性是 flex-grow、flex-shrink 和 flex-basis 的缩写形式，用于同时设置这三个属性。默认值为 0 1 auto，即项目不会放大、会按比例缩小、大小由其内容决定。
.container { display: flex; } .item { flex: 1 1 100px; }
上面的代码将容器设置为 Flexbox 布局模式，并将所有项目的 flex 值设置为 1 1 100px。这样，所有项目的放大比例、缩小比例和基准大小都被设置为相同的值。
order
order 属性用于控制项目的排序，即项目在容器中的位置。默认值为 0，即项目按照其在 HTML 中的顺序排列。如果多个项目的 order 值相同，则它们按照其在 HTML 中的顺序排列。
-- -------------------- ---- ------- ---------- - -------- ----- - ------------------ - ------ -- - ------------------ - ------ -- -展开代码
上面的代码将容器设置为 Flexbox 布局模式，并将第二个项目的 order 值设置为 1，第三个项目的 order 值设置为 2。这样，第二个项目会排在第一个项目的前面，第三个项目会排在第二个项目的前面。
示例代码
下面是一个使用 Flexbox 布局实现的导航栏示例代码：
-- -------------------- ---- ------- ---- --------------- -- -------- ------------------------------ --- ------------------- --- ----------------- -- -------- --------------------- ----- ----- --- ----------------- -- -------- --------------------- ----- ----- --- ----------------- -- -------- --------------------- ----- ----- ----- ------展开代码
-- -------------------- ---- ------- ------- - -------- ----- ---------------- -------------- ------------ ------- -------- ----- ----------------- -------- - ------------- - ---------- ----- ------------ ----- ------ -------- - ----------- - -------- ----- --------------- ---- ---------------- --------- ------------ ------- ------- -- -------- -- ----------- ----- - --------- - ------------ ----- - --------- - ---------- ----- ------ -------- ---------------- ----- -展开代码
上面的代码使用 Flexbox 布局实现了一个简单的导航栏，其中 navbar 是容器，navbar-brand 和 navbar-nav 是项目。容器使用 justify-content: space-between; 和 align-items: center; 属性将项目分别沿着主轴和交叉轴居中对齐，并在它们之间留出一定的空间。项目使用 flex-direction: row; 和 justify-content: flex-end; 属性将链接沿着主轴从右往左排列，并与容器右侧对齐。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67caaecbe46428fe9e31abe6
