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
发表回复