Flexbox 完全指南：从此告别浮动，拥抱一维战神

处于使用float来制作导航的状态吗，处于为了实现垂直居中而书写position加上transform的情况吗，今日我们来结识一位布局领域的“一维战神”，也就是Flexbox，它专门整治各种各样的居中、等分以及排列方面的难题，使得你书写布局类似搭建积木那般简易。前言。

回想往昔那些被float掌控的岁月，清除浮动需书写clearfix，垂直居中得计算许久方可得出结果，为达成几个元素等宽还得借助百分比小心翼翼地操作，直至Flexbox问世，前端布局才切实迎来了蓬勃发展的时期。

被称作Flex箱型布局模块的Flexbox，其翻译为“弹性盒子”。它的核心观念是，让容器具备改变子项宽度、高度以及顺序的能力，从而能够以最佳状态去填充可用的空间。它特别擅长处理一维类型的布局，也就是一行或者一列。就在今天，我们要完全掌握这个被叫做“一维战神”的Flexbox。

一、Flexbox的两大核心：容器与项目

倘若要运用Flexbox，你仅需于父元素之上设置display：flex或是display：inline-flex。于此情形下，父元素会变成flex容器，其直接子元素会自动变为flex项目。

.container {
  display: flex;  /* 容器开启flex模式 */
}

好比一支军队存在了指挥官，全部士兵（项目）都服从事物中空部分（指挥官）的安排，听从其调遣。

二、轴：Flexbox的方向感

存在于Flexbox里的是两条轴，一条是主轴，另一条是交叉轴，所有的排列都是围绕着这两条轴来进行的。

臆想你手中握持着一排士兵，你能够发号施令让他们横向站立啦（主轴呈水平状），你也能够指挥他们纵向站立哟（主轴为垂直状），甚至你还能够让他们倒着站立呢。这便是flex - direction所具备的效用呀。

.container {
  flex-direction: row;            /* 默认值，主轴水平，从左到右 */
  flex-direction: row-reverse;    /* 主轴水平，从右到左 */
  flex-direction: column;         /* 主轴垂直，从上到下 */
  flex-direction: column-reverse; /* 主轴垂直，从下到上 */
}

三、主轴上的排列：justify-content

控制项目在主轴上的对齐方式的是justify-content，其为最常用的属性当中的一个。

.container {
  justify-content: flex-start;    /* 默认，左对齐/上对齐 */
  justify-content: flex-end;      /* 右对齐/下对齐 */
  justify-content: center;        /* 居中 */
  justify-content: space-between; /* 两端对齐，项目之间间距相等 */
  justify-content: space-around;  /* 每个项目两侧间距相等 */
  justify-content: space-evenly;  /* 项目之间间距相等，边缘间距也是项目间距的一半？不，是均匀分布，包括两端 */
}

其中space - between以及space - evenly特别好用，一个是致使首尾紧紧贴边并且中间均匀分配的情况，而另一个是使得所有间隙全都彼此相等涵盖两端的情形。

四、处于交叉轴之上时的对齐情况：align-items 同 align-content，一同发挥作用，1. align-items：针对仅为一行的项目，在交叉轴方向上进行对齐。

全部项目处于一行（或者一列）之际，借由align-items操控它们于交叉轴之上的对齐样式。

.container {
  align-items: stretch;   /* 默认，如果项目未设置高度，则拉伸填满容器 */
  align-items: flex-start; /* 交叉轴起点对齐 */
  align-items: flex-end;   /* 交叉轴终点对齐 */
  align-items: center;     /* 交叉轴居中 */
  align-items: baseline;   /* 按第一行文字基线对齐 */
}

正是这个属性，它堪称垂直居中的神器，只要容器存在着高度，在设置了align-items: center的情况下，项目便能够实现垂直居中，当然这里主轴方向必须得是row。

2. align-content：多行项目的整体对齐

在容器于交叉轴方向存在多余空间，并且项目具有多行的情形下，运用align-content去把控多行整体的对齐方式，它与justify-content相类似，只是其作用实施于交叉轴。

.container {
  flex-wrap: wrap;        /* 先允许换行 */
  align-content: stretch;   /* 默认，拉伸占满 */
  align-content: flex-start;
  align-content: flex-end;
  align-content: center;
  align-content: space-between;
  align-content: space-around;
  align-content: space-evenly;
}

留意，要是项目仅有一行，那么align-content则不会产生效用。

五、项目的灵活性：flex 相关属性

项目自己也可以设置属性，控制自己的尺寸、排列顺序等。

1. flex-grow：如何分剩余空间

在容器存在剩余空间的情形之下的情况之时，flex - grow对项目是不是放大以及放大的程度大小起到决定的作用。其默认的值是0，这个意思就是不会进行放大。要是所有的项目都被设置成1，那么它们会平均分配剩余的空间；要是有一个被设置成2，而其他的都被设置成1，那么设置成2的那个项目会多占据一倍的空间。

.item {
  flex-grow: 1;   /* 所有项目等分剩余空间 */
}

2. flex-shrink：空间不够时如何缩小

在容器空间呈现不足情形之时，flex - shrink起到决然判定项目是否要进行缩小以及具体缩小幅度几何的作用。其默认数值设定为1，这意味着所有项目会按照相同的比例予以缩小。而那个被设置成为0的项目，是不会出现缩小情况的。

.item {
  flex-shrink: 0;   /* 打死我也不缩小 */
}

3. flex-basis：项目的基础尺寸

定义项目在分配空间之前的默认尺寸的是flex - basis，这能够被理解为在主要轴线处于水平状态的时候，其在主轴上的“初始宽度”，要是同时设置的话，它的优先级要高于width呀，其默认值是auto，也就是去参考项目自身的尺寸呢。

.item {
  flex-basis: 200px;   /* 我希望基础宽度是200px */
}

4. flex 简写

一般情形下，我们会运用flex属性把上面那三个合并起来进行书写，即flex: grow shrink basis ，常见的数值为。

六、项目的排序与对齐覆盖1. order：改变项目顺序

设定所有项目的order为0，依照源码顺序进行排列，你能够针对某个项目设置更大的order使其往后排列，或者设置更小的order使其往前排列，负数也是支持的。

.item:last-child {
  order: -1;   /* 最后一个变成第一个 */
}

2. align - self用于覆盖，覆盖那些存在于容器之中的align - items。

若是你期望对某个项目在交叉轴之上的对齐样式单独去变革的话，就能够运用align-self，其取值跟align-items是相同的。

.item.special {
  align-self: flex-end;   /* 单独沉底 */
}

七、实战：常见的Flexbox布局套路1. 水平垂直居中

最简单的居中方案：

.parent {
  display: flex;
  justify-content: center;
  align-items: center;
}

无论子元素是一个还是多个，都能完美居中。

2. 导航栏：Logo左，菜单中，登录右

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.menu {
  display: flex;
  gap: 20px;
  list-style: none;
}

要是存有想让菜单达成绝对居中的想法，也就是其不管左右两边的宽度情形如何，都能保持居中状态，那么能够给.menu添加margin: 0 auto这个样式设置项。

3. 等分布局

比如三个卡片等宽，间距固定：

.container {
  display: flex;
  gap: 20px;
}
.item {
  flex: 1;   /* 三个项目等分剩余空间，宽度相等 */
}

4. 圣杯布局（经典三栏）

左右固定宽度，中间自适应：

.container {
  display: flex;
}
.left {
  width: 200px;
}
.right {
  width: 200px;
}
.main {
  flex: 1;   /* 中间占满剩余空间 */
}

5. 底栏自动贴底

页面之中内容要是不足的时候，footer会贴在底部这儿；而当内容变得多起来之时，footer就会被推下去：

  
...
  
...
  

八、常见坑点与避坑指南1. 浮动失效

倘若元素转变为flex项目，那么它的float、clear以及vertical-align均会失去效用。因而可以安心使用flex，无需再为浮动而忧心了。

2. margin: auto 的妙用

于flex容器之内，对某一项目设定margin为auto，其会自行吸纳余下空间，达成“推挤”之成效。举例来说，使一个项目独自靠右排列：

.container {
  display: flex;
}
.item.move-right {
  margin-left: auto;   /* 把自己挤到右边 */
}

3. 文本溢出省略号

当在flex项目里头设置文本省略号之际，或许得给项目设定min-width: 0或者overflow: hidden，这是由于flex项目默认情形下不会缩小至内容最小宽度以下呀。

.item {
  min-width: 0;        /* 允许项目缩小到比内容宽度小 */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

4. gap 属性

gap属于较新的属性，借助它能够便利地设定项目之间的间距，无需再为margin而烦恼。它支持row-gap以及column-gap，还能够简写成gap: 10px 20px。

.container {
  display: flex;
  gap: 20px;   /* 项目之间左右、上下间距都是20px（如果换行） */
}

九、总结

灵活盒这一现代布局的基石所在，一旦掌握它，那么你便能够轻松去应对绝大多数的一维布局场景，在此再对核心进行一下回顾。

弹性盒模型并非困难之事，重点在于领会“主轴”以及“剩余空间分配”这两个概念，多亲自去书写若干示例，你便能够成为布局方面的大师。

要是你对这篇文章怀有好感，无妨进行点赞、收藏以及分享。明日我们会继续来讲 Grid 布局——二维全域的终极利器，敬请予以期待！

预告明日：Grid网格布局，从入门起始进而达到精通，运用网格想法重新构建网页，令二维布局不再遭遇使人头疼的状况。

相关标签： # Flexbox # 布局 # 前端 # 一维布局 # 网格布局