justify-content （主軸子項(xiàng)目對(duì)齊方式） 和 align-items（交叉軸子項(xiàng)目對(duì)齊方式）如果你是安卓開發(fā)者可以叫子項(xiàng)目為子View

align-content 強(qiáng)調(diào)的是多行

這個(gè)多行是 container(容器的寬度或高度不足以 容納子項(xiàng)目的寬或高而被迫換行的) 而不是你用兩個(gè)span 直接換行的
需要設(shè)置的屬性 flex-wrap="wrap"
如我們的容器是水平方向 flex-direction="row" 這個(gè)時(shí)候在們?cè)賮?lái)3個(gè)span 第一個(gè)寬度為30% 第二個(gè)為50% 第三個(gè)為 50% 那么第三個(gè)肯定在一行的是放不下的

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

        <!--  flex-wrap="wrap" 多行時(shí) align-content 才會(huì)生效 -->
        <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="中國(guó)" width="30%" background="#FFeeaa" ></span>
          <span content="中國(guó)" width="50%" background="#000000"  height="20rpx" ></span>
          <span content="中國(guó)" width="50%" background="#0000FF"   ></span>


        </container>


    </container>

image.png

為什么會(huì)顯示成上面的效果
因?yàn)?align-content 的默認(rèn)值是 stretch stretch值的情況下 會(huì)拉伸占據(jù)交叉軸方向的空間，如果子項(xiàng)目的 交叉軸的方向的長(zhǎng)度（可能是寬也可能是高）上面的示例是高度如果是固定值 則不會(huì)拉伸 像黑色的span 如果沒有設(shè)置高度則為拉伸占據(jù)整個(gè)交叉軸方向的空間

align-content="flex-start"

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

        <!--  flex-wrap="wrap" 多行時(shí) align-content 才會(huì)生效 -->
        <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="中國(guó)" width="30%" background="#FFeeaa" ></span>
          <span content="中國(guó)" width="50%" background="#000000"  ></span>
          <span content="中國(guó)" width="50%" background="#0000FF"  ></span>


        </container>


    </container>

image.png

align-content="flex-end"

image.png

align-content="center"

image.png

align-content="space-between"

在這個(gè)模式下如果我們的子項(xiàng)目 交叉軸方向的長(zhǎng)度（可能是寬也可能是高）如果不是固定值的話 可能達(dá)不到我們的預(yù)期 會(huì)顯示成下面的效果

image.png

如果我們的三個(gè)子元素設(shè)置成固定長(zhǎng)度（寬或高）的話則會(huì)顯示成下面的效果

image.png

image.png

align-content="space-around"

交叉軸的長(zhǎng)度（寬和高）設(shè)置為固定值顯示效果可以達(dá)到我們的預(yù)期

image.png

如果不設(shè)置則顯示成下面的效果 （和我們預(yù)期的不符）

image.png

image.png