Flex布局学习记录

大佬文章摆上前：

1. Flex 语法篇

2. Flex 实战篇

此文章只是记录方便查阅，需要学习请前往大佬链接，非常感谢大佬的文章

Flex布局属性总结：

• 容器属性：

/* 容器属性 */
.flex_container {
    /* flex-direction 属性：项目的排列方式   */
    /*row（默认值）：主轴为水平方向，起点在左端。*/
    flex-direction: row;  
    /* row-reverse：主轴为水平方向，起点在右端。 */
    flex-direction: row-reverse; 
    /* column：主轴为垂直方向，起点在上沿。 */
    flex-direction: column;
    /* column-reverse：主轴为垂直方向，起点在下沿。 */
    flex-direction: column-reverse;


    /* flex-wrap 属性：项目的换行方式 */
    /*（默认）不换行 */
    flex-wrap: nowrap;
    /* 换行 第一行在上方 */
    flex-wrap: wrap;
    /* 换行 第一行在下方 */
    flex-wrap: wrap-reverse;


    /* flex-flow 属性：是flex-direction属性和flex-wrap属性的简写形式 */
    /* 默认值 */
    flex-flow: row nowrap;


    /* justify-content 属性：定义了项目在主轴上的对齐方式 */
    /* flex-start（默认值）：左对齐 */
    justify-content: flex-start;
    /* flex-end：右对齐 */
    justify-content: flex-end;
    /* center： 居中 */
    justify-content: center;
    /* space-between：两端对齐，项目之间的间隔都相等 */
    justify-content: space-between;
    /* space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍 */
    justify-content: space-around;
    /* space-evenly：每个项目两侧以及项目与边框的距离都相等 */
    justify-content: space-evenly;


    /* align-items 属性：定义项目在交叉轴上如何对齐 */
    /* flex-start：交叉轴的起点对齐 */
    align-items: flex-start;
    /* flex-end：交叉轴的终点对齐 */
    align-items: flex-end;
    /* center：交叉轴的中点对齐 */
    align-items: center;
    /* baseline: 项目的第一行文字的基线对齐 */
    align-items: baseline;
    /* stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度 */
    align-items: stretch;


    /* align-content 属性：定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用 */
    /* flex-start：与交叉轴的起点对齐 */
    align-content: flex-start;
    /* flex-end：与交叉轴的终点对齐 */
    align-content: flex-end;
    /* center：与交叉轴的中点对齐 */
    align-content: center;
    /* space-between：与交叉轴两端对齐，轴线之间的间隔平均分布 */
    align-content: space-between;
    /* space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍 */
    align-content: space-around;
    /* stretch（默认值）：轴线占满整个交叉轴 */
    align-content: stretch;
}

• 容器项目（子元素）属性：

/* 容器项目（子元素）属性 */
.flex_items {
    /* order 属性：定义项目的排列顺序，数值越小位置越靠前 默认为0*/
    order: 1;

    /* flex-grow 属性：定义项目的放大比例，默认为0，项目为自身大小，不会按比例放大 */
    flex-grow: 1;

    /* flex-shrink 属性：定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小 */
    flex-shrink: 5;
    
    /* flex-basis 属性：定义了在分配多余空间之前，此个项目占据的主轴空间（main size）。
    浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。
    可设置px也可设置百分比*/
    flex-basis: 30%;
    flex-basis: 30px;
    
    /* flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。
    该属性有两个快捷值：auto (1 1 auto) 和 none (0 0 auto)。
    建议优先使用这个属性，而不是单独写三个分离的属性，因为浏览器会推算相关值。 */
    flex: 0 1 auto;
    flex: auto;
    flex: none;

    /* align-self 属性：允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。
    默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch */
    align-self: center;
}