flex布局 align-content

作者: 雨来 | 来源:发表于2024-02-18 15:16 被阅读0次

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>