Flex 布局
一、基本概念
-
理解基本概念
-
Flex 布局(弹性布局)，是一种用于在页面上布置元素的布局模式，使得当页面布局必须适应不同的屏幕尺寸和不同的显示设备时，元素可预测地运行。
-
相关词汇
图中是一个 flex-direction 属性为 row 的弹性容器，意味着其内的弹性项目将根据既定书写模式沿主轴水平排列，其方向为元素的文本流方向，在这个例子里，为从左到右。
"flex axis"
-
弹性容器(Flex container)
弹性项目的父元素。通过设置
display:flex;或者display:inline-flex;来定义弹性容器。 -
弹性项目(Flex item)
弹性容器的每个子元素都称为弹性项目。弹性容器直接包含的文本将被包覆成匿名弹性单元。
-
轴(Axis)
每个弹性框布局包含两个轴。弹性项目沿其依次排列的那根轴称为主轴(main axis)。垂直于主轴的那根轴称为侧轴(cross axis)。
-
方向(Direction)
弹性容器的主轴起点(main start)/主轴终点(main end)和侧轴起点(cross start)/侧轴终点(cross end)描述了弹性项目排布的起点与终点。它们具体取决于弹性容器的主轴与侧轴中，由 writing-mode 确立的方向（从左到右、从右到左，等等）。
-
行(Line)
根据 flex-wrap 属性，弹性项目可以排布在单个行或者多个行中。此属性控制侧轴的方向和新行排列的方向。
-
-
代码示例
下述代码使用了 flex 布局，使本来在文档流布局中独占一行的块级元素 div ，变成了两个同处一行之中。
<!--
例一
-->
<style>
.parent{
border:solid 1px red;
display:flex;
background:#dde
}
.child{
border:solid 1px black;
height:50px;
width:100px;
background:#ddd;
margin:10px;
}
</style>
<div class="parent">
<div class="child child1"></div>
<div class="child child2"></div>
</div>
例一结果如下：
flex output.PNG
- flex 特点
- 块级布局侧重垂直方向、行内布局侧重水平方向，flex布局是与方向无关的。
- flex 布局可以实现空间自动分配、自动对齐（flexible：弹性、灵活）。
- flex 适用于简单的线性布局， 更复杂的布局要交到 grid 布局（还没发布）。
二、flex container 的六个属性
<!--
例二
为了便于理解，用代码实践了这六个属性
-->
<style>
* {
margin: 0px;
border:0px;
padding:0px;
}
.container {
display: flex;
border: 1px solid;
background: red;
}
.items {
border: 5px solid;
height:50px;
width:100px;
background:white;
}
</style>
<div class="container">
<div class="items item1">div1</div>
<div class="items item2">div2</div>
<div class="items item3">div3</div>
<div class="items item4">div4</div>
<div class="items item5">div5</div>
<div class="items item6">div6</div>
<div class="items item7">div7</div>
<div class="items item8">div8</div>
<div class="items item9">div9</div>
</div>
例二页面展示结果：display:flex
-
flex-direction(方向)
这个属性表明flex布局与方向无关，它有四个取值：
-
column
让元素一列一列的展示。源代码 flex-container 中由上到下排列的元素，在页面中展示为从页面上方开始往下排列。
在例二中 .container 加上
flex-direction:column之后，页面展示效果如下:flex-direction:column -
column-reverse
让元素一列一列的展示。源代码 flex-container 中由上到下排列的元素，在页面中展示为从页面下方开始往上排列。
在例二中 .container 加上
flex-direction:column-reverse之后，页面展示效果如下:flex-direction:column-reverse -
row——默认值
让元素一行一行的展示。源代码 flex-container 中由上到下排列的元素，在页面中展示为从页面左侧开始往右排列。
在例二中 .container 加上
flex-direction:row之后，页面展示效果如下:flex-direction:row -
row-reverse
让元素一行一行的展示。源代码 flex-container 中由上到下排列的元素，在页面中展示为从页面右侧开始往左排列。
在例二中 .container 加上
flex-direction:row-reverse之后，页面展示效果如下:flex-direction:row-reverse
-
-
flex-wrap(换行)
让元素换行，默认值为不换行 nowrap 。
在例二中 .container 加上
flex-wrap:wrap;之后，页面展示效果如下:flex-wrap:wrap -
flex-flow(上面两个的简写)
flex-flow:row wrap; /*相当于下面的css写法*/ flex-direction:row; flex-wrap:wrap; -
justify-content(主轴方向对齐方式)
flex-container 中 items 主轴的对齐方式，主轴的方向即 flex-direction 的方向，它有五种取值:
-
align-items(侧轴对齐方式)
flex-container 中 items 侧轴的对齐方式，侧轴方向即主轴方向的垂直方向，有五种取值:
-
align-content(多行/列内容对齐方式---用的比较少)
三、flex item 的六个属性
-
flex-grow ——增长比例(空间过多时)
flex-container 的空间减去 items 的空间之后剩余的空间，用 flex-grow 属性分配给 item。
-
flex-shrink——收缩比例(空间不够时)
-
flex-basis——默认大小(一般不用)
-
flex——上面三个的缩写
.container{ display:flex } .items:nth-child(1) { flex:1 3 100px; } /* 用于表示：如果 container 有剩余空间是将剩余空间全部给 item1, 如果 container 的空间不够时将 item1 按3的比例缩小，如果空间刚刚好则设置 item 在主轴方向的长度为 100px */ -
order——顺序(代替双飞翼)
使用 order 可以自定义的安排 items 的顺序 ，使用时要求每个 item 写入order，否则不生效。
-
align-self——自身的对齐方式
使用 align-self 可以自定义某一个 item 的对齐方式，不然对齐方式继承父级元素的对齐方式。
四、例子
实现的页面为：http://js.jirengu.com/pavux/3/edit?html,output
参考自http://codepen.io/team/css-tricks/pen/jqzNZq/?editors=1100
