跳到主要内容

容器

2023年01月13日
柏拉文
越努力，越幸运

一、认识​

容器默认存在两根轴: 水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。

二、属性​

2.1 flex-direction​

作用: 决定主轴的方向（即项目的排列方向）

可选值:

  • row（默认值）: 主轴为水平方向，起点在左端。

  • row-reverse: 主轴为水平方向，起点在右端。

  • column: 主轴为垂直方向，起点在上沿。

  • column-reverse: 主轴为垂直方向，起点在下沿。

2.2 flex-wrap​

作用: 默认情况下，项目都排在一条线（又称"轴线"）上。flex-wrap属性定义，如果一条轴线排不下，如何换行。

可选值:

  • nowrap（默认）: 不换行

  • wrap: 换行，第一行在上方

  • wrap-reverse: 换行，第一行在下方

2.3 flex-flow​

作用: flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。

2.4 justify-content​

作用: justify-content属性定义了项目在主轴上的对齐方式

可选值:

  • flex-start（默认值）: 左对齐

  • flex-end: 右对齐

  • center 居中

  • space-between: 两端对齐，项目之间的间隔都相等

  • space-around: 每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍

2.5 align-items​

作用: align-items属性定义项目在交叉轴上如何对齐

可选值:

  • stretch（默认值）: 如果项目未设置高度或设为auto，将占满整个容器的高度

  • flex-start: 交叉轴的起点对齐

  • flex-end: 交叉轴的终点对齐

  • center: 交叉轴的中点对齐

  • baseline: 项目的第一行文字的基线对齐

应用场景:

  • 场景一、让子项保持自身高度

    场景解决方案: 直接在 flex 容器上，将 align-items 设为 flex-start ,或者 align-items 属性的其他值都可以, 子项就会保持其自身的高度了

    实时编辑器
    function Test(props) {
   const containerStyle = {
        width: '200px',
        height: '600px',
        display: 'flex',
        alignItems: "center",
        justifyContent: "space-between",
        flexWrap: "wrap",
        backgroundColor: "blue"
    }
    const itemSpanStyle = {
        width: "100px",
        backgroundColor: "red"
    }
    return (
        <div style={ containerStyle }>
            <div style={ itemSpanStyle }>哒哒哒哒哒</div>
            <div style={ itemSpanStyle }>嘻嘻</div>
            <div style={ itemSpanStyle }>红红火火恍恍惚惚哈哈哈哈哈哈哈你哈哈哈哈</div>
        </div>
    );
}
    结果
    Loading...

  • 场景二、所有子项与其内容等宽，并把所有子项的高度变为最高子项的高度

    场景解决方案: 直接在 flex 容器上，将 align-items 设为 stretch 即可

    实时编辑器
    function Test(props) {
   const containerStyle = {
        width: '200px',
        height: '600px',
        display: 'flex',
        alignItems: "stretch",
        justifyContent: "space-between",
        flexWrap: "wrap",
        backgroundColor: "blue"
    }
    const itemSpanStyle = {
        width: "100px",
        backgroundColor: "red"
    }
    return (
        <div style={ containerStyle }>
            <div style={ itemSpanStyle }>哒哒哒哒哒</div>
            <div style={ itemSpanStyle }>嘻嘻</div>
            <div style={ itemSpanStyle }>红红火火恍恍惚惚哈哈哈哈哈哈哈你哈哈哈哈</div>
        </div>
    );
}
    结果
    Loading...

2.6 align-content​

作用: align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用

可选值:

  • stretch（默认值）: 轴线占满整个交叉轴

  • flex-start: 与交叉轴的起点对齐

  • flex-end: 与交叉轴的终点对齐

  • center: 与交叉轴的中点对齐

  • space-between: 与交叉轴两端对齐，轴线之间的间隔平均分布

  • space-around: 每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍