基本概念

基本概念

main start 主轴起点 main axis 主轴 main end 主轴终点
cross start 交叉轴起点 cross axis 交叉轴 cross end 交叉轴终点
    [交叉轴也称 侧轴]
    [项目默认沿主轴排列]

容器属性

设定主轴方向：    [指定项目的排列方向]
flex-direction: row [默认值] | row-reverse | column | column-reverse
    [row 默认值 主轴水平向右]
    [row-reverse 主轴水平向左]
    [column 主轴垂直向下]
    [column-reverse 主轴垂直向上]

指定项目的换行方式：
flex-wrap: nowrap [默认值] | wrap | wrap-reverse
    [nowrap 默认值 不换行]
    [wrap 换行 从主轴上往主轴下排列]
    [wrap-reverse 换行 从主轴下往主轴上排列]

主轴方向与换行的复合写法：
flex-flow: row nowrap [默认值]

指定项目在主轴上的对齐方式
justify-content: flex-start [默认值] | flex-end | center | space-between | space-around | space-evenly
    [flex-start 默认值 起点对齐]
    [flex-end 终点对齐]
    [center 居中]
    [flex-start 默认值 起点对齐]
    [space-between 两端对齐]
    [space-around 项目两侧间距相等排开]
    [space-evenly项目与项目间、项目与边框的间距相等，对标 space-around]

指定主轴的对齐方式
align-content: flex-start [默认值] | flex-end | center | space-between | space-around | space-evenly

指定项目在侧轴上的对齐方式
align-items:flex-start [默认值] | flex-end | center | baseline
    baseline 对齐项目的 第一行文字的 基线

项目属性

指定项目的排列顺序：order: val;

指定项目对剩余空间分配的占比: flex-grow:0 [默认值];
    [若所有项目均为1，则项目将平分剩余空间]

指定项目 在分配多余空间前 占据的主轴空间:flex-basis:auto [默认值];
    [类width 但优先级比width高]

指定项目的缩小比例：flex-shrink:1 [默认值]
    [若所有项目均为1，则空间不足时，项目均会等比缩小]

缩放属性、占据主轴空间属性的复合写法：flex: flex-grow flex-shrink flex-basis
    [快捷值1：auto == (1 1 auto)]
        { 项目占据(或均分)本行剩余的主轴所有空间     (因为flex-basis属性优先级高于width，所以不会出现元素溢出问题)}
    [快捷值2：none == (0 0 auto)]
        { 空间不足时项目不会缩小，空间剩余时项目不会放大}
        { 当项目没指定高度height时，align-content:stretch [默认值]会失效，因为侧轴空间的缩放也被禁止}

指定单个项目在侧轴上的对齐方式：align-self:flex-start [默认值] | flex-end | center | baseline
    [优先级高于align-content]