Flex布局常见父项属性（三）- align-items, align-content和flex-flow

1.align-items用于设置侧轴上的子元素排列方式（单行）

该属性用于控制子元素在侧轴（默认为y轴）上的排列方式，在子元素为单项时使用

1.1属性值

属性值	说明
flex-start	从上到下；默认值
flex-end	从下到上
center	垂直居中
stretch	拉伸

1.2案例

1.设置align-items属性值：center

为了能够更好区别，先设置主轴（x轴）居中，再设置侧轴（y轴）居中

            /* 父级添加flex属性 */
            display: flex;
            /* x轴居中 */
            justify-content: center;
            /* y轴居中 */
            align-items: center;

页面效果展示 - 垂直居中

 2.设置align-items属性值：flex-start

            align-items: flex-start;

页面效果展示 - 从上到下

 3.设置align-items属性值：flex-end

            align-items: flex-end;

页面效果展示 - 从下到上

  4.设置align-items属性值：stretch

注意：子元素不设置高度，否则没有效果

            align-items: stretch;

页面效果展示 - 拉伸

---

2.align-content用于设置侧轴上的子元素排列方式（多行）

设置子元素在轴上的排序方式并且只能用于子项出现换行的情况（多行）

2.1属性值

属性值	说明
flex-start	在侧轴的头部开始排序；默认值
flex-end	在侧轴尾部开始排序
center	在侧轴中间显示
space-around	子元素在侧轴平分剩余的空间
space-between	子元素在侧轴先分布在两端，再平分剩余空间
stretch	设置子元素高度且平分父元素高度

2.2案例

先设置允许子元素换行，为了看得更清晰效果为子元素设置外边距margin: 10px

            flex-wrap: wrap;

1.设置align-content属性值：flex-start

            /* 父级添加flex属性 */
            display: flex;
            flex-wrap: wrap;
            /* 因为允许子元素换行，我们在侧轴上设置子元素对齐方式使用 align-content */
            align-content: flex-start;

页面效果展示 - 默认值，侧轴的头部开始排序

 2.设置align-content属性值：flex-end

            align-content: flex-end;

页面效果展示 - 侧轴的尾部开始排序

 3.设置align-content属性值：center

            align-content: center;

页面效果展示 - 在侧轴中间显示

 4.设置align-content属性值：space-around

            align-content: space-around;

页面效果展示 - 子元素在侧轴平分剩余的空间

 5.设置align-content属性值：space-between

            align-content: space-between;

页面效果展示 - 子元素在侧轴先分布在两端，再平分剩余空间

 

  6.设置align-content属性值：stretch

注意：子元素不设置高度，否则没有效果

            align-content: stretch;

页面效果展示 - 设置子元素高度且平分父元素高度

---

3.align-items和align-content区别

• align-items适用子元素单行的情况下，只有上对齐、下对齐、居中和拉伸
• align-content适用于子元素多行的情况下（单行情况下无法生效），可设置上对齐、下对齐、居中，平分侧轴剩余的空间、靠近两端再平分剩余空间和拉伸 属性值
• 总的来说单行使用align-items，多行使用align-content

---

4.flex-flow

flex-flow属性是flex-direction和flex-wrap属性的复合属性，相当于同时设置flex-direction和flex-wrap

4.1案例

            /* 父级添加flex属性 */
            display: flex;
            flex-flow: column wrap;

页面展示效果 - 以y轴为主轴，且允许子元素换行