容器container

flex中container有哪些样式？

让一个元素变成flex容器

.container{
    display:flex; 或者 inline-flex;
}

改变items的流动方向（主轴）

.container{
    flex-direction: row | row-reverse | column | column-reverse ;
}

row : 从左到右
row-reverse : 从右到左
column : 从上到下
column-reverse : 从下到上

换行

.container{
    flex-wrap: nowrap | wrap | wrap-reverse ; 
}

nowrap : 不换行
wrap : 换行
wrap-reverse : 从下往上换行

主轴对齐方式

    .container{
    justify-content:flex-start | flex-end ;···;
    }

flex-start : 默认左边对齐
flex-end : 右边对齐
center : 居中对齐
space-between : 两两相隔等
space-around : items周围围绕
space-evenly : items周围围绕，左右间隔相等

次轴的对齐方式

    .container{
    align-items:stretch | flex-start |···;
    }

flex-start : 从上往下
flex-end : 从下往上
center : 居中
stretch : 其余items长度与最长items对其

多行内容

    .container{
    align-content:stretch | flex-start |···;
    }

flex-start : 在顶部排列，将空间放到下面
flex-end : 在底部排列，将空间放到上面
center : 居中，上下空间相同
stretch : 每行中间空间分布相同，items顶头，但是底部有空间
space-between : 空间均匀分布在两两之间，items顶头和底部
space-around : items周围围绕，左右间隔相等

Flex item有哪些元素

item上面加order

用order改变item的排列顺序，从小到大，

item 上面加flex-grow 变宽

item 上面加flex-shrink 变瘦

默认是1，0防止变瘦

flex-basis 控制基准宽度

默认是auto

align-self定制align-items

用Flex写一个页面布局

---

图片来自CSS Tricks