flex布局 align-content

justify-content （主轴子项目对齐方式） 和 align-items（交叉轴子项目对齐方式）如果你是安卓开发者可以叫子项目为子View

align-content 强调的是多行

这个多行是 container(容器的宽度或高度不足以 容纳子项目的宽或高而被迫换行的) 而不是你用两个span 直接换行的
需要设置的属性 flex-wrap="wrap"
如我们的容器是水平方向 flex-direction="row" 这个时候在们再来3个span 第一个宽度为30% 第二个为50% 第三个为 50% 那么第三个肯定在一行的是放不下的

<container display="flex" flex-direction="column" width="100%" background="#FFFFFF"
        padding-horizontal="20rpx">

        <!--  flex-wrap="wrap" 多行时 align-content 才会生效 -->
        <container display="flex" flex-wrap="wrap" width="100%"
            flex-direction="row"
            background="#FFFFFF"
            height="30%"
            url="aaaaa"
            border-style="solid"
            border-color="#FF0000"
            margin-top="10rpx"
            border-width="2px"
            border-radius="2px"
            >

          <span content="中国" width="30%" background="#FFeeaa" ></span>
          <span content="中国" width="50%" background="#000000"  height="20rpx" ></span>
          <span content="中国" width="50%" background="#0000FF"   ></span>


        </container>


    </container>

image.png

为什么会显示成上面的效果
因为 align-content 的默认值是 stretch stretch值的情况下 会拉伸占据交叉轴方向的空间，如果子项目的 交叉轴的方向的长度（可能是宽也可能是高）上面的示例是高度如果是固定值 则不会拉伸 像黑色的span 如果没有设置高度则为拉伸占据整个交叉轴方向的空间

align-content="flex-start"

 <container display="flex" flex-direction="column" width="100%" background="#FFFFFF"
        padding-horizontal="20rpx">

        <!--  flex-wrap="wrap" 多行时 align-content 才会生效 -->
        <container display="flex" flex-wrap="wrap" width="100%"
            flex-direction="row"
            background="#FFFFFF"
            height="30%"
            url="aaaaa"
            border-style="solid"
            border-color="#FF0000"
            margin-top="10rpx"
            border-width="2px"
            border-radius="2px"
            align-content="flex-start"
            >

          <span content="中国" width="30%" background="#FFeeaa" ></span>
          <span content="中国" width="50%" background="#000000"  ></span>
          <span content="中国" width="50%" background="#0000FF"  ></span>


        </container>


    </container>

image.png

align-content="flex-end"

image.png

align-content="center"

image.png

align-content="space-between"

在这个模式下如果我们的子项目 交叉轴方向的长度（可能是宽也可能是高）如果不是固定值的话 可能达不到我们的预期 会显示成下面的效果

image.png

如果我们的三个子元素设置成固定长度（宽或高）的话则会显示成下面的效果

image.png image.png

align-content="space-around"

交叉轴的长度（宽和高）设置为固定值显示效果可以达到我们的预期

image.png

如果不设置则显示成下面的效果 （和我们预期的不符）

image.png
image.png