flex布局
一 . flex布局的简单介绍
我们之前已经学过一些布局模型，比如说浮动，绝对定位等等，但是 浮动布局作为一个老式的页面布局，无法处理布局图形的高度和间距，使用较为麻烦，每次要设置很多相关的属性，利用内外边距和定位等等环节去处理页面的布局。在修改时也会被繁琐的工序搞得难以处理
（在使用flex布局的时候是无法使用）
flex的优点：
1、不用考虑兼容性，flex会编译成flash swf文件，任何操作系统和浏览器，它都同样下载为像素。
2、Flex 2中的Actionscrip包含了针对XML的Ecmascript或者叫做E4X。它通过把XML看作一个原始变量使得操作一个XML对象变得简单。
3、flex通过使用基于容器的Flex标记语言（MXML），把确定的（fixed）和流动的（liquid）布局设计转变成想要的布局结果变得非常容易
4、表单域验证，譬如邮政编码、信用卡号等，这些在Flex中都是内置的并且很容易使用。
5、丰富的媒体支持，Flex使得你在程序适当的地方嵌入音频或者视频内容变得简单。
6、实现表现层和内容的真正分离，使用Flex，可以把数据巧妙地从任何地方（简单的XML，SOAP，等）中取出并帮定到界面中的元素上。
7、Flex Builder 2是一个Flex可视化编程环境，它是可视化的
8、CSS 支持
9、Web存档文件的部署 ，在 J2EE 服务器上或 servlet 容器中将 Flex 应用程序打包及部署成标准的 WAR 文件。
10.在编写代码的过程中，我们会经常发现 margin： 0 auto；这个代码无法跟float 属性一起使用，而flex可以使用。
二 . 属性总结
flex模型拥有比较多的属性，来设置多样的布局方式，接下来我们先对属性做一个汇总，然后逐个详细讲解：
flex-container的属性有flex-direction, flex-wrap, justify-content, align-items, align-content
flex-direction(主轴方向): 1) row（布局为一行，从start开始排）
2) row-reverse(布局为一行，从end开始排)
3) column(布局为一列，从start开始排)
4) column-reverse(布局为一列，从end开始排)
flex-wrap(一条轴线排不下如何换行)：1) nowarp (不换行，在一行显示)
2) wrap(内容超过后换行)
3) warp-reverse(换行后有两条轴线，reverse就是把轴线排列的顺序倒置过来)
justify-content(主轴对齐方式)：1) flex-start (start侧对齐，左对齐)
2) flex-end(end侧对齐，右对齐)
3) center(中心对齐)
4) space-between(左右两侧没有间距，中间间距相同)
5) justify-content:space-around（左右两侧的间距为中间间距的一半）
align-items(交叉轴对齐方式)： 1）align-items:stretch; (拉伸)
2）align-items:flex-start（start侧开始，上对齐）
3）align-items:flex-end（end侧开始，下对齐）
4）align-content :center (中心对齐)
5）align-items:baseline（基线对齐）
align-content(多根轴线对齐方式)： 1）align-content :stretch (拉伸)
2）align-content :flex-start (start侧开始，上对齐)
3）align-content :flex-end（end侧开始，下对齐）
4）align-content :center (中心对齐)
5）align-content:space-between（上下没有间距，中间各子元素间距相同）
6）align-content:space-around (上下间距之和等于中间各个间距)
flex-item相关属性有order，flex-grow，flex-shrink，lex-basis，align-self
order(排列顺序)
flex-grow（放大比例，剩余空间怎么分配,如下图所示，剩余空间的分配比例是1:2:1）
flex-shrink （缩小比例，超出空间怎么压缩）
flex-basis (item所占主轴空间，优先级高于width)
align-self (对齐方式，覆盖align-items)
三 . 最实用的案例举例
1、flex设置元素水平垂直居中
.box{
display: flex;
justify-content: center;
align-items: center;
border: 1px solid black;
width:500px;
height:500px;
}
.son{
width: 100px;
height: 100px;
background-color: snow;
box-shadow: 2px 2px 2px 2px;
}
<div class="box">
<div class="son"></div>
<div class="son"></div>
<div class="son"></div>
</div>实验结果：
2、图文并排的样式：左边是图片，右边是文字
<div class="box">
<div class="left"></div>
<div class="right">
<p>flex布局真简单</p>
<p>简单 简单</p>
<div><input type="button" value="解锁flex布局"></div>
</div>
.box {
display: flex;
justify-content: space-between;
width: 350px;
height: 150px;
background-color: skyblue;
padding: 20px 20px 20px 20px;
}
.left {
width: 100px;
height: 100px;
background: #fff;
box-shadow: 2px 2px 2px 2px ;
}
.right {
width: 150px;
height: 100px;
}实验结果：
3、固定百分比布局
<div class="demo">
<div class="item item1">f 1/4</div>
<div class="item item2">l 1/4</div>
<div class="item item3">e 1/4</div>
<div class="item item4"> x 1/4</div>
</div>
</div> .demo {
display: flex;
width: 600px;
}
.item {
flex: 1;
background: skyblue;
border-right: 1px solid grey;
line-height: 100px;
text-align: center;
}实验结果：
3、购物商品界面布局
.demo {
display: flex;
width: 1000px;
height: 250px;
padding: 20px;
background-color: skyblue;
border: 1px solid #333;
justify-content: space-around;
}
.item {
height: 200px;
background: skyblue;
border-right: 1px solid grey;
line-height: 100px;
text-align: center;
}
.item img{
width: 150px;
height: 100%;
}
<div class="demo">
<div class="item item1"><img src="../xiaomi—实训/imgs/left_pic2.jpg" alt=""></div>
<div class="item item1"><img src="../xiaomi—实训/imgs/left_pic2.jpg" alt=""></div>
<div class="item item1"><img src="../xiaomi—实训/imgs/left_pic2.jpg" alt=""></div>
<div class="item item1"><img src="../xiaomi—实训/imgs/left_pic2.jpg" alt=""></div>
<div class="item item1"><img src="../xiaomi—实训/imgs/left_pic2.jpg" alt=""></div>实验结果：
5、某一个模块布局固定
.demo {
display: flex;
width: 600px;
}
.item {
flex: 1;
background: skyblue;
border-right: 1px solid grey;
line-height: 100px;
color: #fff;
text-align: center;
}
.item2 {
flex: 0 0 50%;
background-color: #ff4500;
}<div class="demo">
<div class="item item1">auto</div>
<div class="item item2">1/2</div>
<div class="item item3">auto</div>
<div class="item item4">auto</div>
</div>实验结果：
6、圣杯布局（最常见的网站布局）
页面从上到下，分成三部分：头部（header），躯干（body），尾部（footer）。
其中躯干又水平分成三栏：从左到右为：导航、主栏、副栏。
.demo {
display: flex;
flex-direction: column;
}
.demo div {
flex: 1;
}
.body {
display: flex;
}
.header,
.footer {
background: skyblue;
line-height: 80px;
text-align: center;
}
.left,
.right {
background: #a200ff;
line-height: 200px;
text-align: center;
}
.center{
text-align: center;
line-height: 200px;
border: 3px solid red;
}
.header,
.footer,
.left,
.right {
flex: 0 0 20% !important;
}
<div class="demo">
<div class="header">头部</div>
<div class="body">
<div class="left">left</div>
<div class="center">center</div>
<div class="right">right</div>
</div>
<div class="footer">底部</div>
</div>
实验成果：
写在后面：
只要搞懂每个属性的功能，自己在调试演示一下，flex布局应该没有什么问题！！！
这些属性综合起来，真的是可以做出超级多的布局！！！
调试的网站推荐 CSS的flex布局调试
599
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
