前端基础-CSS-弹性盒-剩余宽高

最新推荐文章于 2023-08-30 09:54:26 发布

码码大海

最新推荐文章于 2023-08-30 09:54:26 发布

阅读量507

点赞数

分类专栏： CSS 文章标签： css 前端 css3

本文链接：https://blog.csdn.net/weixin_43254742/article/details/126131386

版权

CSS 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

1、剩余宽度

 <style>
         .box{
                width: 500px;
                height:500px;
                border: 2px solid black;
                margin: 100px auto;
                display: flex;

                /* flex-direction: column; */
            }
            .box div{
                width: 100px;
                height: 100px;
                border: 1px dashed red ;
                box-sizing: border-box;
            }
            .box div:nth-child(2){
                flex: 1;
                /* 占满剩余空间 */
            }
            
            
    </style>
      

    <div class="box">
        <div>a</div>
        <div>b</div>
        <div>c</div>
        
    </div>

在这里插入图片描述

2、剩余高度

<style>
         .box{
                width: 500px;
                height:500px;
                border: 2px solid black;
                margin: 100px auto;
                display: flex;
                flex-direction: column;

                /* flex-direction: column; 设置方向*/
            }
            .box div{
                width: 100px;
                height: 100px;
                border: 1px dashed red ;
                box-sizing: border-box;
            }
            .box div:nth-child(2){
                flex: 1;
                /* 占满剩余空间 */
            }
            
            
    </style>
      

    <div class="box">
        <div>a</div>
        <div>b</div>
        <div>c</div>
        
    </div>

在这里插入图片描述

3、三栏布局

<style>
            *{
                margin: 0;
                padding: 0;
            }
            html,body{
                height: 100%;
            }
            body{
                display: flex;
            }
            div:nth-child(2n){
                width: 100px;
                background: gray;
            }
            div:nth-child(2n-1){
                flex:1;
                background: yellow;
            }
                
        </style>
            <div >1</div>
            <div >2</div>
            <div >3</div>```
![在这里插入图片描述](https://img-blog.csdnimg.cn/524d3d9b23d84ae3ac98cb43e0aa3ee9.png#pic_center)

```bash
<body>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        html,body{
            height: 100%;
        }
        body{
            display: flex;
            flex-direction: column;
        }
        div:nth-child(2n){
            /* width: 100px; */
            height: 100px;
            background: gray;
        }
        div:nth-child(2n-1){
            flex:1;
            background: yellow;
        }
            
    </style>
        <div >1</div>
        <div >2</div>
        <div >3</div>