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>