flex 弹性盒子元素自适应占满一行/列

最新推荐文章于 2024-03-06 14:14:57 发布

阿源不秃，天理难容

最新推荐文章于 2024-03-06 14:14:57 发布

阅读量1.2w

点赞数 5

文章标签： css3 flex

本文链接：https://blog.csdn.net/weixin_42945998/article/details/105475101

版权

flex 弹性盒子元素自适应占满一行/列

有时候我们想要这样的效果：

一些子元素固定宽或者是高，另外的子元素希望自动占满一行或者是一列

在这里插入图片描述

重点：子元素属性 flex ：auto；

代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>弹性盒</title>
</head>
<style>
    .flex-container {
        display: -webkit-flex;
        display: flex;
        width: 100%;
        height: 100px;
        background-color: lightgrey;
    }
    
    .flex-item {
        background-color: cornflowerblue;
        width: 100px;
        height: 100px;
    }
    
    .flex-item1 {
        background-color: red;
        height: 100px;
        /* align-self: stretch; */
        flex: auto;
    }
    
    .flex-container1 {
        height: 300px;
        width: 100%;
        display: flex;
        flex-direction: column;
    }
    
    .flex-container1 div {
        width: 100%;
    }
    
    .flex-item2 {
        height: 70px;
        background-color: skyblue;
    }
    
    .flex-item21 {
        flex: auto;
        background-color: tomato;
    }
</style>
</head>

<body>
    <div class="flex-container">
        <div class="flex-item">flex item 1</div>
        <div class="flex-item1">flex item 2</div>
        <div class="flex-item">flex item 3</div>
    </div>
    <br>
    <div class="flex-container1">
        <div class="flex-item2">flex item 1</div>
        <div class="flex-item21">flex item 2</div>
        <div class="flex-item2">flex item 3</div>
    </div>
</body>

</html>

阿源不秃，天理难容

关注

5
点赞
踩
4

收藏

觉得还不错? 一键收藏
3
评论
flex 弹性盒子元素自适应占满一行/列

flex 弹性盒子元素自适应占满一行/列重点：子元素属性 flex ：auto；代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, init...
复制链接

扫一扫