css3中 flex:1的使用

- 日理万妓 2023-06-28 08:38 13阅读 0赞

案例1：设置div的flex:1 会得到剩余的宽度  
假设a是父组件，用flex布局设置子控件左右居中，width:400px；display:flex;  
b是子控件，居左。width：150px;  
c是子控件，居右。width不给，设置flex：1；  
那么c.width = a.width-(a的margin和padding\[左右\])-b.width–(b的margin和padding\[左右\])-(c的margin和padding\[左右\])  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk5NDczMQ_size_16_color_FFFFFF_t_70]  
代码如下：

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            .stya{
                display: flex;
                border: 1px solid red;
                width:400px
            }
            /*.stya div{
                flex: 1;
            }*/
            .styb{
                margin: 10px;
                width: 200px;
                border: 1px solid black;
                height: 200px;
            }
            .styc{
                border:1px solid green;
                margin: 10px;
                flex: 1;
            }
        </style>
    </head>
    <body>
    <div class="stya">
        <div class="styb"></div>
        <div class="styc"></div>
    </div>
    
    </body>
    </html>

案例2：使用flex:1 给div设置等宽，让所有弹性盒模型对象的子元素都有相同的长度，且忽略它们内部的内容：  
如下图所示  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk5NDczMQ_size_16_color_FFFFFF_t_70 1]  
代码如下：

<!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <title>flex的使用</title>
        <style>
            #main,#main2
            {
                width:220px;
                height:300px;
                border:1px solid black;
                display:flex;
            }
    
            #main div,#main2 div
            {
                flex:1;
                margin:5px;
            }
        </style>
    </head>
    <body>
    
    <div id="main">
        
        <div style="background-color:coral; width: 40px">红色</div>
        <div style="background-color:lightblue; width:80px">蓝色</div>
        <div style="background-color:lightgreen;">带有更多内容的绿色 div</div>
    </div>
    
    <div id="main2">
        
        <div style="background-color:coral; width: 40px">红色</div>
        <div style="background-color:lightblue; width:80px">蓝色</div>
    
    </div>
    
    <p><b>注意:</b> Internet Explorer 9 及更早版本不支持 flex 属性。</p>
    <p><b>注意:</b> Internet Explorer 10 通过 -ms-flex 属性来支持。 IE11 及更新版本完全支持 flex 属性 (不需要 -ms- 前缀)。</p>
    <p><b>注意:</b> Safari 6.1 (及更新浏览器) 通过 -webkit-flex 属性支持。</p>
    <p><b>注意:</b> 设置flex:1后，宽度不起作用。</p>
    
    </body>
    </html>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk5NDczMQ_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/2020010810053336.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk5NDczMQ==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk5NDczMQ_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200108101027146.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk5NDczMQ==,size_16,color_FFFFFF,t_70