flex.png

一.介绍

Flexible Box 模型,通常被称为 flexbox,是一种一维的布局模型。它给 flexbox 的子元素之间提供了强大的空间分布和对齐能力,比以往的标准流浮动等布局方便太多了。

兼容性

正常来说兼容IE10及以上,不支持6-9,所以在使用的时候一定要根据需求来使用
flexCompatibility.png

二.怎么开启flex布局

给父盒子添加如下css,开启了的盒子叫做flex container,flex container里面的盒子叫做flex item。

.flex-container{
    display: flex;//如果这样表示块状盒子
    display: inline-flex; //这时候表示行内盒子
  }

三.flex布局的两个轴(axis)

主要分为主轴(main axis)和交叉轴(cross axis),他们的方向并不如下,以下只是默认情况下的指向。
其中外面的大盒子叫做flex container,里面的小盒子叫做flex item

其中flex-container包含的属性有

  • flex-flor
  • flex-direction
  • flex-wrap
  • justify-contain
  • align-item
  • aligin-contain

    应用在flex-item上的属性有

  • flex
  • flex-grow
  • flex-basis
  • flex-shrink
  • order
  • align-self

axis.png

四.flex container的属性

flex-direction介绍

flex-direction决定主轴的方向(即项目的排列方向,默认是从左到右从main start到main end)
他有四个属性值
  • row (默认)
  • row-reverse
  • column
  • column-reverse

如下有四个盒子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .flex-container{
            display: flex;
        }
        .flex-container>div{
            height: 100px;
            width: 100px;
            text-align: center;
            line-height: 100px;
            color: #fff;
            font-size: 50px;
        }
        .flex-container>div:first-child{
            background-color: pink;
        }
        .flex-container>div:nth-child(2){
            background-color:blueviolet;
        }
        .flex-container>div:nth-child(3){
            background-color:hotpink;
        }
        .flex-container>div:nth-child(4){
            background-color:greenyellow;
        }


    </style>
</head>
<body>
    <div class="flex-container">
        <div class="flex-item1">1</div>
        <div class="flex-item2">2</div>
        <div class="flex-item3">3</div>
        <div class="flex-item4">4</div>
    </div>
</body>
</html>

当属性为默认值row时排列如下:

flex-direction: row;

flex-direction.png

当属性为row-reverse

flex-direction: row-reverse;

row-reverse.png

当属性为colum

flex-direction: column

column.png

当属性为colum-reverse

flex-direction: column-reverse

column-reverse.png

justify-content介绍

flex-content决定了flex item在主轴上的对齐方式,相比较于flex-direction不同的是他不会改变主轴的反向,而使得里面 的flex-item进行排序
他有几个属性值
  • flex-start
  • flex-end
  • center
  • space-around
  • space-between

    flex-start 默认值

    flex-start

    flex-end

    flex-end

    center

    center

    space-around

    space-around

    space-between

    space-between!

    align-items介绍

    建立在主轴为水平方向时测试,即 flex-direction: row
    .container {
      align-items: flex-start | flex-end | center | baseline | stretch;
    }

默认值为 stretch 即如果项目未设置高度或者设为 auto,将占满整个容器的高度。

stretch

假设容器高度设置为 100px,而项目都没有设置高度的情况下,则项目的高度也为 100px。

flex-start:交叉轴的起点对齐

flex-start.jpg
假设容器高度设置为 100px,而项目分别为 20px, 40px, 60px, 80px, 100px, 则如上图显示。

flex-end:交叉轴的终点对齐

flex-end.jpg

center:交叉轴的中点对齐

center.jpg

baseline: 项目的第一行文字的基线对齐

baseline.jpg

flex-wrap: 决定容器内项目是否可换行

默认情况下,项目都排在主轴线上,使用 flex-wrap 可实现项目的换行。
.container {
    flex-wrap: nowrap | wrap | wrap-reverse;
}

默认值:nowrap

不换行,即当主轴尺寸固定时,当空间不足时,项目尺寸会随之调整而并不会挤到下一行。
nowrap.jpg

wrap

项目主轴总尺寸超出容器时换行,第一行在上方
wrap.jpg

wrap-reverse

换行,第一行在下方
wrap-reverse.jpg

flex-flow介绍

flex-flow是flex-direction 和 flex-wrap 的简写形式,注意一下即可

align-content介绍

定义了多根轴线的对齐方式,如果项目只有一根轴线,那么该属性将不起作用
.container {
    align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}

这个这样理解:

当你 flex-wrap 设置为 nowrap 的时候,容器仅存在一根轴线,因为项目不会换行,就不会产生多条轴线。

当你 flex-wrap 设置为 wrap 的时候,容器可能会出现多条轴线,这时候你就需要去设置多条轴线之间的对齐方式了。

建立在主轴为水平方向时测试,即 flex-direction: row, flex-wrap: wrap

默认值为 stretch,看下面的图就很好理解了

stretch.jpg
从图可以看出又三条轴线(因为容器宽度有限),当值为 stretch 时会三条轴线平分容器的垂直方向上的空间。

值得注意的是,虽然在每条轴线上项目的默认值也为 stretch,但是由于我每个项目我都设置了高度,所以它并没有撑开整个容器。如果项目不设置高度的话就会变成下面这样:
st.jpg
这个我在前面也有提到(align-items),这里重点还是理解三条轴线会平分垂直轴上的空间。

flex-start:轴线全部在交叉轴上的起点对齐

flex-start.jpg

flex-end:轴线全部在交叉轴上的终点对齐

flex-end.jpg

center:轴线全部在交叉轴上的中间对齐

center.jpg

space-between:轴线两端对齐,之间的间隔相等,即剩余空间等分成间隙。

space-between.jpg

space-around:每个轴线两侧的间隔相等,所以轴线之间的间隔比轴线与边缘的间隔大一倍。

space-around.jpg

五.flex items上的属性

order

顾名思义,根据排序有关,数值越小,排序越靠前

.item {

order: <integer>;

}
order.jpg

flex-basis

flex-basis 属性用于设置或检索弹性盒伸缩基准值,flex-basis属性定义了在分配多余空间之前,项目占据的主轴空间(main size)。浏览器根据这个属性,计算主轴是否有多余空间。可以是长度单位,也可以是百分比,百分比是按照父元素的width为标准。
默认值为 0,不是 auto,如果取值为 auto 的话,它的值就等于 flex-items的 width(或者默认的大小,width没有设置的话)。
.item {
  flex-basis: <length> | auto; /* default auto */
}

flex-grow

定义项目的放大比例
.item {
    flex-grow: <number>;
}
默认值为 0,即如果存在剩余空间,也不放大
![flex-grow][29]

当所有的项目都以 flex-basis 的值进行排列后,仍有剩余空间,那么这时候 flex-grow 就会发挥作用了。
如果所有项目的 flex-grow 属性都为 1,则它们将等分剩余空间。(如果有的话)
如果一个项目的 flex-grow 属性为 2,其他项目都为 1,则前者占据的剩余空间将比其他项多一倍。
当然如果当所有项目以 flex-basis 的值排列完后发现空间不够了,且 flex-wrap:nowrap 时,此时 flex-grow 则不起作用了,这时候就需要接下来的这个属性。

flex-shrink

定义了项目的缩小比例
.item {
    flex-shrink: <number>;
}

默认值: 1,即如果空间不足,该项目将缩小,负值对该属性无效。
flex-shrink.jpg
这里可以看出,虽然每个项目都设置了宽度为 50px,但是由于自身容器宽度只有 200px,这时候每个项目会被同比例进行缩小,因为默认值为 1。
同理可得:

  1. 如果所有项目的 flex-shrink 属性都为 1,当空间不足时,都将等比例缩小。
  2. 如果一个项目的 flex-shrink 属性为 0,其他项目都为 1,则空间不足时,前者不缩小。

    flex

    flex-grow, flex-shrink 和 flex-basis的简写
    .item{
     flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
    } 

    align-self

    align-self属性允许单个项目有与其他项目不一样的对齐方式,可覆盖align-items属性。默认值为auto,表示继承父元素的align-items属性,如果没有父元素,则等同于stretch。
    .item {
      align-self: auto | flex-start | flex-end | center | baseline | stretch;
    }

    这个跟 align-items 属性时一样的,只不过 align-self 是对单个项目生效的,而 align-items 则是对容器下的所有项目生效的。

参考自
https://zhuanlan.zhihu.com/p/25303493
http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html

Last modification:April 10, 2020
If you think my article is useful to you, please feel free to appreciate