.弹性盒子
.盒子本来就是并列的
.指定宽度即可
<style>
.container {
width: 800px;
height: 200px;
display: flex;
border: 1px solid black;
}
.flex {
background: red;
margin: 5px;
flex: 1;
}
</style>
<body>
<div class="container">
<div class="flex">
flex
</div>
</div>
</body>
<div class="container">
<div class="flex">
flex
</div>
<div class="flex">
flex
</div>
<div class="flex">
flex
</div>
<div class="flex">
flex
</div>
<div class="flex">
flex
</div>
<div class="flex">
flex
</div>
</div>
会发现都被平分了有木有。
如果将某一个改成flex为2。会发现占了两分，其它多平分。也就是其中一份是2，2/7。其它都是1，1/7。
如果要某一个固定的高度。我们设置为50px。flex:none。
可以看到固定的宽度，其余的再进行平分，就是flex为2的占（800-50）／6,2/6。其它都是1，1/6。
普通布局
<style>
.container {
width: 800px;
height: 200px;
display: flex;
}
.left {
background: red;
width: 200px;
}
.right {
background: blue;
flex: 1;
}
</style>
<body>
<div class="container">
<div class="left">
左
</div>
<div class="right">
右
</div>
</div>
</body>
页面三栏布局
<style media="screen">
html *{
padding: 0;
margin: 0;
}
.layout article div{
min-height: 100px;
}
</style>
<body>
<section class="layout flexbox">
<style>
.layout.flexbox .left-center-right{
display: flex;
}
.layout.flexbox .left{
width: 300px;
background: red;
}
.layout.flexbox .center{
flex: 1;
background: yellow;
}
.layout.flexbox .right{
width: 300px;
background: blue;
}
</style>
<article class="left-center-right">
<div class="left"></div>
<div class="center">
<h2>flexbox</h2>
</div>
<div class="right"></div>
</article>
</section>
</body>