弹性布局

弹性布局

.box{
align-items:flex-start |flex-end | center | baseline |stretch;
}

它可能取5个值。具体的对齐方式与交叉轴的方向有关，下面假设交叉轴从上到下。

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

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

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

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

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

<!DOCTYPE html>
<html>
    <head>
    <meta charset="UTF-8">
    <title>fiex弹性布局justify-content</title>
    <style type="text/css">
        .box1{
            width: 400px;
            height: 100px;
            border: 2px solid #f4a5a5;
            background-color: #ffc9c9;
            border-radius: 20px;
            display: flex;
            /*justify-content: flex-start;左对齐可以省略*/
            align-items: center;/*居中*/
        }
        .box2{
            width: 400px;
            height: 100px;
            border: 2px solid #f4a5a5;
            background-color: #ffc9c9;
            border-radius: 20px;
            display: flex;
            justify-content: flex-end;
            align-items: center;/*居中*/
        }
        .box3{
            width: 400px;
            height: 100px;
            border: 2px solid #f4a5a5;
            background-color: #ffc9c9;
            border-radius: 20px;
            display: flex;
            justify-content: center;
            align-items: center;/*居中*/
        }
        .box4{
            width: 400px;
            height: 100px;
            border: 2px solid #f4a5a5;
            background-color: #ffc9c9;
            border-radius: 20px;
            display: flex;
            justify-content: space-between;
            align-items: center;/*居中*/
        }
        .box5{
            width: 400px;
            height: 100px;
            border: 2px solid #f4a5a5;
            background-color: #ffc9c9;
            border-radius: 20px;
            display: flex;
            justify-content: space-around;
            align-items: center;/*居中*/
        }
        
       
        
        div[class^=s]{
            width: 100px;
            height: 20px;
            border: 2px solid #b2f2bb;
            background-color: #9ac190;
            border-radius: 10px;
        }
       
    </style>
</head>
<body>
    <h1>fiex-stare</h1>
    <div class="box1">
        <div class="s1"></div>
        <div class="s2"></div>
        <div class="s3"></div>
    </div>
    <h1>fiex-end</h1>
    <div class="box2">
        <div class="s1"></div>
        <div class="s2"></div>
        <div class="s3"></div>
    </div>
    <h1>center</h1>
    <div class="box3">
        <div class="s1"></div>
        <div class="s2"></div>
        <div class="s3"></div>
    </div>
    <h1>baseline</h1>
    <div class="box4">
        <div class="s1"></div>
        <div class="s2"></div>
        <div class="s3"></div>
    </div>
    <h1>stretch</h1>
    <div class="box5">
        <div class="s1"></div>
        <div class="s2"></div>
        <div class="s3"></div>
    </div>
</body>
</html>
posted @ 2026-06-26 09:30  安徒生的熊  阅读(1)  评论(0)    收藏  举报