一、简介
弹性盒子介绍
- 弹性盒子（Flex Box）：CSS3的一种新的布局模式；通过调整其内元素的宽高，在任何显示设备上实现对可用显示空间的最佳填充。
- 应用场景：主要适用于应用程序的组件及小规模的布局。
- 对弹性盒子无效的属性：多栏布局的
column-*，浮动的float和clear，垂直对齐vertical-align。 - 兼容性：IE9-不支持；IE10、Safari6.0（IOS1）-和Android4.3-支持的是一个与现有版本规范不兼容的旧版草案；Firefox22-需要修改
about:config的layout.css.flexbox.enabled为true；Opera15-16、Safari6.1-、Chrome21-需要前缀-webkit-。
基本术语
- 弹性容器（flex container）：设置
display:flex或display:inline-flex的元素。 - 弹性项目（flex item）：弹性容器的所有在文档流中的子元素都被称为弹性项目，弹性容器直接包含的文本被包覆成匿名弹性单元。定位元素和后代元素都不是弹性项目，但浮动元素是。
- 轴（axis）：弹性项目沿其依次排列的那根轴，称为主轴（main axis）；垂直于主轴的轴，称为侧轴或交叉轴（cross axis）。
- 方向（direction）：主轴的起点为main start，终点为main end；交叉轴的起点为cross start，终点为cross end。
- 尺寸（size）：单个项目占据的主轴空间为main size，占据的交叉轴空间为cross size。
- 行（line）：弹性项目可以排布在单个行或多个行中。
flexbox
二、项目排布
在主轴上的排列方向
flex-direction: row | row-reverse | column | column-reverse;
- 默认值是
row，表示主轴为水平方向，项目从左到右排列；row-reverse从右到左。 -
column表示主轴是垂直方向，项目从上到下排列；column-reverse从下到上。
换行
flex-wrap: nowrap | wrap | wrap-reverse;
- 默认值是
nowrap，表示单行显示。 -
wrap表示正向换行，首行在上（主轴水平）或首列在左（主轴垂直）；wrap-reverse相反。
排列顺序
order: <int>;
- 默认值为
0。 - 值较大的项目，排在后面。
属性简写
flex-flow: <flex-direction> || <flex-wrap>;
三、项目对齐
主轴上各项的对齐方式
justify-content: flex-start | flex-end | center | space-between | space-around;
- 类似
text-align。 - 默认值是
flex-start，表示主轴起点对齐；flex-end是主轴终点对齐。 -
center是居中对齐，space-between是两端对齐；space-around表示均匀分布，两端是空格。
交叉轴上各项的对齐方式
align-items: stretch | flex-start | flex-end | center | baseline;
- 类似
vertical-align。 - 默认值是
stretch，如果项目未设置高或设置为auto，那么项目将充满交叉轴空间。 -
flex-start是交叉轴起点对齐，flex-end是交叉轴终点对齐。 -
center是居中对齐，baseline是首行文字的基线对齐。
单个项目在交叉轴上的对齐方式
align-self: auto | stretch | flex-start | flex-end | center | baseline;
- 默认值是
auto，表示根据align-items来定。 - 其他值参考
align-items。
多根主轴的对齐方式
align-content: stretch | flex-start | flex-end | center | space-between | space-around;
- 默认值是
stretch，表示各行会充满交叉轴的剩余空间，各行所占空间相等。 -
flex-start、flex-end、center参考align-items； -
space-between、space-around参考justify-content。 - 此属性只应用于有多根主轴（多行），且容器有剩余空间的情况。
四、空间分配
项目初始主轴尺寸
flex-basis: <width> | auto | content;
- 默认值为
auto，即项目本来的宽（主轴水平）或高（主轴垂直）。 -
auto曾被main-size代替，但后来又改回来了。 -
content是新增的值，表示根据项目内容自动调整尺寸。
项目的放大系数
flex-grow: <num> | inherit;
- 当容器有剩余空间时，根据<num>来给项目分配剩余空间。
- 默认值为
0，表示有剩余空间也不放大项目。 - 项目的最终尺寸 =
<flex-basis> + <flex-grow> / SUM(<flex-grow>) * 剩余空间。
项目的缩小系数
flex-shrink: <num> | inherit;
- 当容器空间不足时，根据<num>来决定项目的缩小比例。
- 默认为
1，即空间不足时将缩小项目。 - 项目的最终尺寸 =
<flex-basis> + <flex-shrink> / SUM(<flex-shrink>) * 缺乏空间（负值）。
属性简写
flex: <flex-grow-num> | <flex-basis-width> | auto | none | initial | inherit; /*单值语法*/
flex: <flex-grow> [ <flex-shrink>? || <flex-basis> ]; /*多值语法*/
- 默认值为
initial，相当于0 1 auto（有一段时间为0 1 main-size）。 -
auto相当于1 1 auto（有一段时间为1 1 main-size）； -
none相当于0 0 auto（有一段时间为0 0 main-size）。
示例
两栏自适应
- HTML主体代码：
<div class="parent"> <div class="left">左侧</div> <div class="right">右侧</div> </div> - CSS代码：
.parent { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -moz-flex; display: -webkit-flex; display: flex; } .left {width:200px;} .right { -webkit-flex: auto; /* 或-webkit-flex-flow:1 */ flex: auto; /* 或flex-grow:1 */ }
圣杯布局
- HTML主体代码：
<header>页眉</header> <div id="main"> <article>内容</article> <nav>导航</nav> <aside>侧边栏</aside> </div> <footer>页脚</footer> - CSS代码（省略了margin、border等属性）：
#main { min-height: 800px; display:-webkit-flex; display:flex; -webkit-flex-flow:row; flex-flow:row; } #main > article { -webkit-flex:3 1 60%; flex:3 1 60%; -webkit-order:2; order:2; } #main > nav { -webkit-flex:1 6 20%;flex:1 6 20%; -webkit-order:1; order:1; } #main > aside { -webkit-flex:1 6 20%; flex:1 6 20%; -webkit-order:3; order:3; } header, footer {display:block; min-height:100px;} /* 视窗窄到容不下三栏 */ @media all and (max-width: 640px) { #main, #page {-webkit-flex-flow:column; flex-direction:column;} /* 恢复到文档内的自然顺序 */ #main>article, #main>nav, #main>aside {-webkit-order:0; order:0;} #main>nav, #main>aside, header, footer {min-height:50px; max-height:50px;} }
参考1：MDN弹性盒子指南
参考2：阮一峰的flex教程-语法篇，阮一峰的flex教程-实例篇
参考3：各浏览器对弹性盒子的实现中的bug
网友评论