CSS-弹性布局2-交叉轴

最新推荐文章于 2025-05-23 21:05:23 发布

转载最新推荐文章于 2025-05-23 21:05:23 发布 · 704 阅读

1 ·

CC 4.0 BY-SA版权

原文链接：https://yq.aliyun.com/articles/605562

本文详细介绍了Flex布局中的align-items和align-content属性，解释了这些属性如何影响项目的垂直对齐及多轴线的对齐方式，并提供了具体的代码示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

4.5 align-items

该属性定义项目在交叉轴上如何对齐。

属性值	说明
stretch（默认值）	如果项目未设置高度或者设为auto，将占满整个容器高度
baseline	项目的第一行文字的基线对齐
flex-start	交叉轴的起点对齐
flex-end	交叉轴的终点对齐
center	交叉轴的中点对齐

源代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>flex-wrap</title>
    <style type="text/css">
    .wrap{
        width: 200px;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        height: 200px;
        align-items: stretch;
        border: 1px solid red;
    }
    div{
        width: 20px;
        margin : 5px;
    }
    .div1{
        padding-top: 10px;
        background: red;
    }
    .div2{
        background: blue;
        
    }
    .div3{
        background: yellow;
        
    }
    </style>
</head>
<body>
    <div class="wrap">
        <div class="div1">测试文字1</div>
        <div class="div2">测试文字22</div>
        <div class="div3">3</div>
    </div>
</body>
</html>

stretch运行结果

stretch运行结果

baseline运行结果

baseline运行结果

flex-start运行结果

flex-start运行结果

flex-end运行结果

flex-end运行结果

center运行结果

center运行结果

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

属性值	说明
stretch(默认值)	轴线占满整个交叉轴
flex-start	交叉轴的起点对齐
flex-end	交叉轴的终点对齐
center	交叉轴的中点对齐
space-between	与交叉轴两端对齐，轴线之间的间隔平均分布
space-around	每根轴线两侧的间隔都相等。所以轴线之间的间隔比边框的间隔大一倍

源代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>flex-wrap</title>
    <style type="text/css">
    .wrap{
        width: 200px;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        height: 200px;
        align-content: stretch;
        border: 1px solid red;
    }
    div{
        width: 50px;
        margin:5px;
    }
    .div1{
        background: red;
    }
    .div2{
        background: blue;
    }
    .div3{
        background: yellow;
    }
    .div4{
        background: green;
    }
    .div5{
        background: gray;
    }
    </style>
</head>
<body>
    <div class="wrap">
        <div class="div1">1</div>
        <div class="div2">2</div>
        <div class="div3">3</div>
        <div class="div4">4</div>
        <div class="div5">5</div>
    </div>
</body>
</html>

stretch运行结果：

stretch运行结果

flex-start运行结果：

flex-start运行结果

flex-end运行结果：

flex-end运行结果

center运行结果：

center运行结果

space-between运行结果：

space-between运行结果

space-around运行结果：

space-around运行结果