CSS弹性盒子

弹性盒子

弹性布局

---

• flex:
  • 弹性布局是后面新增的一种布局方式，是一种“万能”、“灵活”、”方便“的布局方式，它可以完全替代掉浮动布局，制作出浮动布局的一行多列、左中右等布局效果。
  • 弹性盒子使用思想：把项目放入盒子中，设置项目在主轴（默认水平方向）和次轴（默认垂直方向）的排列对齐方式

概念

1. 容器： 任何一个盒子都可以成为弹性盒子的容器 使用display:flex 可以让一个盒子变成弹性盒子 成为弹性盒子之后,该盒子拥有自己独立的一套布局计算方式(触发BFC)
2. 项目 容器的直接儿子就是弹性盒子的项目
3. 主轴 弹性盒子的主要轴线，默认水平方向从左向右 main start和main end
4. 交叉轴 弹性盒子的次要轴线，与主轴垂直,从上向下
5. 容器属性 设置在容器上的属性一共有6种,后面具体解释
6. 项目属性 设置在项目上的属性,一共有6种，后面具体解释

把盒子变成弹性盒子

1. 使用display: flex;（常用）或者display: inline-flex;可以将盒子变为弹性盒子的容器。
2. 弹性盒子的项，将默认占据容器等量的宽度，所以不需要浮动，就可以自动完成一列多行的布局。
3. display: flex;容器变为块级元素的弹性盒子：

    Document

        * {
            margin: 0px;
            padding: 0px;
            list-style: none;
        }

        .container {
            /* 变为弹性盒子的容器 */
            display: flex;
            width: 300px;
            background-color: #f00;
            margin: auto;
        }

        .item {
            width: 50px;
            height: 50px;
            background-color: #0f0;
            box-sizing: border-box;
            border: 1px solid #000;
        }

        项目1
        项目2
        项目3

    我是一个span标签，上面的盒子display: flex;是块级的弹性盒子，占了一整行。

1. display:inline-flex 容器变为行内块弹性盒子

    Document

        * {
            margin: 0px;
            padding: 0px;
            list-style: none;
        }
        .container{
            display: inline-flex;
            margin-right: 90%;
        }

         项目1
        项目2

    标签1

容器属性

---

flex-direction

1. 决定主轴的方向
2. 属性值说明: row：（默认）主轴水平方向，起点在左端。 row-reverse：主轴水平方向，起点在右端； column：主轴垂直方向，起点在上边沿； column-reserve：主轴垂直方向，起点在下边沿

​

flex-wrap

1. 定义换行情况 默认情况下，项目都排列在一条轴线上。但开发中经常出现需要一排排列固定个数项目，排不下的自动换行的情况，此时就需要使用该属性

justify-content

• 定义项目在主轴上的对齐方式

1. flex-start:左对齐
2. flex-end:右对齐
3. center:居中对齐
4. justify-content: space-between; 两端对齐，项目中间相等（常用值）
5. justify-content: space-around; 每个项目两侧的间隔相等，即项目之间的间隔比项目与边框的间隔大一倍（常用值）。

align-items

1. align-items: flex-start; 起点对齐。
2. align-items: flex-end; 终点对齐。
3. align-items: center; 居中对齐（常用值）。
4. align-items: baseline; 项目的第一行文字的基线对齐。
5. align-items: stretch; 如果项目未设置高度或设为auto，将占满整个容器的高度（默认值）。

align-content

如果项目只有一根轴线，该属性不起作用。
所以，容器必须设置flex-wrap：···；

1. align-content: flex-start：与交叉轴的起点对齐。
2. align-content: flex-end;与交叉轴的终点对齐。
3. align-content: center;与交叉轴的中点对齐。
4. align-content: space-between; 与交叉轴的两端对齐，轴线之间的间隔平均分布
5. align-content: stretch;轴线占满整个交叉轴（默认值）
6. 项目未设置高度时：
   有意思的是，当你不给项目设置高度但是给容器设置align-content不为stretch时，同一轴线上的项目的高度将等于项目中高度最高的项目。

项目属性

order

定义项目的排列顺序

flex-grow

定义项目的放大比例。

默认值为0，即如果空间有剩余，也不放大。
可以是小数，按比例占据剩余空间。

1. 如果一个项目设置flex-shrink为0；而其他项目都为1，则空间不足时，该项目不缩小：
2. 如果所有项目都为0，则当空间不足时，项目撑破容器而溢出：
3. 如果一个项目设置为非0正整数，其余项目都为0，那么它与设置1的效果一样：

flex-basis

案例

    Document

        .container{
            margin: auto;

            display: flex;
            justify-content: space-between;
        }

        左边
        右边

    Document

        .container{
            margin: auto;

            display: flex;

        }
        .right{
            flex-grow: 1;
            background-color: aqua;
        }

        左边
        右边

效果: