css双列布局-flex

冫水阔落

已于 2022-03-26 19:07:06 修改

阅读量1.4k

点赞数

文章标签： css

于 2022-03-26 19:04:48 首次发布

本文链接：https://blog.csdn.net/HAINIHAOya/article/details/123761381

版权

css双列布局-flex

通过Flexbox可以快速实现双列布局，主要通过"flex: 1"这条弹性项属性给内容区申请到父盒子的所有剩余空间，并且可以给弹性项设置"position"属性调整弹性项内部的子盒子细节。
现在给类名为"container"的父盒子添加"display: flex"属性，使该盒子成为弹性盒容器。继续给类名为"left"的弹性项盒子添加"width: 100px"属性。最后给类名为"right"的弹性项盒子添加"flex: 1"属性。由于弹性项盒子默认占满弹性容器盒子的所有高度，所以两个弹性项盒子的高度也是自适应。右边的内容区宽度会占满弹性容器盒子的剩余空间，所以宽度也是自适应的。

<!DOCTYPE html>
<html>
    <head>
        <meta charset=utf-8>
        <style type="text/css">
            * {
                margin: 0;
                padding: 0;
                box-sizing: border-box;
            }
            .container {
                border: 1px solid black;
                display:flex;
            }
            .left {
                border: 1px solid black;
                width:100px;
            }
            .right {
                border: 1px solid greenyellow;
                flex:1;
            }
        </style>
    </head>
    <body>
    	<section class="container">
            <article class="left"><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /></article>
            <article class="right"></article>
        </section>
    </body>
</html>```

冫水阔落

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css双列布局-flex

css双列布局-flex通过Flexbox可以快速实现双列布局，主要通过"flex: 1"这条弹性项属性给内容区申请到父盒子的所有剩余空间，并且可以给弹性项设置"position"属性调整弹性项内部的子盒子细节。现在给类名为"container"的父盒子添加"display: flex"属性，使该盒子成为弹性盒容器。继续给类名为"left"的弹性项盒子添加"width: 100px"属性。最后给类名为"right"的弹性项盒子添加"flex: 1"属性。由于弹性项盒子默认占满弹性容器盒子的所有高度，
复制链接

扫一扫