发表于： 2017-02-24 22:48:50
1 1133
浅谈弹性盒子flex属性和基本用法
小课堂【武汉第83期】 分享人：龚浩
目录
1.背景介绍
2.知识剖析
3.常见问题
4.解决方案
5.编码实战
6.扩展思考
7.参考文献
8.更多讨论
一、背景介绍
布局的传统解决方案，基于盒状模型，依赖 display属性 + position属性 + float属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现. 2009年，W3C提出了一种新的方案----Flex布局，可以简便、完整、响应式地实现各种页面布局。现在的版本是2012年更新的版本,目前，它已经得到了所有浏览器的支持，但是考虑历史版本，在PC上兼容性一般，但是在手机上则可以从容使用。
二、知识剖析
1、Flex布局是什么？
Flex是Flexible Box的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。 任何一个容器都可以指定为Flex布局,行内元素也可以使用Flex布局。注意，设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。
2、基本概念
采用Flex布局的元素，称为Flex容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为Flex项目（flex item），简称"项目"。
容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。
3. 父级属性
flex:direction 设置主轴方向,确定子元素主轴排列方式
row 默认值,水平方向左至右
row-reverse 水平方向右至左
column 垂直方向,上至下排列
column-reverse 垂直方向,下至上排列
flex-wrap 主轴宽度不够时是否换行显示
nowrap 默认值,不换行
wrap 换行显示
wrap-reverse 逆序换行显示
flex-flow 上2复合属性
justify-content 主轴上子元素对齐方式
center 居中对齐
flex-end 侧轴结束对齐
flex-start 侧轴开始对齐
space-around 均匀分布
space-between 两端对齐
align-items 侧轴子元素对齐方式
stretch 默认值,充满侧轴
baseline 项目的第一行文字的基线对齐
center 侧轴居中对齐
flex-end 侧轴结束对齐
flex-start 侧轴开始对齐
align-content 多轴对齐方式
stretch 默认值,充满侧轴
center 侧轴居中对齐
flex-start 侧轴开始对齐
flex-end 侧轴结束对齐
space-between 侧轴两端对齐
space-around 侧轴均匀分布
4、子级属性
order 子元素排列顺序，设置的值越小越靠前
flex-grow 子元素扩展比例，剩余宽度 * 占比值/总比值
flex-shrink 子元素收缩比例,默认值为1平均分配，溢出宽度 * 占比值/总比值
flex-basis 属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。
align-self align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。
三、常见问题
使用flex-grow等分宽度，当元素内部内容宽度大于最小宽度时，不能等分排列，甚至溢出？
四、解决方案
设置width:100%;且overflow:hidden;
五、编码实战
2016百度前端学院有一个flex布局练习题
代码：
<!DOCTYPE html>
<html>
<head>
<title>编码实战</title>
<meta charset="utf-8">
<style type="text/css">
.box{
display: flex;
max-width: 800px;
width: 80%;
margin: 0 auto;
padding: 20px;
border: 1px solid gray;
justify-content: space-between;
align-items: center;
}
.box1{
width: 150px;
height: 120px;
border: 1px solid #f00;
margin-bottom: 20px;
}
.box2{
width: 150px;
height: 100px;
border: 1px solid #f00;
margin-bottom: 20px;
}
.box3{
width: 150px;
height: 40px;
border: 1px solid #f00;
margin-bottom: 20px;
}
.box4{
width: 150px;
height: 200px;
border: 1px solid #0f0;
margin-bottom: 20px;
}
@media all and (max-width: 640px){
.box{
flex-wrap: wrap;
align-items: flex-start;
}
.box4{
display: flex;
order: -1;
}
}
</style>
</head>
<body>
<div class="main">
<div class="box">
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box4"></div>
</div>
</div>
</body>
</html>
六、拓展思考
flex布局可以应用到那些场景？
一般实现垂直居中是一件很麻烦的事，但flex布局轻松解决
display:flex;
justify-content: center;
align-items: center;
另外响应式布局应用flex布局也相当方便
flex兼容性写法
由于flex布局提出时间晚，且经过多次改变，所以需要用兼容写法以兼容更多版本的浏览器，当然各大主流浏览器最新版本现已不需要兼容写法。
display: -webkit-box; /* 老版本语法: Safari, iOS, Android browser, older WebKit browsers. */
display: -moz-box; /* 老版本语法: Firefox (buggy) */
display: -ms-flexbox; /* 混合版本语法: IE 10 */
display: -webkit-flex; /* 新版本语法: Chrome 21+ */
display: flex; /* 新版本语法: Opera 12.1, Firefox 22+ */
子元素兼容写法
-webkit-box-flex: 1 /* OLD - iOS 6-, Safari 3.1-6 */
-moz-box-flex: 1; /* OLD - Firefox 19- */
-webkit-flex: 1; /* Chrome */
-ms-flex: 1 /* IE 10 */
flex: 1; /* NEW, Spec - Opera 12.1, Firefox 20+ */
七、参考文献
http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html
http://www.ruanyifeng.com/blog/2015/07/flex-examples.html
http://blog.csdn.net/u010130282/article/details/52627661
八、更多讨论
bootstrap与flex布局
http://www.oschina.net/translate/boostrap-4-regular-vs-flex-grid?cmp
返回列表
评论