共计 2995 个字符，预计需要花费 8 分钟才能阅读完成。
CSS 浮动布局放弃 float，拥抱 flex（详解）
博客阐明
文章所波及的材料来自互联网整顿和集体总结，意在于集体学习和教训汇总，如有什么中央侵权，请分割自己删除，谢谢！
阐明
在写前端代码的时候，写一排的 float:left, float: right，最初再来个 clear:both; 有的时候一旦遗记革除浮动，那么页面就糊了。
就是吃了 float 的亏，代码写得多，还容易吃亏。所以眼光旁移一下，看到了 flex。
Flex 布局
Flex 称为弹性布局，它为盒状模型提供了最大的灵活性。任何一个容器都能够指定为 Flex 布局。应用了 flex 的元素，称为 flex 容器。外面的子元素被称为我的项目，我的项目的 float、clear 和vertical-align属性将生效。
// Flex 布局
.box{display: flex;}
// 行内元素应用 Flex 布局
.box{display: inline-flex;}
// Webkit 内核的浏览器，必须加上 `-webkit` 前缀
.box{
display: -webkit-flex; /* Safari */
display: flex;
}容器和我的项目
既然分为了容器和我的项目，那么大抵就是如下的关系，次要记录一下容器属性和我的项目属性。
容器属性
- flex-direction
- flex-wrap
- flex-flow
- justify-content
- align-items
- align-content
flex-direction 属性
决定主轴的方向（即我的项目的排列方向）
取值：row(默认) | row-reverse | column | column-reverse
- row（默认值）：主轴为程度方向，终点在左端。
- row-reverse：主轴为程度方向，终点在右端。
- column：主轴为垂直方向，终点在上沿。
- column-reverse：主轴为垂直方向，终点在下沿。
.box {flex-direction: row | row-reverse | column | column-reverse;}flex-wrap 属性
管制我的项目是否换行
取值：nowrap(默认) | wrap | wrap-reverse
- nowrap（默认值）：不换行，等分容器。
- wrap：换行，我的项目不会等分容器宽度，而是依据本身宽度进行排列，如果超出父容器宽度则天然换行。
- wrap-reverse：与 wrap 成果相同。
.box{flex-wrap: nowrap | wrap | wrap-reverse;}flex-flow 属性
flex-flow 属性是 flex-direction 属性和 flex-wrap 属性的简写模式，默认值为 row nowrap。
.box {flex-flow: <flex-direction> <flex-wrap>;}justify-content 属性
管制我的项目在横轴的对齐形式
取值：flex-start(默认) | flex-end | center | space-between | space-around | space-evenly;
- flex-start（默认值）：左对齐。
- center：居中。
- flex-end：右对齐。
- space-between：左右两端对齐，即左右两侧我的项目都紧贴容器，且我的项目之间间距相等。
- space-around：我的项目之间间距为左右两侧我的项目到容器间距的 2 倍。
- space-evenly：为我的项目之间间距与我的项目与容器间距相等。
.box {justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly;}align-items 属性
管制我的项目在纵轴排列形式
取值：flex-start | flex-end | center | baseline | stretch(默认)
- flex-start：穿插轴的终点对齐。
- flex-end：穿插轴的起点对齐。
- center：穿插轴的中点对齐。
- baseline: 我的项目的第一行文字的基线对齐。
- stretch（默认值）：如果我的项目未设置高度或设为 auto，将占满整个容器的高度。
.box {align-items: flex-start | flex-end | center | baseline | stretch;}align-content 属性
管制多行我的项目的对齐形式，如果我的项目只有一行则不会起作用
取值：flex-start | flex-end | center | space-between | space-around | space-evenly | stretch(默认);
- flex-start：与穿插轴的终点对齐。
- flex-end：与穿插轴的起点对齐。
- center：与穿插轴的中点对齐。
- space-between：与穿插轴两端对齐，轴线之间的距离均匀散布。
- space-around：每根轴线两侧的距离都相等。所以，轴线之间的距离比轴线与边框的距离大一倍。
- stretch（默认值）：轴线占满整个穿插轴。
- space-evenly：为我的项目之间间距与我的项目与容器间距相等。
.box {align-content: flex-start | flex-end | center | space-between | space-around | stretch | space-evenly;}我的项目属性
- order
- flex-grow
- flex-shrink
- flex-basis
- flex
- align-self
order 属性
属性定义我的项目的排列程序。数值越小，排列越靠前，默认为 0。
.item {order: <integer>;}
flex-grow 属性
性定义我的项目的放大比例，默认为0，即如果存在残余空间，也不放大。
.item {flex-grow: <number>; /* default 0 */}flex-shrink 属性
flex-shrink属性定义了我的项目的放大比例，默认为 1，即如果空间有余，该我的项目将放大。flex-shrink属性为 0 时，其余我的项目都为 1，则空间有余时，flex-shrink 不放大。
.item {flex-shrink: <number>; /* default 1 */}flex-basis 属性
默认 auto 时，我的项目会放弃默认宽度，或者以 width 为本身的宽度
如果设置了 flex-basis 会笼罩 widtn 属性。
.item {flex-basis: <length> | auto; /* default auto */}flex 属性
flex属性是 flex-grow, flex-shrink 和 flex-basis 的简写，默认值为0 1 auto。后两个属性可选。
.item {flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'>]
}align-self 属性
align-self属性容许单个我的项目有与其余我的项目不一样的对齐形式，可笼罩 align-items 属性。默认值为 auto，示意继承父元素的align-items 属性，如果没有父元素，则等同于stretch。
.item {align-self: auto | flex-start | flex-end | center | baseline | stretch;}感激
万能的网络
菜鸟教程
阮一峰的 flex 布局
以及勤奋的本人，集体博客，GitHub
