flex布局（二）

最新推荐文章于 2023-04-10 15:06:46 发布

JJ_Smilewang

最新推荐文章于 2023-04-10 15:06:46 发布

阅读量252

点赞数 2

分类专栏：页面布局文章标签：前端

本文链接：https://blog.csdn.net/JJ_Smilewang/article/details/124175458

版权

页面布局专栏收录该内容

6 篇文章 0 订阅

订阅专栏

我们上篇文章主要介绍了flex布局中写在父元素上的常见属性，今天则给大家介绍下flex布局中子项常见属性。

1. flex-grow 定义项目的放大比例

flex-grow属性是定义项目的放大比例，也可以理解为表示占多少份数。主要作用是：分配剩余空间的。

/* flex-grow: <number>; 属性值为非负数 */

flex-grow:0;   /* 默认值为0，表示即使存在剩余空间，也不放大 */

①如果给其中一个子项设置 flex-grow: 1; 则表示这个项目把剩余空间都充满；

②如果给每个子项都设置 flex-grow: 1; 则表示每个项目会平均分配到相同的宽度。

<style>
    .box {
        display: flex;
        width: 700px;
        border: 1px solid red;
    }
    
    .item {
        width: 150px;
        height: 150px;
        background-color: pink;
    }
    
    .item:nth-child(2) {
        background-color: skyblue;
        flex-grow: 1;    /*给第二个子项增加flex-grow：1； 则表示它会把剩余空间都充满 */
    }
</style>
<body>
    <div class="box">
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
    </div>
</body>

上述代码得到的效果如上图所示，验证了前面所说的第①点。

.item {
     flex-grow: 1;   /*给每个子项增加flex-grow：1； 则表示它们会平均分配容器的宽度 */
     width: 150px;
     height: 150px;
     background-color: pink;
}
        
.item:nth-child(2) {
     background-color: skyblue;
}

将flex-grow:1；更改到每个子项下，就可以得到上述效果，从而验证了第②点。

2. flex-shrink 是否允许被压缩

我们都知道flex布局默认是不换行的，就算子项的宽度和大于容器的宽度，也不会换行，那么这时为了把这些子元素排列下，那么就会默认去压缩子项的宽度。

而flex-shrink属性，则是用于定义子项是否允许被压缩。

flex-shrink:1;    /* 1是默认值 表示允许被压缩 */

flex-shrink:0;    /* 表示不允许被压缩，保持设置的尺寸 */

代码验证：

<style>
    .box {
        display: flex;
        width: 700px;
        border: 1px solid red;
    }
    
    .item {
        width: 200px;
        height: 150px;
        background-color: pink;
    }
    
    .item:nth-child(2) {
        background-color: skyblue;
        flex-shrink: 0;    /* 设置为0，表示不允许被压缩 */
    } 
</style>
<body>
    <div class="box">
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
        <div class="item">4</div>
        <div class="item">5</div>
    </div>
</body>

容器宽度为700px，而每个子项宽度200px，明显一行排不下，又默认排在一行，所以只能压缩子项宽度。但是我给第二个子项设置了 flex-shrink:0; 后，看上图效果，可以发现它的宽度依旧为200px，没有变小。

3. flex-basis 设置宽度

flex-basis属性它的作用和width属性是一样的。但是优先级比width高，同时设置时，只会展示flex-basisi的宽度。

<style>
    .box {
        display: flex;
        width: 400px;
        border: 1px solid red;
    } 
    .item {
        flex-basis: 300px;     /*给子项增加flex-basis：300px；*/
        width: 200px;          /*给子项设置宽度width：200px；*/
        height: 150px;
        background-color: pink;
    }
</style>
<body>
    <div class="box">
        <div class="item"></div>
    </div>
</body>
通过上图可以发现，同时给子项设置flex-basis和width，最后子项的宽度以flex-basis设置的尺寸为准，当然前提条件是容器的宽度足够大，如果容器宽度比他们设置的尺寸小，那么子项宽度和容器宽度一致。

flex-basis属性我们平时不常使用，都是使用默认值auto，也不建议和width同时使用。

4. flex属性

flex 属性是 flex-grow 、flex-shrink和 flex-basis 属性的复合属性。

我们实际开发中flex-shrink和 flex-basis 属性，很少去设置，所以基本使用默认值。

因此，常直接用flex: 1;表示平均分布宽度 ，其他属性采用默认值等同于flex: 1 1 auto;

5.align-self 控制子项自己在侧轴上的排列方式

align-self 属性允许单个项目有与其他项目不一样的对齐方式，可覆盖 align-items 属性。
默认值为 auto，表示继承父元素的 align-items 属性，如果没有父元素，则等同于 stretch。

<style>
    .box {
        display: flex;
        width: 550px;
        height: 300px;
        border: 1px solid red;
        align-items: flex-start;
    }
    
    .item {
        width: 150px;
        height: 150px;
        background-color: pink;
        margin: 10px;
    }
    
    .item:nth-child(3) {
        align-self: flex-end;  /* 设置自己在侧轴上的排列方式 */
    }
</style>
<body>
    <div class="box">
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
        <div class="item">4</div>
    </div>
</body>

给第三个盒子单独设置了align-self: flex-end; 从上图效果可以看出它覆盖了父元素设置的align-self: flex-start; 变得与众不同了。

6. order 属性定义项目的排列顺序

数值越小，排列越靠前，默认为0。所以要想把后面的盒子排到前面来，则只需将其order值改为小于0就行。

<style>
    .box {
        display: flex;
        flex-wrap: wrap;
        width: 700px;
        height: 350px;
        border: 1px solid red;
    }
    .item {
        width: 150px;
        height: 150px;
        background-color: pink;
        margin: 10px;
    }
</style>
<body>
    <div class="box">
        <div class="item">1</div>
        <div class="item">2</div> 
        <div class="item" style="order: -1;">3</div>   <!-- 给第三个盒子的order改为-1 -->
        <div class="item">4</div>
        <div class="item">5</div>
        <div class="item" style="order: -2;">6</div>   <!-- 给第六个盒子的order改为-2-->
    </div>
</body>

因为order 默认值为0，代码中把第三个盒子的order改为-1，则值是第二小的，而第六个盒子的order为-2，值是最小的，所以根据值越小，排列越前，从而就得到了上图效果。

7.总结

以上就是flex布局中常见的作用于子项的属性，可以简单总结为：

① flex-grow：用于分配容器的剩余空间；
② flex-shrink：设置子元素是否允许被压缩；
③ flex-basis：设置子元素的宽度；
④ flex：复合属性，相当于同时设置了flex-grow 、flow-shrink和 flex-basis，但常用于表示flex-grow，其余两个属性使用默认值，不写出来，比如flex:1；
⑤ align-self：控制子项自己在侧轴上的排列方式；
⑥ order ：定义项目的排列顺序。

flex布局相较于传统布局而言，操作方便，布局极为简单，尤其是在移动端应用很广泛，因此这是每个前端工程师都必须掌握的布局方式。

flex布局的基本属性和用法，通过今昨天两篇文章，基本都介绍完了，孰能生巧，先明确每个属性的作用和特性，然后加以练习，就能很好的快速写出页面了。

JJ_Smilewang

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
flex布局（二）

我们上篇文章主要介绍了flex布局中写在父元素上的常见属性，今天则给大家介绍下flex布局中子项常见属性。1. flex-grow 定义项目的放大比例flex-grow属性是定义项目的放大比例，也可以理解为表示占多少份数。主要作用是：分配剩余空间的。/* flex-grow: <number>; 属性值为非负数 */flex-grow:0; /* 默认值为0，表示即使存在剩余空间，也不放大 */①如果给其中一个子项设置 flex-grow: 1; 则表示这个项目.
复制链接

扫一扫

专栏目录