Flex布局自记

一、Flex容器的属性

设置 display:flex 的元素称为 Flex容器，容器的所有子元素称为 Flex项目

注意：设置为flex布局后，子元素的 float 、 clear 和 vertical-align 属性将失效

容器的6个属性：

flex-direction // 决定主轴的方向
    row (默认) 水平方向，起点在左端
    row-reverse 水平方向，起点在右端
    column 垂直方向，起点在上沿
    column-reverse 垂直方向，起点在下沿
    
flex-wrap // 是否换行
    nowrap (默认) 不换行
    wrap 换行，新行的元素在下面
    wrap-reverse 换行，新行的元素在上面
    
flex-flow // 是 flex-direction 和 flex-wrap 的组合简写形式
    row nowrap (默认) 参考 flex-direction 和 flex-wrap 的属性设置
    
justify-content // 定义Flex项目在主轴上的对齐方式
    flex-start (默认) 左对齐
    flex-end 右对齐
    center 居中对齐
    space-between 两端对齐，项目之间的间隔相等
    space-around 每个项目两侧的间隔相等 (项目之间的间隔比项目与边框的间隔大一倍)
    space-evenly 每个项目两侧的间隔相等 (项目之间的间隔与项目与边框的间隔也相等)

align-items // 定义Flex项目在交叉轴上的对齐方式
    stretch (默认) 如项目未设置高度或设为auto，将占满整个容器的高度
    flex-start 交叉轴的起点对齐
    flex-end 交叉轴的终点对齐
    center 交叉轴的中点对齐
    baseline 项目的第一行文字的基线对齐
    
align-content // 定义多根轴线的对齐方式，如果项目只有一根轴线，该属性不起作用
    stretch (默认) 如项目未设置高度或设为auto，将占满整个容器的高度
    flex-start 交叉轴的起点对齐
    flex-end 交叉轴的终点对齐
    center 交叉轴的中点对齐
    space-between 与交叉轴两端对齐，轴线之间的间隔平均分布
    space-around 每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍

二、Flex项目的属性

项目的6个属性：

order // 定义项目的排列顺序，数值越小排列越靠前，默认为0，负值有效

flex-grow // 定义项目放大比例，默认为0
    // 如果所有项目都定义为1，则等分剩余空间
    
flex-shrink // 定义项目缩小比例，默认为1，复制无效
    // 如果所有项目都定义为1，空间不足时都将等比例缩小
    // 如果一个项目定义为0，其余为1，空间不足时前者也不缩小
    
flex-basis // 定义在分配多余空间之前，项目占据的主轴空间，默认为auto
    // 可以设为跟width或height属性一样的值（比如350px），则项目将占据固定空间
    
flex // 属性是 flex-grow, flex-shrink 和 flex-basis 的简写
    // 默认为 0 1 auto
    
align-self // 属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性
    // 默认为 auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch
    // 该属性可能取6个值，除了auto，其他都与align-items属性完全一致

详细参考阮一峰老师的博文：Flex 布局教程：语法篇 - 阮一峰的网络日志