css三列布局-flex

最新推荐文章于 2024-10-30 23:15:49 发布

在去幸福的路上

最新推荐文章于 2024-10-30 23:15:49 发布

阅读量2.5k

点赞数

文章标签： css

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

版权

css三列布局-flex

相比于浮动和定位，使用Flexbox布局实现三列布局要更好，因为弹性容器的高度会根据最高的弹性项进行修正，不会出现明显的台阶式效果。Flexbox实现三列布局的特点为简单、使用、强大，核心思路为设置中间内容盒子的"flex: 1"属性，让中间内容区的宽度自适应，独自占据弹性容器的全部剩余空间。
现在给类名为"container"的盒子添加"display: flex"属性，使该盒子成为弹性容器。再给类名为"left"和"right"的盒子添加"width: 100px"属性，最后给类名为"center"的盒子添加"flex: 1"属性，使该盒子占据容器盒子的全部剩余空间。此时会发现即使三个子盒子的内容高度不同，但容器和子会根据最高的子元素进行修正，并且没有出现浮动和定位中的台阶式效果。

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