css3中flex弹性布局的12大属性
采用 Flex 布局的元素，称为 Flex 容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称"项目"。
弹性容器的子元素和父元素 之间 一定是父子，不能祖先！
注意，设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。margin外边距和padding内边距正常使用。
弹性容器的 6 大属性
1.主轴
flex-direction: row;
flex-direction: row-reverse;
flex-direction: column;
flex-direction: column-reverse;
<style>
* {
margin: 0;
padding: 0;
}
/* 父-子之间 */
.parent {
width: 600px;
height: 200px;
outline: 1px dashed red;
margin: 20px auto;
/* flex container 弹性容器 */
display: flex;
/* 主轴
flex-direction属性决定主轴的方向（即项目的排列方向）
*/
flex-direction: row;
/* flex-direction: row-reverse; */
/* flex-direction: column; */
/* flex-direction: column-reverse; */
}
/* 弹性项目（弹性元素） */
.son {
width: 80px;
height: 80px;
line-height: 80px;
background: #e88024;
font-size: 26px;
text-align: center;
color: #fff;
margin: 10px;
}
</style>
</head>
<body>
<div class="parent">
<div class="son son1">1</div>
<div class="son son2">2</div>
<div class="son son3">3</div>
</div>
</body>2.换行
flex-wrap: wrap; 取值 有 3 个值
nowrap; ---默认， 不换行
wrap; --- 换行，第一行在上方
wrap-reverse; --- 换行，第一行在下方
3.flex-flow 复合属性 --同时设置 主轴和换行
flex-flow: row wrap;
4.主轴上的对齐方式
justify-content 属性定义了项目在主轴上（水平轴）的对齐方式
项目在 水平轴 上的对齐方式 取值 有 5 个值
flex-start; 默认 项目左对齐
flex-end; 项目右对齐
center; 项目居中
space-between; 项目两端对齐，项目之间的间隔都相等（项目均匀分布）
space-around; 每个项目两侧的间隔相等。所以，"项目之间的间隔 比 项目与边框的间隔" 大一倍。
5.交叉轴上的对齐方式 (你使用这个属性的大前提是：你的主轴 必须 还是 水平轴) 取值 有 5 个值
align-items 属性定义项目在交叉轴上如何对齐
flex-start; 项目 交叉轴的起点对齐
flex-end; 项目 交叉轴的起点对齐
center; 项目 交叉轴的中间对齐
baseline; 项目的"第一行文字"的基线对齐
stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度
6.多根轴线的对齐方式 (使用它的大前提 是 容器中的项目 必须 占 2 行 以上 ) 取值 有 6 个值
align-content 属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。
flex-start; 项目在 交叉轴的起点对齐 显示
flex-end; 项目在 交叉轴的终点对齐 显示
center; 项目在 交叉轴的中心对齐 显示
space-between; 项目在 交叉轴两端对齐，轴线之间 项目与项目 的间隔距离 平均分布
space-around; 项目在 交叉轴 上 项目上下两侧的间隔都相等。所以，项目之间的间隔 比 项目与边框的间隔 大一倍
stretch; 默认值， 项目 占满 整个交叉轴
弹性项目的 6 大属性
1.项目的排序
order 属性定义项目的排列顺序。数值越小，排列越靠前，默认为 0。
2.项目的放大比例 ---“作用：占 剩余空间”
flex-grow 属性定义项目的放大比例，默认为 0，即如果存在剩余空间，也不放大。
flex-grow: 0; 默认为 0，即如果存在剩余空间，也不放大。
flex-grow: 1; 有项目的 flex-grow 属性都为 1，则它们将等分剩余空间。
flex-grow: 2;
3.项目的缩小比例 ---“使用它的前提 是 空间不足”
flex-shrink 属性定义了项目的缩小比例，默认为 1，即如果空间不足，该项目将缩小。
flex-shrink:1，当空间不足时，所有的项目 都将等比例缩小。
flex-shrink:0, 当前项目 不缩小。
4.项目占据的主轴空间 ---“使用它的前提 是 要有剩余空间”
flex-basis 属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。
它可以设为跟 width 或 height 属性一样的值（比如 350px），则项目将占据固定空间。
5.复合属性
flex 属性是 flex-grow, flex-shrink 和 flex-basis 的简写，默认值为 0 1 auto。后两个属性可选。
6.单个项目 与其他项目不一样的对齐方式
align-self 属性允许单个项目有与其他项目不一样的对齐方式，可覆盖 align-items 属性。
默认值为 auto，表示继承父元素的 align-items 属性，如果没有父元素，则等同于 stretch。
还没有留言，还不快点抢沙发？