前端布局（二）之弹性布局
2017-12-25 15:28:57 0
1、了解弹性布局
弹性布局（Flexible Box）,是一种比较方便的一种布局方式，能够简便、完整、响应式地实现各种页面布局。① 认识一下浏览器对它的支持性：
1、Chrome 21+
2、Opear 12.1+
3、Firefox 22+
4、Safari 6.1+
5、IE 10+
可以看得出，现在浏览器已经能很好地支持弹性布局了。
注意：IE 8、9 不支持,需要兼容到IE8、9的项目的话，就不用考虑它了。
② 在之前我们常用的布局方式有，float，position等,但是在做一些居中方面（如：垂直居中）的东西的话，用传统的布局方式的话，有很多不方便的地方。弹性布局就能很好地解决这个问题。
③ 在学弹性布局之前，因为弹性布局跟我们传统的布局完全不一样，所以我们在学习地时候，不要用传统的布局思想来学习弹性布局。
注意：设置了flex之后，子元素的float就没有作用了。
2、弹性布局的使用
- 如何使用flexbox布局
使用非常简单，给想要的设置的元素添加display:flex;如：
.flex{
display:flex;
}
- flex容器的图解
首先来看一下flex布局的主要内容：
学习弹性布局记住以下几点就非常简单了： 1、主线轴的方向。 2、交叉轴的方向。 3、子容器的对齐方式。
在flex布局容器里面有六个属性，分别是：
1、 flex-direction //主线轴的方向
2、 flex-wrap //换行如何显示
3、 flex-flow // flex-direction、flex-wrap的合并
4、 justify-content //子容器在主轴的对齐方式
5、 align-items //子容器在交叉轴的对齐方式
6、 align-content //多根轴线的对齐方式
注意：以下有关对齐方式以及换行的情况，都是默认以主线轴方向、交叉轴方向的默认值来进行的。不同的主线轴方向会有不一样的排序效果。
1、flex-direction
flex-direction 设置主线轴的方向,有四个值可以选择。
flex-direction:row||row-reverse||column||column-reverse; // 向右(默认值)||向左||向下||向上。
reverse是相反的意思，在这里我们只需要记忆row||column就能推算出另外的两个值。几个值的效果图如下。
flex-direction:row; 起点在左，指向右。
flex-direction:row-reverse; 起点在右，指向左。
flex-direction:column; 起点在上，指向下。
flex-direction:column-reverse; 起点在下，指向上。
2、flex-wrap
flex-wrap 使用来设置子容器在主线轴上面换行是如何显示的。
flex-wrap:nowrap || wrap ||wrap-reverse; // 不换行(默认)|| 换行(按顺序显示) || 换行(反方向显示),如图所示:
flex-wrap:nowrap
flex-wrap:wrap;
flex-wrap:wrap-reverse;
3、flex-flow 这个是flex-direction和 flex-wrap 的集合。
使用方法如下： flex-flow: now(默认值,在这里输入flex-direction的值) nowrap（默认值,在这里输入flex-wrap的值）;
4、justify-content
justify-content 子容器的主轴的对齐方式
justify-content:flex-start || flex-end || center || space-between || space-around;
// 左对齐 右对齐 居中 两端对齐 每个子容器两侧的距离相等
justify-content:flex-start； 左对齐
justify-content:flex-end； 右对齐
justify-content:center； 居中
justify-content:space-between； 两端对齐
justify-content:space-around；每个子容器两侧的距离相等;
5、align-items
aling-items 是子容器在交叉轴上面如何对齐。
align-items: flex-start || flex-end || center || baseline || stretch（默认值）;
// 交叉轴起点对齐 交叉轴终点对齐 交叉轴中点对齐 子容器里面第一行文字的基线对齐。 如果没有设置宽高则默认占满容器高度。
align-items: flex-start; 交叉轴起点对齐
align-items: flex-end; 交叉轴终点对齐
align-items: center; 交叉轴中点对齐
align-items: baseline; 子容器里面第一行文字的基线对齐
align-items: stretch; 如果没有设置高则默认占满容器高度
6、align-content
align-content 设置多个轴线的对齐方式。
align-content: flex-start || flex-end || center || space-between || space-around || stretch（默认值）;
// 与交叉轴的起点对齐||与交叉轴的终点对齐 || 与交叉轴的中点对齐 || 轴线两侧间隔相等 || 轴线占满整个交叉轴
