css --- > 使用flex写一个常见的两列布局

最新推荐文章于 2024-06-11 12:15:54 发布

栗子好好吃

最新推荐文章于 2024-06-11 12:15:54 发布

阅读量8.6k

点赞数

分类专栏： CSS 文章标签：可以用!

CSS 专栏收录该内容

25 篇文章 0 订阅

订阅专栏

flex-grow:

<style>
    .content {
        display: flex;
    }
    .aside.left {
        width:200px;
        border:3px solid black
    }
    .aside.main0 {
        flex-grow: 0;
        border:3px solid red;
    }
    .aside.main1 {
        flex-grow: 1;
        border:3px solid red;
    }
    .aside {
        margin-top:5px;
        height:100px;
    }
</style>
<body>
<div class="content">
    <div class="aside left ">flex-grow:0</div>
    <div class="aside main0">flex-grow:0</div>
</div>
<div class="content">
    <div class="aside left ">flex-grow:0</div>
    <div class="aside main1">flex-grow:1</div>
</div>
</body>

在这里插入图片描述
order:

// 3列布局
<style>
.content{
    display:flex;
}
.aside.left{
    order:1;
    border:5px solid black;
    width:200px;
}
.aside.right{
    order:3;
    border:5px solid black;
    width:200px;
}
.aside.main{
    order:2;
    flex-grow:1;
    border:5px solid red;
}
.aside {
    height:300px;
}
</style>
<div class="content">
    <div class="aside left">order:1</div>
    <div class="aside right">order:3</div>
    <div class="aside main">order:2</div>
</div>

在这里插入图片描述
参考 CSS常见的2列、3列布局

栗子好好吃

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css --- > 使用flex写一个常见的两列布局

flex-grow:<style> .content { display: flex; } .aside.left { width:200px; border:3px solid black } .aside.main0 { flex-grow: 0; border...
复制链接

扫一扫

专栏目录