1.等分布局
所谓等分布局就是指一行被分为若干行,每一列的宽度是相同的值。
代码实现如下:
body主体部分代码如下:
<!-- 父级盒子 -->
<div class="container">
<!-- 子集盒子 -->
<div class="content">天猫</div>
<div class="content">淘宝</div>
<div class="content">京东</div>
<div class="content">苏宁</div>
</div>
css样式代码如下:
.container{
width: 500px;
height: 200px;
border: 1px solid ;
/* 设置为弹性盒子 */
display: flex;
justify-content: center;
align-items: center;
}
.content{
width: 100px;
height: 100px;
border: 1px solid;
}
2.流式布局
所谓流式布局即为使用百分比设置宽高的布局,随着设备屏幕的改变,容器的宽高、位置地变化。
注意:百分比是指该容器的宽高是其父容器的百分之几。
通常盒子使用百分比来设置宽度时,都设置盒子的最大宽度和最小宽度。比如:max-width、min-width、max-height、min-height属性,IE7以上兼容。
当盒子在 min~max 两个值之间时,根据其父容器的百分比进行缩放;否则保持在最大值或最小值的状态。
主体盒子和子集盒子如下
<div class="contianer">
<div class="content"></div>
<div class="content"></div>
<div class="content"></div>
<div class="content"></div>
<div class="content"></div>
<div class="content"></div>
<div class="content"></div>
<div class="content"></div>
<div class="content"></div>
<div class="content"></div>
</div>
css样式如下:
.container{
width: 600px;
height: 600px;
border: solid 1px #008c8c;
resize: both;
overflow: hidden;
/* 设置弹性盒子 */
display: flex;
/* 设置主轴 */
flex-direction: row;
/* 是否换行 */
flex-wrap: wrap;
/* 对齐方式 */
align-content: flex-start;
}
.container div{
border: 1px solid hotpink;
width: 100px;
height: 100px;
flex: 1 1 auto;
}
3.圣杯布局
所谓圣杯布局是一个两侧宽度固定,中间宽度自适应的三栏布局。
代码示例如下
主体结构如下:
<div class="container">
<div class="head"></div>
<div class="main">
<div class="left"></div>
<div class="center"></div>
<div class="right"></div>
</div>
<div class="foot"></div>
</div>
css样式如下:
.container{
width: 500px;
height: 500px;
/* 给父级盒子设置为弹性盒子 */
display: flex;
flex-direction: column;
resize: both;
overflow: hidden;
border: 1px solid red;
}
.head,.foot,.left,.right{
/* head foot left right 按照比例自适应 */
flex: 0 0 30%;
border: hotpink 1px solid;
}
.main{
/* main自适应 */
flex: 1 1 auto;
/* 给main设置为弹性盒子,使得main内部的left和right可以按照比例自适应 */
display: flex;
border: solid 1px green;
}
.center{
/* center自适应 */
flex: 1 1 auto;
}
(第一次写博客,有些小激动!)