flex布局 学习记录~

实习生小黄
258 阅读6分钟

「这是我参与11月更文挑战的第4天，活动详情查看：2021最后一次更文挑战」。

flex布局是什么？

Flex布局又称为为"弹性布局"，用来为盒状模型提供最大的灵活性

任何元素都可以在他身上指定flex布局，那么他的子元素们就会变为flex布局的项目-flex布局当中定义为flex的父元素成为容器，而他的子元素们也就是flex布局影响的成员称为项目。

flex布局的使用

首先在一个容器上设定 display=flex 就能将它的子元素布局变为flex布局，他的子元素排列将会变成从左到右排列，宽度大于父元素的时候默认会压缩，高度则是不变，下面将用几个盒子来做一下示范：

<body>
    <div class='div'>
        <div class='div1'></div>
        <div class='div2'></div>
        <div class='div3'></div>
        <div class='div4'></div>
        <div class='div5'></div>
        <div class='div6'></div>
    </div>
</body>

现在为每一个盒子定义大小和颜色

 <style>
        div {
            width: 500px;
            height: 500px;
            background-color: red;
        }
        .div1{
            height: 90px;
            width: 110px;
            background-color: green;
        }
        .div2{
            height: 110px;
            background-color: gray;
        }
        .div3{
            background-color: black;
        }
        .div4{
            background-color: blue;
        }
        .div5{
            background-color: orange;
        }
        .div6{
            background-color: pink;
        }
    </style>

没有使用flex布局的时候，由于div为块元素，那么上面6个div将会从上到下排列 然而在最大的div中设置了 display=flex后 页面就会变成：

111.PNG

可以看到，子元素的高度没有发生变化，宽度将会撑满父元素，不足的情况下默认按照之前的大小按比例缩小 然后在flex布局当中容器可以设定6个属性，分别为：

  • flex-direction
  • flex-wrap
  • flex-flow
  • justify-content
  • align-items
  • align-content

  1. flex-direction属性

  • flex-direction属性决定了父元素里面的子元素按照什么顺序进行排列

1111.PNG

.box {
  flex-direction: row | row-reverse | column | column-reverse;
}

从左到右分别为：

  • row（默认值）：主轴为水平方向，起点在左端。
  • row-reverse：主轴为水平方向，起点在右端。
  • column：主轴为垂直方向，起点在上沿。
  • column-reverse：主轴为垂直方向，起点在下沿。

  1. flex-wrap属性

  • 默认情况下，项目都在一条直线上排列，哪怕改变了排列方向。flex-wrap属性定义，如果一条直线排不下，项目们改如何进行换行。

123123.PNG

.box{
  flex-wrap: nowrap | wrap | wrap-reverse;
}

从左到右分别为：

  • nowrap（默认）：不换行。也就和上面的那个彩色截图一样，项目会根据自己本来的大小对应比例压缩
  • wrap：换行，第一行在上方。当一行中放不下的时候就会自动跳到下一行
  • wrap-reverse：换行，第一行在下方。与wrap相同，只不过是向上换行

  1. flex-flow属性

  • flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row 和 nowrap。
.box {
  flex-flow: <flex-direction> || <flex-wrap>;
}

  1. justify-content属性

  • justify-content属性定义了项目在水平方向上的对齐方式。比较常用的一个属性，能够定义项目在水平方向对齐方式，能很轻松的实现项目的水平居中，但是值的注意的是，一旦改变了项目的排列方向，这个值也会跟着改变。

2121.PNG

.box {
  justify-content: flex-start | flex-end | center | space-between | space-around;
}
  • flex-start（默认值）：左对齐
  • flex-end：右对齐
  • center： 居中
  • space-between：两端对齐，项目之间的间隔都相等。
  • space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。

  1. align-items属性

  • align-items属性定义项目在竖直上如何对齐。和上一个属性能够简单的实现一个项目的水平垂直居中。

2323.PNG

.box {
  align-items: flex-start | flex-end | center | baseline | stretch;
}
  • flex-start：交叉轴的起点对齐。
  • flex-end：交叉轴的终点对齐。
  • center：交叉轴的中点对齐。
  • baseline: 项目的第一行文字的基线对齐。
  • stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。

  1.  align-content属性

  • align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。就是当上面的属性中如果设置了项目超出宽度换行，那么项目就有可能变成多行的，这个属性就能设置多行排列的位置。

3231.PNG

.box {
  align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}

这个属性的取值有点像是竖着排列的 justify-content 可以参照一下两个属性的排列方式

  • flex-start：与交叉轴的起点对齐。
  • flex-end：与交叉轴的终点对齐。
  • center：与交叉轴的中点对齐。
  • space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。
  • space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。
  • stretch（默认值）：轴线占满整个交叉轴。

还有部分的属性是设定在项目上面的

  1. flex-grow属性

flex-grow 属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。 用这个属性可以设置一个容器当中的部分项目不会随着容器大小的改变而改变

  1.  flex-shrink属性

flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。与上面的 flex-grow 属性相反，可以设定一个项目在空间不足的时候不会缩小，只需要将 flex-shrink 的属性设定为 1

  1.  flex-basis属性

flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。可以将这个值设定一个确定的大小，那么这个项目的宽高将为设定的值，不会发生改变。

  1. 关于上面三个属性，可以简写为 flex属性

  • 日常中看到的最多的 flex：1 就是三个值的简写，能够让一个项目自适应的分配整个容器剩余的空间，可以用来写响应式页面的一些部分，这样就会随着页面的改变而改变它自身的大小

  • 关于 flex 还有一些比较细致的设置，不过使用不多，这里就只是做一个介绍：

  • flex : flex属性是flex-grow , flex-shrink 和 flex-basis的简写, 默认值为0 1 auto . 后两个属性可选 .

    • flex 属性的默认值为 :0 1 auto ( 不放大会缩小 )
    • flex 为 none : 0 0 auto ( 不放大也不缩小 )
    • flex 为 auto : 1 1 auto ( 放大且缩小 )
    • flex 为一个非负数字 n : 该数字为 flex-grow 的值 , 例 :

     flex：n；= flex-grow：n；

     flex-shrink：1；

     flex-basis：0%；

    • flex 为两个非负数字n1 , n2 : 分别为 flex-grow 和 flex-shrink 的值

     flex：n1 n2; = flex-grow：n1；

     flex-shrink：n2；

     flex-basis：0%；

    • flex 为一个长度或百分比 L ：视为 flex-basis 的值

     flex: L; = flex-grow：1；

     flex-shrink：1；

     flex-basis：L；

    • flex 为一个非负数字 n 和一个长度或百分比 L ：分别为 flex-grow 和 flex-basis 的值

     flex：n L；= flex-grow：n；

     flex-shrink：1；

     flex-basis：L;

总结

关于 flex 布局肯定是需要去熟练的，前端页面很多时候都需要用到这个布局方式，现在比较常用的一些需求也可以用过这个布局去实现，关于 flex 布局的调试，部分浏览器可以支持直接在浏览器上面进行一个属性的选择:

123122.PNG

这是谷歌浏览器自带的功能，能比较方便的去实时调试一个容器用不同的布局会呈现什么样的效果。

引用部分外部文章内容链接：
www.ruanyifeng.com/blog/2015/0…

avatar
文章
阅读
粉丝