弹性盒子布局
1.概述
弹性盒子布局又称为弹性布局，是W3C于2009年推出的一种布局方式，可以简单、快速、响应式的实现各种布局页面。使用弹性布局可以创建对浏览器窗口响应良好的流动界面。其主要是通过包含元素之间分配容器块中未使用的空间来实现的。
2.弹性布局原理
弹性布局一般情况是由弹性布局的容器(flex containner)和弹性布局的伸缩项目(flex item)。
其中:flex containner是指采用了弹性布局的DOM元素
flex item是指容器中包含的子DOM元素
由justfy-content属性确定主轴方向，然后伸缩项目(flex item)默认会沿着主轴进行排列，然后单个伸缩项目的大小由main size和cross size 决定宽度和高度。
3.弹性布局的相关属性
(1).弹性布局基本的相关属性
弹性布局相关的属性
display：设置display的值为flex的时候，创建弹性布局的容器
flex-direction:设置伸缩流的方向。其值主要有:
row:默认值，主轴方向为水平方向,伸缩项目的排列顺序于页面的文档顺序一致。
row-reverse:主轴方向为水平方向,伸缩项目的排列顺序于页面的文档顺序相反(实质就是反转)。
column:主轴为垂直方向，排列顺序为从从上到下的顺序排列。
column-reverse:主轴为垂直方向，排列顺序为从从下到上的顺序排列(实质就是反转)。
flex-wrap:伸缩流换行，实质就是当内容排布在主轴方向上的时候，如果内容量太多，是否选择换行的问题。其
值主要有以下几个:
nowrap:默认值伸缩项目只沾满容器主轴方向上的一行，由于限制不换行，所以可能会出现重叠或者
是内容超出范围的情况。
wrap:当伸缩项目沾满容器主轴方向上的一行的时候，多出来的部分将会出现换行。
flex-flow:伸缩流，包含了伸缩流换行和方向，是上述两个值的符合属性。
justfy-content:设置伸缩项目在主轴方向进行排布的时候的对齐方式，其值主要由以下几个:
flex-start:默认值，伸缩项目从容器的最左侧开始排布
flex-end:伸缩项目从容器的最右侧开始排布
center:伸缩项目位于容器的中心
space-between:伸缩项目位于各行之间留有空白的容器内部，注意:从两边开始，然后中间的每一个间隔
之间都有空白。
space-around:伸缩项目均匀的分布在中间，然后第一个伸缩项目之前，最后一个伸缩项目之后，每一
个伸缩项目都使用空格隔开。
flex:用于设置或者是检索弹性模型对象的子元素如何分配空间，是flex-grow、flex-shrink和flex-basic
属性的一个简写，也即是我们所说的伸缩性，其默认值值为:flex:0 1 auto;我们在理解这一个参数的时
候可以理解为是整个区域划分的份数。
order:设置子元素出现的顺序，默认值是0，设置的值越小就最先出现在前面。
flex-grow:扩展比率,设置项目相对于其他灵活的项目的进行扩展的量，其值是一个数字。
flex-shrink:收缩比率，设置项目相对于其他灵活的项目的进行收缩的量，其值是一个数字。
(2).弹性布局基本的相关属性代码实现以及效果
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<style type="text/css">
*{
margin: 0px;
padding: 0px;
}
p{
font-size: 28px;
font-family: "宋体";
color: #00007F;
}
.containner{
display: flex;
justify-content: flex-start;
flex-wrap: nowrap;
}
.box{
width: 50px;
height: 50px;
border: 1px solid black;
}
/**------------flex-----------------**/
.a{
background-color: #00AA00;
}
.b{
background-color: #ff5500;
flex: 1 1 auto;
}
.c{
background-color: #55ffff;
}
/**------------flex + order--------------------**/
.d{
background-color: #00AA00;
flex: 1;
order: 2;
}
.e{
background-color: #ff5500;
flex: 1;
order: 3;
}
.f{
background-color: #55ffff;
flex: 1;
border: 1;
}
/**------------justfy-content--------------------**/
.containner1{
display: flex;
justify-content: flex-start;
flex-wrap: nowrap;
}
.containner2{
display: flex;
justify-content: flex-end;
flex-wrap: nowrap;
}
.containner3{
display: flex;
justify-content: space-around;
flex-wrap: nowrap;
}
.g{
background-color: #00AA00;
}
.h{
background-color: #ff5500;
}
.i{
background-color: #55ffff;
}
</style>
<body>
<p>测试属性:flex: 1 1 auto;等价于:flex-grow:1,flex-shrink:1,flex-basic:auto</p>
<div class="containner">
<div class="box a">
</div>
<div class="box b">
</div>
<div class="box c">
</div>
</div>
<p>测试属性:flex实现区域的等比划分;order属性实现区域的先后排布顺序</p>
<div class="containner">
<div class="box d">
</div>
<div class="box e">
</div>
<div class="box f">
</div>
</div>
<p>justfy-content属性测试</p>
<p>justfy-content:flex-start</p>
<div class="containner1">
<div class="box g">
</div>
<div class="box h">
</div>
<div class="box i">
</div>
</div>
<p>justfy-content:flex-end</p>
<div class="containner2">
<div class="box g">
</div>
<div class="box h">
</div>
<div class="box i">
</div>
</div>
<p>justfy-content:space-around</p>
<div class="containner3">
<div class="box g">
</div>
<div class="box h">
</div>
<div class="box i">
</div>
</div>
</body>
4.弹性布局的实际应用例子(内容排布随着屏幕宽度的变化而发生改变)
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<style type="text/css">
*{
margin: 0px;
padding: 0px;
}
.containner{
display: flex;
justify-content: flex-start;
flex-wrap: wrap;
}
.box{
width: 250px;
height: 250px;
border: 1px solid #00AA00;
margin: 50px;
font-size: 25px;
font-family: "宋体";
color: #00009f;
background-color: #aaff7f;
text-align: center;
}
.box:hover{
background-color: #ffff00;
color: #000000;
}
#author{
font-size: 18px;
color: #FF0000;
margin-left: 50px;
}
</style>
<body>
<div class="containner">
<div class="box cont1">
<p>江雪</p>
<p id="author">---柳宗元</p>
<p>千山鸟飞绝,</p>
<p>万径人踪灭。</p>
<p>孤舟蓑笠翁,</p>
<p>独钓寒江雪。</p>
</div>
<div class="box cont2">
<p>静夜思</p>
<p id="author">---李白</p>
<p>床前明月光,</p>
<p>疑是地上霜。</p>
<p>举头望明月,</p>
<p>低头思故乡。</p>
</div>
<div class="box cont3">
<p>鸟鸣涧</p>
<p id="author">---王维</p>
<p>人闲桂花落,</p>
<p>夜静春山空。</p>
<p>月出惊山鸟,</p>
<p>时鸣春涧中。</p>
</div>
</div>
</body>
290
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
