flex布局详细总结

1.Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。容器：container;容器内的每一项：item;

2.容器(container)属性如下所示

.container{
display:flex;
//或者写成下面这行，行内弹性布局
display:inline-flex;
//横着排，竖着排，反方向横着排，反方向竖着排，你控制什么方向主轴就什么方向
flex-direction:row|column|row-reverse|column-reverse;
//是否换行
flex-wrap:nowrap|wrap|wrap-reverse;
//主轴对齐方式
justify-content: flex-start(都往开始那里挤)| flex-end(尽量往后靠)|center(尽量往中间靠)|
space-between|space-around|space-evenly;
//次轴对齐方式
align-items:center|flex-start|flex-end|stretch;
}

• 主轴对齐方式(justify-content);
• 次轴对齐方式(align-items)
• 多行内容(align-content)

3.项（item）属性：

.item:first-child{
//用order改变item的排列顺序，从小到大排列
order:2;
//表示每一项所占的空间份数，数值越大，空间越大。
flex-grow:2;
//表示空间不够需要收缩的时候，数值越大，缩的越厉害;当数值为0时，防止变瘦。
flex-shrink:5;
}

• 合并写法：flex-basis可以设为跟width或height属性一样的值（比如350px），则项目将占据固定空间。

• align-self属性;