HTML — 弹性布局（1）

介绍

        对于弹性布局，首先了解其概念。弹性布局，即flex box，是一种用于在容器中进行布局的CSS技术。它使得容器内的子元素能够以灵活的方式排列、对齐、分配空间，以便应对各种屏幕尺寸和设备类型。任何一个容器都可以指定为flex布局，它提供了一种更简便、更强大的方法来实现复杂的布局，相对于传统的基于浮动和定位的布局方式更为直观和易用。

容器：
    .box{
        display: flex;
    }

行内元素:
    .box{
      display: inline-flex;
    }

Webkit 内核浏览器，必须加-webkit前缀:

    .box{
        display: -webkit-flex; /* Safari */
        display: flex;
    }

主要属性：

•  justify-content；
• align-items；
• flex-direction；
• flex-wrap；
• flex-flow；
• align-content；

还有其他属性如下：

• order；
• flex-self；
• flex-grow；
• flex-shrink；
• flex-basis；
• flex；

主要概念

        包括弹性容器（flex container）和弹性项目（flex item）。设置了“display：flex 或 display：inline-flex”的父元素成为一个弹性容器，它的直接子元素成为弹性项目。

        弹性布局通过设置容器的“display：flex 或 display：inline-flex”来启用，从而影响其子元素的排列和对齐。弹性容器内的子元素通过设置“flex”的相关属性来控制其在主轴和交叉轴上的大小、排列、方向。

        容器中默认有两条轴：水平的主轴和垂直的交叉轴。Flexbox 布局中，容器的主轴是弹性项目的排列方向，而与主轴垂直的方向被称为交叉轴。项目默认沿主轴排列。               

简易学习路径：https://flexboxfroggy.com/（小青蛙游戏）

主要属性介绍

1. justify-content

主轴（main axis）上的对齐方式，水平方向为主轴。【视情况而定】

• flex-start：项目与容器左侧对齐；
• flex-end：项目与容器右侧对齐；
• center：项目与容器居中对齐；
• space-between：项目之间的间距相等，最边上的弹性项目分别与容器的左右两侧对齐；
• space-evenly：项目以等间距显示，最边上的弹性项目距离容器的左右两侧距离等于每个item之间的距离；
• space-around：项目以等间距显示，最边上的弹性项目距离容器的左右两侧距离等于每个item之间距离的一半。

2. align-items

交叉轴（cross axis）上的对齐方式，竖直方向为交叉轴。【视情况而定】

• flex-start：项目与容器顶部对齐（垂直轴的起始处）；
• flex-end：项目与容器底部对齐（垂直轴的底部）；
• center：项目与容器的垂直中心处对齐（垂直轴的中心）；
• baseline：项目显示在容器的基线处；
• stretch：物体被拉伸以适合容器（如果弹性项目item未设置高度的话）；

3. flex-direction

定义项目在容器上的放置方向，默认沿主轴从 start 向 end 排列。

• row：默认值，主轴为水平方向，起点在左端；
• row-deverse：主轴为水平方向，起点在右端；
• column：主轴为竖直方向，起点在上端；
• column-reverse：主轴为竖直方向，起点在底部。

4. flex-wrap

        默认情况下，项目都排在一条线（又称“轴线”）上。flex-wrap 属性定义，如果一条轴线排不下，如何换行。

• nowrap：默认，单行；
• wrap：多行，项目环绕到附加行（超出一行的，自动向下排列第二行等）；
• wrap-reverse：多行，项目反向围绕到附加行。

5. flex-flow

        由于 flex-direction 和 flex-wrap 经常一起使用，所以可使用 flex-flow 将两种属性结合在一起，利用简写形式将该属性表现出来。例如，可使用flex-flow:row wrap设置行并换行。

        该属性的属性值可参考 flex-direction 和 flex-wrap 两种属性的属性值进行书写。

6. align-content

设置多行的弹性项目在容器中的显示（设置行之间的间距）。

• flex-start：线路排列在容器顶部；
• flex-end：线路排列在容器底部；
• center：线路排列在容器垂直中心；
• space-between：各行之间间距相等，上下最边处与上下两端对齐；
• space-evenly：各行之间间距相等，上下最边处与上下两端之间的距离与各行之间间距相等；
• space-around：各行之间间距相等，上下最边处与上下两端之间的距离为各行之间间距的一半；
• stretch：默认值，物体被拉伸以适合容器（如果弹性项目item未设置高度的话）。