Flex 布局~~~

Leeson
382 阅读6分钟

在CSS的领域中，有着各种方式的布局。今天，笔者记录一下自己目前最常用的Flex布局。谁用谁知道，这也太舒爽了😎

前言

先来准备一段html代码，之后的代码解释都是用此代码。

<div class="parent">
  <p class="child first">hello，我是第一个子元素</p>
  <p class="child second">嗨，我是第二个子元素</p>
  <p class="child third">嗯哼，我是第三个子元素</p>
</div>

我们给父元素.parent添加display: flex;，这样就创建了Flex布局。css如下：

.parent {
  width: 300px;
  height: 200px;
  border: 1px solid #409eff;
  display: flex;
}

.child {
  width: 50px;
  font-size: 12px;
}
.first {
  background: rosybrown;
}
.second {
  background: #ff6800;
}
.third {
  background: #ff6088;
}

父元素.parent称为flex容器，里面的子元素.child称为flex子项。Flex布局中的所有属性都作用在flex容器或者flex子项上

介绍

由于Flex的属性作用在容器或者子项上，所以笔者分两块进行介绍。Flex布局是分主轴和交叉轴的，可以简单的理解为水平方向和垂直方向

作用在容器上的属性

该标题下所介绍的所有属性，均写在父元素.parent下

  • justify-content

justify-content决定了水平方向上flex子项的对齐方式，属性值有center | space-around | space-between | space-evenly | flex-start | flex-end。
其中：
center：居中对齐

space-around：每个flex子项左右两边有等宽的间距。所以，第一个flex子项的左侧和最后一个flex子项的右侧间距只有中间间距的一半

space-between：两端对齐

space-evenly：每个flex子项左右两边间距完全相等。注意和space-around区分

flex-start：左对齐(默认值)

flex-end：右对齐

  • align-items

align-items决定了垂直方向上flex子项的对齐方式，属性值有center | stretch | flex-start | flex-end | baseline。
其中：

center：垂直居中对齐

stretch：flex子项拉伸(默认值)。如果子项没有指定高度，则会拉伸至容器高度。反之就渲染指定的高度

flex-start：容器顶部对齐

flex-end：容器底部对齐

baseline：相对于容器的基准线对齐

  • flex-direction

flex-direction决定了flex子项的整体布局方向，属性值有：row | row-reverse | column | column-reverse。
其中：
row：行排列(默认值)，方向从左往右

row-reverse：行排列，方向从右往左

column：竖排列，方向从上往下

column-reverse：竖排列，方向从下往上

  • flex-wrap

flex-wrap决定了flex子项整体是单行显示还是换行显示，属性值有：nowrap | wrap | wrap-reverse。
其中：
nowrap：单行显示(默认值)，因此容易出现宽度溢出的情况

wrap：换行显示

wrap-reverse：换行显示，且换行的元素在上方显示

  • flex-flow

flex-flow是flex-direction和flex-wrap的缩写形式，格式如下：flex-flow: row wrap;

  • align-content

align-content和justify-content属性是相似的。justify-content规定了flex子项水平方向上对齐方式，而align-content则是规定flex子项垂直方向上的对齐方式。属性值和justify-content的值一样，这里就不再一一介绍了。
tips：如果flex子项只有一行的话，该属性是没有效果的

作用在子项上的属性

该标题下所介绍的所有属性，均写在具体某一个子元素下。笔者将属性写在第三个子元素.third上

  • flex-grow

flex-grow：扩展flex子项所占据的宽度。什么意思呢？当某一个子项设置该属性时，会根据该属性的值进行除去元素外剩余空间的占据。属性值是0 ~ 1之间的数字。我们先来看**只有一个子项(第三个子元素)**设置该属性时，其中：
0：不占据剩余空间(默认值)

0.5：占据剩余空间的一半

1：占据全部剩余空间。tips：值大于1时，效果和1一样

当有多个子项同时设置该属性时，会根据比例进行剩余空间的分配。在此情景中，我给第一和第二个子元素设置flex-grow: 0.25，这意味着第一和第二子元素平分剩余空间的50%。依旧改变第三个子元素的flex-grow。其中：
0：剩余50%的剩余空间，另50%由第一二子元素平分

0.25：三个子元素平分75%的剩余空间。还剩25%的剩余空间

0.5：剩余0%的剩余空间：第三个子元素占据剩余空间的50%，另50%由第一二子元素平分

1：效果同0.5

  • flex-shrink

如果说flex-grow是子元素利用剩余空间进行扩展，那么flex-shrink则是子元素在空间不足的情况下进行宽度的收缩。我们将.child元素样式进行简单的修改(上文已粘贴样式代码)，将width: 50px改为width: 120px。
我们先来看看**只在一个子项(第三个子元素)**上修改该属性时，其中：

1：默认值，子元素可收缩。此时三个子元素同等收缩

0：子元素不可收缩，保持原始的宽度。所以，第三个子元素保持原有宽度(120px)，第一和第二个子元素同等收缩(默认值为1)

2：此时三个子元素的收缩比例为1:1:2

当然，我们也可以同时修改三个子元素的flex-shrink。在这里，我只展示将三个子元素同时设置为flex-shrink: 0时的情形，其他情况读者可自行敲代码感受🧐

当三个子元素同时设置不可收缩时，很明显已经超出父元素容器......

  • order

order可以改变某一个子项的位置。属性值有：-1 | 0 | 1。为了有比较直观的感受，该属性的演示将作用于第二个子元素(.second)
其中：

0：默认值

-1：可将某一个子项放在最前面显示

1：可将某一个子项放在最后面显示

  • flex-basis

flex-basis决定了在分配空间之前该元素的默认大小。当某个子元素同时出现width和flex-basis时，会优先使用flex-basis。现在，我们将.child的宽度由120px再改回原来的50px。属性值有：auto | px
其中：

auto：默认值。子元素有width时就占据该width，反之，则根据内容来

还可以设置具体的px。笔者将第三个子元素的flex-basis分别设置成100px和250px来进行演示：

100px

250px，当设置成250px时，由于第一和第二个子元素的宽度为50px，那么剩余空间只有200px(父元素宽为300px)，不满足250px，此时，第一和第二个子元素会收缩

  • flex

flex是flex-grow、flex-shrink和flex-basis的缩写形式(flex-shrink和flex-basis的参数可省略)，格式如下：flex-flow: 0 1 auto;

  • align-self

align-self可以单独控制某一个子项的垂直对齐方式。还记得之前介绍的align-items吗？没错，align-items控制的是全体子项的垂直对齐方式。align-self的属性值和align-items的属性值一模一样，在此就不再赘述了🤯 唯一有区别的是：align-self多了一个auto(默认值)，代表的意思是继承align-items的属性值

结语

注意：在Flex布局下，子元素的float、clear、vertical-align属性都将失效

Flex布局的相关属性以及注意事项都已介绍完毕👏 发现还是有挺多内容的！但通过实践相信大家都能拿捏这些属性，成为更优秀的打工人😏

avatar
文章
阅读
粉丝