布局方式-flex布局

1、弹性盒子

2、盒子本来就是并列的

3、指定宽度即可

<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>

这个是一整块占据了800像素，如果将子元素多加几块

<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>

扫描二维码关注公众号，回复： 5145613 查看本文章

页面三栏布局

<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>

布局方式-flex布局

猜你喜欢