flex布局中的aligin-content属性的案例

莪假裝堅強

已于 2022-08-20 19:10:50 修改

阅读量693

点赞数

分类专栏： # 前端基础文章标签： css css3 前端

于 2022-03-12 17:32:18 首次发布

本文链接：https://blog.csdn.net/weixin_47994845/article/details/123446517

版权

前端基础专栏收录该内容

11 篇文章 0 订阅

订阅专栏

概要

align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。
刚开始看到这句话的时候一头雾水
共有下面的属性

.box {
  align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}

在这里插入图片描述

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

看到这个图的时候一脸无赖
下面一个一个进行分析

1.flex-start

刚开始的代码如下,这里还没有加这个algin-content:flex-start这个属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>aligin-content的分析</title>
    <style>
        .cont{
            margin: 10px auto;
            width: 800px;
            height: 800px;
            border: 1px solid red;

            /* 弹性布局 */
            display: flex;
        }
        .cont div{
            width: 100px;
            height: 100px;
            margin-left: 10px;
            background-color: aqua;

            /* 让字体京可能的居中 */
            text-align: center;
            line-height: 100px;
        }

    </style>
</head>
<body>
    <div class="cont">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
        <div>6</div>
        <div>7</div>
        <div>8</div>
        <div>9</div>
        <div>10</div>
        <div>11</div>
        <div>12</div>
        <div>13</div>
        <div>14</div>
        <div>15</div>
        <div>16</div>
    </div>
</body>
</html>

在这里插入图片描述
为了具有代表性，决定改变一些子项目的高度和宽度
代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>aligin-content的分析</title>
    <style>
        .cont{
            margin: 10px auto;
            width: 800px;
            height: 800px;
            border: 1px solid red;

            /* 弹性布局 */
            display: flex;
        }
        .cont div{
            width: 100px;
            height: 100px;
            margin-left: 10px;
            background-color: aqua;
            font-size: 23px;

            /* 让字体京可能的居中 */
            text-align: center;
            line-height: 100px;
        }

         .cont .bigHeight{
            height: 120px;
        }
        .cont div:nth-child(2){
            height: 150px;
            background-color:red;
        }

        .cont .bigWeight{
            width: 120px;
        }
        
    </style>
</head>
<body>
    <div class="cont">
        <div class="bigWeight">1</div>
        <div>2</div>
        <div class="bigHeight">3</div>
        <div>4</div>
        <div class="bigHeight">5</div>
        <div>6</div>
        <div class="bigWeight">7</div>
        <div>8</div>
        <div class="bigHeight">9</div>
        <div>10</div>
        <div class="bigWeight">11</div>
        <div>12</div>
        <div class="bigHeight">13</div>
        <div>14</div>
        <div class="bigWeight">15</div>
        <div>16</div>
    </div>
</body>
</html>

在这里插入图片描述
开始使用该属性
首先加了两个地方

加该属性之后

2.flex-end

在这里插入图片描述

3.center

在这里插入图片描述

4.stretch

这个有点疑惑
在这里插入图片描述 0

5.space-between

在这里插入图片描述

6.space-around

在这里插入图片描述

莪假裝堅強

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
flex布局中的aligin-content属性的案例

align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。刚开始看到这句话的时候一头雾水共有下面的属性flex-start：与交叉轴的起点对齐。flex-end：与交叉轴的终点对齐。center：与交叉轴的中点对齐。space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。stretch（默认值）：轴线占满整个交叉轴。
复制链接

扫一扫