一文读懂 flex, 妈妈再也不用担心我的布局了

前端之露
2,026 阅读3分钟

由于掘金不支持 html 文件格式，可以转到我的博客 flex布局 手动操作 button 按钮，更加有感觉。

一、传统布局（盒模型）

display + float + position, 布局不够灵活

<div class="inline tradition">
    <div></div>
</div>

.tradition {
    margin: .5rem auto;
    margin-right: .3rem;
    width: 8rem;
    height: 5rem;
    background: #ccc;
    position: relative;
}
.tradition div {
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -1rem;
    margin-top: -1rem;
    width: 2rem;
    height: 2rem;
    background: darkorange;
}

二、弹性盒模型

<div class=" flexbox">
    <div></div>
</div>

.flexbox {
    width: 8rem;
    height: 5rem;
    background: #ccc;
    display: flex;
}
.flexbox div {
    width: 2rem;
    height: 2rem;
    background: blue;
    margin: auto;
}

三、容器与项目

容器 默认存在两根轴：

  • 水平的主轴（main axis）: 主轴的开始位置（与边框的交叉点）叫做 main start，结束位置叫做 main end；
  • 垂直的交叉轴（cross axis）:交叉轴的开始位置叫做 cross start，结束位置叫做 cross end。

项目 默认沿主轴排列

  • 单个项目占据的主轴空间叫做 main size，
  • 占据的交叉轴空间叫做 cross size。

四、容器的属性

新建一个容器，三个项目

<div class="bg container">
    <div class=" item item1">1</div>
    <div class=" item item2">2</div>
    <div class=" item item3">3</div>
</div>

.bg {
    background: #ccc;
    width: 10rem;
    height: 7rem;
    margin: .3rem;
}
.container {
    display: flex;
}
.item {
    width: 2rem;
    height: 2rem;
    line-height: 2rem;
    text-align: center;
    font-size: 1rem;
}
.item1 {
    background: #f55;
}
.item2 {
    background: darkorange;
}
.item3 {
    background: #0f0;
}

1、 flex-direction ( 改变主轴的方向 )

flex-direction

2、 justify-content ( 改变项目在主轴方向的排列方式 )

justify-content

3、 align-items ( 项目在侧轴方向上的排列方式 )

align-items

4、 flex-wrap ( 项目在一条轴线上排列不下 是否换行 )

flex-wrap

5、 flex-flow ( 复合flex-direction 与flex-wrap )

五、项目的属性

1、 order ( 项目的排列顺序 值小的在前 )

order

2、 flex-grow ( 子项分配容器剩余空间的比例 )

默认为0：即容器有剩余空间，子项也不占用 容器存在剩余空间

子项如何分配: 通过给需要扩张的子项设置flex-grow属性，该属性的值被称为权重（无单位），即容器剩余空间将按照这个权重来分配

flex-grow 的计算: 比如剩余空间为 x，三个元素的 flex-grow 分别为 a，b，c。设 sum 为 a + b + c。那么三个元素将得到剩余空间分别是 x * a / sum, x * b / sum, x * c / sum

3、 flex-shrink ( 容器的空间不够时，让各个项目收缩以适应有限的空间)

默认值为1

容器的宽度为900px

父元素 800px
三个子元素分别设置为 200px，300px，400px
三个子元素的 flex-shrink 的值分别为 1，2，3
首先，计算子元素溢出多少：200 + 300 + 400 - 800 = -100px
那这-100px 将由三个元素的分别收缩一定的量来弥补
具体的计算方式为：每个元素收缩的权重为其 flex-shrink 乘以其宽度。
所以总权重为 1 * 200 + 2 * 300 + 3 * 400 = 2000
三个元素分别收缩：
-100(溢出)* 1(flex-shrink) * 200(width) / 2000 = -10
-100(溢出) * 2(flex-shrink) * 300(width) / 2000 = -30
-100(溢出) * 3(flex-shrink) * 400(width) / 2000 = -60
三个元素的最终宽度分别为：
200 - 10 = 190
300 - 30 = 270
400 - 60 = 340

4、 flex-basis ( 就是width的替代品 优先级比width高)

5、 align-self(允许单个项目与其他项目不一样的对齐方式)

可以覆盖容器设置的align-items属性

6、 flex属性

flex-grow flex-shrink flex-basis属性的复合,后面两个可以省略

应该是子项中最好用的属性了

avatar
文章
阅读
粉丝