布局方式-flex布局

发布时间：2020-12-15 01:50:03 所属栏目：百科来源：网络整理

导读：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

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>

页面三栏布局

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!