Flexbox布局（伸缩布局盒模型）
css3引入了一种新的布局模式--flexbox布局，即伸缩布局盒模型（flexible box），用来提供一个更加有效地方式制定、调整和分布一个容器里项目布局，即使他们的大小是未知或者动态的
flexbox布局常用于设计比较复杂的页面，可以轻松的实现屏幕和浏览器窗口大小发生变化时保持元素的相对位置和大小不变，同时减少了依赖于浮动布局实现元素位置的定义以及重置元素的大小
flexbox布局在定义伸缩项目大小时伸缩容器会预留一些可用空间，让你可以调节伸缩项目的相对大小和位置。例如，你可以确保伸缩容器中的多余空间平均分配多个伸缩项目，当然，如果你的伸缩容器没有足够大的空间放置伸缩项目时，浏览器会根据一定的比例减少伸缩项目的大小，使其不溢出伸缩容器。综合而言，flexbox布局主要具有以下几点：
（1）屏幕和浏览器窗口大小发生改变也可以灵活调整布局
（2）可以指定伸缩项目沿着主轴或侧轴按比例分配额外空间（伸缩空间额外空间），从而调整伸缩项目的大小
（3）可以指定伸缩项目沿着主轴或侧轴将伸缩容器额外空间，分配到伸缩项目之前、之后或之间
（4）可以指定如何将垂直于元素布局轴的额外空间分布到该元素的周围
（5）可以控制元素在页面上的布局方向
（6）可以按照不同于文档对象模型（DOM）所指定排序方式对屏幕上的元素重新排序。也就是说可以在浏览器中渲染中不按照文档流先后顺序重排伸缩项目顺序。
flexbox规范版本众多，浏览器对此语法支持度也各有不同。
flexbox由伸缩容器和伸缩项目组成。
（1）创建一个flex容器
任何一个flexbox布局的第一步是需要创建一个flex容器。为此给元素设置display属性的值为flex或inline-flex。设置为flex的容器被渲染为一个块级元素，而设置为inline-flex的容器则渲染为一个行内元素。在Safari浏览器中，需要添加前缀-webkit-，当容器设置为flex布局后，属性float、clear、vertical-align将失效
.cont{
display:flex;
display:-webkit-flex;
}（2）flex项目显示
采用flex布局的元素称为flex容器，它的所有子元素为容器的成员，称为flex项目 简称项目
伸缩项目沿着伸缩容器内的一个伸缩行定位。通常每个伸缩容器只有一个伸缩行
在设计Flexbox 时的有一个重要的部分是更改伸缩行的方向。默认情况下，伸缩行和文本方向一致：从左至右，从上往下。
可以通过flex-direction来改变主轴方向修改为column（竖列）、rtl（从右往左），其默认值为row。设置了主轴方向不仅仅文字会沿着主轴方向书写，而且 伸缩行也改变了方向，并更改了页面的布局。
为了描述抽象的书写模式，Flexbox 使用 主轴 和 侧轴的概念。伸缩行跟随主轴。侧轴则垂直于主轴。
起点、终点和各轴的方向名称如下
主轴方向：main start
主轴终点：main end
主轴方向：main direction
侧轴起点：cross start
侧轴终点：cross end
侧轴方向：cross Direction
伸缩容器的属性
flex-direction：伸缩流的方向。
该值表示伸缩项目根据书写模式的方向布局。默认值为row，可以取row-reverse、column、column-reverse
row-reverse：主轴起点和主轴终点交换。如果书写模式（改变伸缩行的方向）是从左向右，伸缩项目则是从右向左显示
column：主轴和侧轴交换。如果书写系统是垂直的，那么伸缩项目也是垂直的
column-reverse：和column一样，但是方向相反
justify-content 主轴对齐
伸缩容器的justify-content属性用于调整主轴上伸缩项目的位置。可能的值为
flex-start（默认）：左对齐
flex-end：右对齐
center：居中对齐
space-between：两端对齐，项目之间的间隔都相等
space-around：每个项目两侧的间隔相等，所以，项目之间的间隔比项目与边框 的间隔大一倍
html代码
<div class="flex-container">
<div class="flex-item">flex-item1 flex-item1 flex-item1</div>
<div class="flex-item">flex-item2 flex-item2 flex-item2 </div>
<div class="flex-item">flex-item3 flex-item3 flex-item3 </div>
</div>.flex-container{
flex-direction: column;
display: flex;
display:-webkit-flex;
width:600px;
height:500px;
background-color: #4F8AE1;
justify-content: center;
}
.flex-item{
background-color: #14DED8;
width:100px;
height:100px;
margin: 15px;
}运行结果
align-items 侧轴对齐
align-items是一个和justify-content想呼应的属性align-items调整伸缩项目在侧轴上的定位方式。可能的值有：
flex-start：侧轴起点对齐
flex-end：侧轴终点对齐
center：侧轴中点对齐
baseline：项目的第一行文字的基线对齐
stretch（默认值）：如果项目未设置高度或为auto，将占满整个容器的高度
将上述例子中的对齐方式改为侧轴居中对齐align-items:center
flex-wrap 伸缩行换行
目前为止，每个伸缩容器都有且只有一个伸缩行。使用flex-wrap可以为伸缩容器创建多个伸缩行。这个属性接受以下值
nowrap(默认）：不换行
wrap：换行，第一行在上方
wrap-reverse：换行，第一行在下方
如果flex-wrap设置为wrap，在一个伸缩行容不下所有伸缩项目时，伸缩项目会换行到一条新增的伸缩行上，新增的伸缩行根据侧轴的方向添加
.flex-container{
flex-direction: column;
display: flex;
display:-webkit-flex;
width:400px;
height:300px;
background-color: #4F8AE1;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
}
.flex-item{
background-color: #14DED8;
width:50px;
height:50px;
margin: 10px;}
align-centent 项目多行显示时，多行在flex容器的侧轴方向对齐方式
align-centent会更改flex-wrap的行为。它和align-items相似，但是不是对齐伸缩项目，它对齐的是伸缩行。它可以接受的值为
- stretch (默认)：侧轴伸缩行占满整个容器
- flex-start：侧轴起点对齐
- flex-end：侧轴终点对齐
- center：侧轴中线对齐
- space-between：侧轴两端对齐
- space-around：轴线两侧的间距相同
flex-direction: column;
display: flex;
display:-webkit-flex;
width:400px;
height:300px;
background-color: #4F8AE1;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
align-content:center;
flex-flow伸缩方向与换行
flex-flow是flex-direction和flex-wrap的缩写
flex-flow:[flex-direction][flex-wrap]
伸缩项目的属性
一个伸缩项目是一个伸缩容器的子元素。伸缩容器中的文本也被视为一个伸缩项目
伸缩项目中的内容与普通流一样。举例来说，当一个伸缩项目被设置为浮动，你依然可以在这个伸缩项目中放置一个浮动元素。
伸缩项目都有一个主轴长度和一个侧轴长度。主轴长度是伸缩项目在主轴上的尺寸。侧轴长度是伸缩项目在侧轴上的尺寸。或者说，一个伸缩项目的宽或高取决于伸缩容器的轴
下面的属性可以调整伸缩项目的行为
order 显示顺序
order是最简单明了的属性。设置伸缩项目的order可以调整它们渲染是的顺序。数字越小，排序越靠前 默认值为0
.flex-container{
display: flex;
display:-webkit-flex;
width:400px;
height:300px;
background-color: #4F8AE1;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
align-content:center;
}
.flex-item{
background-color: #14DED8;
width:50px;
height:50px;
margin: 10px;
}
.flex-item:last-child{
order:-1;
-webkit-order:-1;
}结果最后一个伸缩项目最先显示
flex-grow属性定义项目的放大比例，默认值为0
即如果存在剩余空间，也不放大，如果所有项目的flex-grow属性都为1，则它们将等分剩余空间（如果存在剩余空间）。如果一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍
.flex-container{
/*flex-direction: column;*/
display: flex;
display:-webkit-flex;
width:500px;
height:300px;
background-color: #4F8AE1;
/*justify-content: center;*/
/*align-items: center;*/
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
align-content:center;
}
.flex-item{
background-color: #14DED8;
width:50px;
height:50px;
margin: 10px;
flex-grow:1;
}
.flex-item:first-child{
/* flex:2;
-webkit-flex:2; */
flex-grow:2;
}
flex-shrink属性定义项目的缩小比例，默认值为0
属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。值越大，项目缩小的越多
flex-basic属性定义了在分配多余空间之前，项目占据的主轴空间。浏览器根据这个属性极端主轴是否有多余的空间，它的默认值为auto，即项目本来的大小。它可以设定跟项目的宽高属性一样的值，则项目将占据固定空间
flex属性是flex-grow,flex-shrink和flex-basis的简写。默认值诶0,1，auto。该属性有两个快捷值：auto（1 1 auto）和none（0 0 auto）
flex伸缩布局的特殊使用
margin外边距
在伸缩盒中，margin：auto能做很多事，将一个伸缩项目的margin设为margin：auto，其会合并剩余的空间，可以把伸缩项目挤到其他位置。
.flex-item:first-child{
margin:auto;
}
将所有伸缩项目的margin都设为auto，其结果为所有伸缩项目都垂直居中
flex伸缩性
flex指定了一个伸缩项目该如何分配主轴上的剩余空间
flex：[number]
该语法制定了一个数字，代表了这个伸缩项目该占用的剩余空间比例
flex布局可以实现等高布局
<div class="container">
<div class="item1">chengakljfalkje;alejaiorjo;aOjffffffffffffffffffffffffffffff</div>
<div class="item2">ajfkl;seeeeejlaj;eiwoqjt;fa;tiiiichengakljfalkje;alejaiorjo;aOjffffffffffffffffffffffffffffffcheng
akljfalkje;alejaiorjo;aOjffffffffffffffffffffffffffffffchengakljfalkje;alejaiorjo;aOjffffffffffffffffffffffffffffffc
hengakljfalkje;alejaiorjo;aOjffffffffffffffffffffffffffffff</div>
</div> .container{
width:800px;
background-color: #98F59E;
overflow: hidden;
display: flex;
}
.item1,.item2{
float:left;
width:300px;
background-color: #96FCEF;
word-wrap: break-word;
margin-left:10px;
}运行结果：
扫一扫
550
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
