阅读 99

flex布局小结

每天做个总结吧,坚持就是胜利!

    /**
        @date 2021-07-07
        @description flex布局小结
    */
复制代码

壹(序)

flex是一种弹性布局,何为弹性,比如下面DOM和样式

<div class="container">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
</div>

.container {
    width: 400px;
    height: 400px;
    margin: 100px auto;
    background-color: skyblue;
}

.item {
    float: left;
    width: 100px;
    height: 100px;
    background-color: pink;
}
复制代码

是这样子的:

float布局.jpg 但是将子元素宽度设置为200px后,就会换行:

float换行.jpg 而设置container元素为flex布局后是这样子,和宽带刚好铺满一样,这就是弹性:

float布局.jpg

贰(容器与项目)

flex布局中有两个元素需要了解:

容器元素,就是上面的container元素,在这个元素中设置display为flex开启flex布局,容器默认有主轴交叉轴,主轴默认是横轴,交叉轴默认是竖轴

项目元素,就是上面的item元素,是容器元素下的子项

叁(容器元素相关)

  1. flex-direction:设置主轴方向
row:默认值,主轴方向为水平方向,从左边开始
row-reverse:主轴方向为水平方向,从右边开始
column:主轴方向为垂直方向,从上边开始
column-reserve:主轴方向为垂直方向,从下边开始
复制代码
  1. flex-wrap:设置是否换行,正常情况下,在子元素宽度超过容器元素宽度时(如上情况),是一个弹性的减小子元素宽度,通过这个属性可以控制是否是否换行
nowrap: 默认值,不换行
wrap: 换行
wrap-reserve: 换行,并且反转
复制代码
  1. justify-content:项目元素在主轴上的对齐方式
flex-start: 默认值,左对齐
flex-end: 右对齐
center: 中间对齐
space-around: 两侧项目空白部分为中间项目之间的空白部分的一半
space-between: 两侧项目对齐,中间空白部分均分
space-evenly: 所有空白部分均分
复制代码
  1. align-items:项目元素在交叉轴上的对齐方式
stretch:默认值,如果项目元素height为auto或未设置则拉伸到整个容器元素
flex-start:以交叉轴起点对齐
flex-end:以交叉轴终点对齐
center:以交叉轴中心点对齐
baseline:以项目元素的第一行字的baseline对齐
复制代码

肆(项目元素相关)

  1. order:设置项目元素的顺序值,根据此值进行排列,越小排列越靠前,默认为0

  2. flex-grow:设置项目元素的放大比例,类似于根据此值分配百分占比,默认为0(即不放大),比如三个元素的flex-grow分别为1,2,1,那么中间的元素占50%,其他两个占25%

  3. flex-shrink:设置项目元素的缩小比例,默认为1,在项目元素整体宽度大于容器元素时,项目元素的缩小根据此值进行计算,如:

<style>
.container {
    width: 600px;
    height: 400px;
    margin: 100px auto;
    background-color: skyblue;
    display: flex;
    justify-content: space-evenly;
}

.item {
    width: 200px;
    height: 100px;
    background-color: pink;
}

.item1 {
    flex-shrink: 3;
}
.item2 {
    flex-shrink: 3;
}
</style>

<div class="container">
    <div class="item1 item">flex-shrink: 3</div>
    <div class="item2 item">flex-shrink: 3</div>
    <div class="item3 item">flex-shrink: 1</div>
    <div class="item4 item">flex-shrink: 1</div>
</div>
复制代码

此时需要进行200px的缩小,那么会根据所有项目元素的flex-shrink值的总和进行计算,此时为(200 / 8 = 25px),然后进行缩小分配,也就是说item1和item2缩小之后宽度为(200 - 25 * 3 = 125px),而其他两个缩小之后为(200 - 25 * 1 = 175px)

  1. align-self:单个项目元素在交叉轴上的对齐方式,可以覆盖align-items,默认为auto,表示继承容器元素的align-items属性,其他值与align-items一样
文章分类
前端
文章标签