css3中 flex:1的使用

最新推荐文章于 2024-05-21 19:43:55 发布

土垚金鑫

最新推荐文章于 2024-05-21 19:43:55 发布

阅读量1.1w

点赞数 2

分类专栏： css css3 flex的一个用法文章标签： css css3 html5 html

本文链接：https://blog.csdn.net/weixin_44994731/article/details/103886171

版权

css 同时被 3 个专栏收录

20 篇文章 1 订阅

订阅专栏

css3

13 篇文章 1 订阅

订阅专栏

flex的一个用法

1 篇文章 1 订阅

订阅专栏

案例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[左右])
在这里插入图片描述
代码如下：

<!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设置等宽，让所有弹性盒模型对象的子元素都有相同的长度，且忽略它们内部的内容：
如下图所示
在这里插入图片描述
代码如下：

<!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">
    <!--设置flex:1后，宽度不起作用-->
    <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">
    <!--设置flex:1后，宽度不起作用-->
    <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>

土垚金鑫

关注

2
点赞
踩
11

收藏

觉得还不错? 一键收藏
0
评论
css3中 flex:1的使用

案例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[左右])-...
复制链接

扫一扫