css_24_伸缩盒模型

• 伸缩容器：开启了flex的元素。

1．给元素设置：display:flex 或 display:inline-flex，该元素就变为了伸缩容器。
2. display:inline-flex 很少使用，因为可以给多个伸缩容器的父容器，也设置为伸缩容器。
3．一个元素可以同时是：伸缩容器、伸缩项目。

• 伸缩项目：伸缩容器所有子元素自动成为了伸缩项目。

1．仅伸缩容器的子元素成为了伸缩项目，孙子元素、重孙子元素等后代，不是伸缩项目。2．无论原来是哪种元素（块、行内块、行内），一旦成为了伸缩项目，全都会"块状化"。

主轴与侧轴

• 主轴：伸缩项目沿着主轴排列，主轴默认是水平的，默认方向是：从左到右（左边是起点，右边是终点）。
• 侧轴：与主轴垂直的就是侧轴，侧轴默认是垂直的，默认方向是：从上到下（上边是起点，下边是终点）。

主轴方向

• 属性名：flex-direction
• 常用值如下：

1. row：主轴方向水平从左到右﹣﹣默认值 2 row-reverse：主轴方向水平从右到左。
2. column：主轴方向垂直从上到下。
3. column-reverse：主轴方向垂直从下到上。

        .outer {
            width: 1000px;
            height: 600px;
            background-color: #888;
            margin: 0 auto;
            /* 将该元素变为了伸缩容器（开启了flex布局） */
            display: flex;

            /* 调整主轴方向，水平从左到右，默认 */
            flex-direction: row;

            /* 调整主轴方向，水平从右到左 */
            flex-direction: row-reverse;

            /* 调整主轴方向，垂直从上到下 */
            flex-direction: column;

            /* 调整主轴方向，垂直从下到上 */
            flex-direction: column-reverse;
        }

主轴换行方式

• 属性名： flex-wrap
• 常用值如下：

1.nowrap：默认值，不换行。
2. wrap：自动换行，伸缩容器不够自动换行。
3. wrap-reverse：反向换行。

复合属性：flex-flow是一个复合属性，复合了 flex-direction 和 flex-wrap 两个属性。 值没有顺序要求。

如：flex-flow: row wrap;

   .outer {
            width: 1000px;
            height: 600px;
            background-color: #888;
            margin: 0 auto;

            /* 将该元素变为了伸缩容器（开启了flex布局） */
            display: flex;

            /* 调整主轴方向，水平从左到右，默认 */
            flex-direction: row;

            /* 主轴换行方式，不换行，默认值 */
            flex-wrap: nowrap;

            /* 主轴换行方式，换行 */
            flex-wrap: wrap;

            /* 主轴换行方式，反向换行 */
            flex-wrap: wrap-reverse;
        }

主轴对齐方式

• 属性名： justify-content
• 常用值如下：

1. flex-start：主轴起点对齐。-- 默认值
2. flex-enm：主轴终点对齐。
3. center：居中对齐
4. space-between：均匀分布，两端对齐（最常用）。
   5 space-around：均匀分布，两端距离是中间距离的一半。
5. space-evenly：均匀分布，两端距离与中间距离一致。

.outer {
            width: 1000px;
            height: 600px;
            background-color: #888;
            margin: 0 auto;
            /* 将该元素变为了伸缩容器（开启了flex布局） */
            display: flex;

            /* 调整主轴方向，水平从左到右，默认 */
            flex-direction: row;

            /* 主轴换行方式，换行 */
            flex-wrap: wrap;

            /* 主轴的对齐方式，主轴的起始位置 */
            justify-content: flex-start;

             /* 主轴的对齐方式，主轴的结束位置 */
             justify-content: flex-end;

             /* 主轴的对齐方式，中间对齐 */
             justify-content: center;

             /* 主轴的对齐方式，项目均匀的分布在一行中，项目与项目之间的距离，是项目距边缘的二倍 */
            justify-content: space-around;

             /* 主轴的对齐方式，项目均匀的分布在一行中，项目与项目之间的距离是相等的，项目距边缘没有距离 */
            justify-content: space-between;

            /* 主轴的对齐方式，项目均匀的分布在一行中 */
            justify-content: space-evenly;
        }

侧轴对齐方式

只有一行的情况

• 属性： align-items
• 常用值如下：

1. flex-start：侧轴的起点对齐。
   2.flex-end：侧轴的终点对齐。
2. center：侧轴的中点对齐。
3. baseline：伸缩项目的第一行文字的基线对齐。
4. stretch：如果伸缩项目未设置高度，将占满整个容器的高度。-- （默认值）

多行的情况

• 属性：align-content
• 常用值如下：

1. flex-start：与侧轴的起点对齐。
2. flex-end：与侧轴的终点对齐。
   3.center：与侧轴的中点对齐。
   4.space-between：与侧轴两端对齐，中间平均分布。
   5.space-around：伸缩项目间的距离相等，比距边缘大一倍。
3. space-evenly：在侧轴上完全平分。 门
   7.stretch：占满整个侧轴。-- 默认值

flex-basis

• 作用：设置的是主轴方向的基准长度，会让宽度或高度失效。

主轴横向：宽度失效；主轴纵向：高度失效

flex-grow（伸）

• 作用： 定义伸缩项目的放大比例。

1．若所有伸缩项目的flex-grow 值都为1，则：它们将等分剩余空间（如果有空间的话）。
2．若三个伸缩项目的flex-grow 值分别为：1、2、3，则：分别瓜分到：1/6、2/6、3/6的空。

flex-shrink（缩）

• 作用：定义了项目的压缩比例，默认为1。

flex复合属性

• flex 是复合属性，复合了：flex-grow、flex-shrink 、 flex-basis 三个属性，默认值为 0 1 auto。

如果写 flex:1 1 auto，则可简写为：flex:auto 如果写 flex:1 1 0，则可简写为：flex:1 如果写
flex:00 auto，则可简写为：flex:none 如果写 flex:0 1 auto，则可简写为：flex:0 auto-﹣即
flex 初始值。

项目排序

• order属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。

单独对齐

• 通过 align-self 属性，可以单独调整某个伸缩项目的对齐方式. 默认值为 auto，表示继承父元素的 align-items 属性。

        .outer {
            width: 600px;
            height: 900px;
            background-color: #888;
            margin: 0 auto;
            /* 将该元素变为了伸缩容器（开启了flex布局） */
            display: flex;

            /* 调整主轴方向，水平从左到右，默认 */
            flex-direction: row;

            /* 主轴换行方式，换行 */
            flex-wrap: wrap;

            /* 主轴的对齐方式，主轴的起始位置 */
            justify-content: flex-start;

            /* 侧轴的对齐方式 */
            align-content: flex-start;
        }