flex布局align-items和align-content的区别，flex-direction容器属性

已于 2024-10-30 19:02:55 修改
阅读量324 收藏 4
点赞数 1
文章标签： css css3 html
于 2022-08-17 12:11:06 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_22905801/article/details/126382848
版权
本文详细解析了CSS flex布局中align-items和align-content属性的区别，强调align-items作用于单个子元素，而align-content则作用于多行子元素。内容包括两者在不同场景下的应用效果，以及flex-direction属性如何定义主轴方向。通过多个实例演示，展示了在不同设定下，如容器高度固定、子元素多行等条件下的对齐方式，帮助读者深入理解这两者的工作原理。

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

目录

flex布局align-items和align-content的区别

flex-direction容器属性

 

flex布局align-items和align-content的区别

 

1、align-items是针对每一个子项起作用，它的基本单位是每一个子项，在所有情况下都有效果

2、align-content属性是将flex子项作为一个整体起作用，它的基本单位是子项构成的行

只在两种情况下有效果：

①子项多行且flex容器高度固定

②子项单行，flex容器高度固定且设置了flex-wrap:wrap

80e83d37f5dfcdb173ad9bb50e3ce647.png

 

主轴为 flex-deriction定义的方向，默认为row

交叉轴跟主轴垂直即为column，反之它们互调

justfiy-content：应用于flex容器，设置flex子项（flex items）在主轴上的对齐方式。

不同取值的效果如下所示：

 

0478def124b4a2e362a80af03db984a5.png

 

align-items：应用于flex容器，设置flex子项在每个flex行的交叉轴上的默认对齐方式。

不同取值的效果如下所示：

 

380061bdb5fdf6becbab30aa13cb6500.png

 

align-content：只适用多行的flex容器（子项不止一行时该属性才有效果），它的作用是当flex容器在交叉轴上有多余的空间时，将子项作为一个整体（属性值为：flex-start、flex-end、center时）进行对齐。不同取值的效果如下所示：

ee32edf7b9128efe0c0596842173b308.png

 

 

第2部分：实例演示

例1效果图：

 

53a05368eec32af103a014c0aef8805a.png

 

Html+css代码：

<style type="text/css">

.flex { width: 500px; margin: 10px; text-align: center; border: 2px solid #9a9a9a; display: flex; }

.flex div { width: 100px; margin: 5px; }

.flex div.eg1 { background-color: #ffb685; height: 130px; }

.flex div.eg2 { background-color: #fff7b1; height: 50px; width: 120px; }

.flex div.eg3 { background-color: #b1ffc8; height: 100px; }

.flex div.eg4 { background-color: #b1ccff; height: 60px; }

</style>

<div class="flex">

<div class="eg1">1</div>

<div class="eg2">2</div>

<div class="eg3">3</div>

<div class="eg4">4</div>

</div>

 

 

 

结论1：

在flex布局中，有默认属性：align-items: normal;和 align-content: normal;

效果为顶部对齐。

例2效果图：

设置 align-items : center

 

9ae2b81512308f50cc357240e4ca3759.png

 

Html+css代码：

<style type="text/css">

.flex { width: 500px; margin: 10px; text-align: center; border: 2px solid red; display: flex;align-items: center; }

.flex div { width: 100px; margin: 5px; font-weight:700;font-size:20px;text-align:center; }

.flex div.eg1 { background-color: #ffb685; height: 130px; }

.flex div.eg2 { background-color: #fff7b1; height: 50px; width: 120px; }

.flex div.eg3 { background-color: #b1ffc8; height: 100px; }

.flex div.eg4 { background-color: #b1ccff; height: 60px; }

</style>

<div class="flex">

<div class="eg1">1</div>

<div class="eg2">2</div>

<div class="eg3">3</div>

<div class="eg4">4</div>

</div>

结论2：

 

 

容器的高度为最高子项的高度，同一行的所有子项全都在交叉轴上居中对齐，即子项的高度中线与flex交叉轴中线重合。

例3效果图：

设置 align-content: center

 

ce5acfaca98d7e9205155810123865eb.png

Html+css代码：

<style type="text/css">

.flex { width: 500px; margin: 10px; text-align: center; border: 2px solid red; display: 
   flex;align-content: center; }
.flex div { width: 100px; margin: 5px; font-weight:700;font-size:20px;text-align:center; }
.flex div.eg1 { background-color: #ffb685; height: 130px; }
.flex div.eg2 { background-color: #fff7b1; height: 50px; width: 120px; }
.flex div.eg3 { background-color: #b1ffc8; height: 100px; }

.flex div.eg4 { background-color: #b1ccff; height: 60px; }

</style>
<div class="flex">
<div class="eg1">1</div>
<div class="eg2">2</div>
<div class="eg3">3</div>
<div class="eg4">4</div>

</div>

结论3：

 

 

flex容器不设置高度并且子项只有一行时，align-content属性是不起作用的。

与初始状态并没有区别

例4效果图：

flex容器设置高度

 

06a89e4989ecbbf570068427dcd41f68.png

 

Html+css代码：

<style type="text/css">
.flex { width: 500px; margin: 10px; text-align: center; border: 2px solid red; display: 
  flex;height: 300px; }
.flex div { width: 100px; margin: 5px; font-weight:700;font-size:20px;text-align:center; }

.flex div.eg1 { background-color: #ffb685; height: 130px; }

.flex div.eg2 { background-color: #fff7b1; height: 50px; width: 120px; }

.flex div.eg3 { background-color: #b1ffc8; height: 100px; }

.flex div.eg4 { background-color: #b1ccff; height: 60px; }

</style>

<div class="flex">

<div class="eg1">1</div>

<div class="eg2">2</div>

<div class="eg3">3</div>

<div class="eg4">4</div>

</div>

结论4：

外层容器的高度增加，但是子项和flex容器不设置高度一样。

例5效果图：

设置 align-items : center

 

8dfdf05cd9689f7cedbd319e47f2e904.png

 

Html+css代码：

<style type="text/css">
    .flex { width: 500px; margin: 10px; text-align: center; border: 2px solid red; display:                 
        flex;height: 300px; align-items : center}
    .flex div { width: 100px; margin: 5px; font-weight:700;font-size:20px;text-    
       align:center; }
    .flex div.eg1 { background-color: #ffb685; height: 130px; }

    .flex div.eg2 { background-color: #fff7b1; height: 50px; width: 120px; }

    .flex div.eg3 { background-color: #b1ffc8; height: 100px; }

    .flex div.eg4 { background-color: #b1ccff; height: 60px; }

</style>
<div class="flex">

<div class="eg1">1</div>

<div class="eg2">2</div>

<div class="eg3">3</div>

<div class="eg4">4</div>

</div>

结论5：

同一行的子项全部在交叉轴上居中对齐，与flex容器高度不设置时的效果一样（只不过此时高度最大的子项也居中对齐了）。

例6效果图：

设置 align-content: center

7a1c247ad11cebe675db78e16c4754be.png

 

Html+css代码：

<style type="text/css">

    .flex { width: 500px; margin: 10px; text-align: center; border: 2px solid red; display: 
        flex;height: 300px; align-content: center}
    .flex div { width: 100px; margin: 5px; font-weight:700;font-size:20px;text- 
        align:center; }

    .flex div.eg1 { background-color: #ffb685; height: 130px; }

    .flex div.eg2 { background-color: #fff7b1; height: 50px; width: 120px; }

    .flex div.eg3 { background-color: #b1ffc8; height: 100px; }

    .flex div.eg4 { background-color: #b1ccff; height: 60px; }

</style>

<div class="flex">

<div class="eg1">1</div>

<div class="eg2">2</div>

<div class="eg3">3</div>

<div class="eg4">4</div>

</div>

结论6：

 

 

align-content: center;并没有起作用，效果与初始状态一样。

 

 

例7效果图：

 

f466b6e04bedf9ff91688d4193c16e18.png

子项为多行的情况

 

 

 

Html+css代码：

<style type="text/css">
      .flex { width: 500px; margin: 10px; text-align: center; border: 2px solid red;         
           display: flex;flex-wrap: wrap; }

     .flex div { width: 100px; margin: 5px; font-weight:700;font-size:20px;text- 
         align:center; }

    .flex div.eg1 { background-color: #ffb685; height: 130px; }

    .flex div.eg2 { background-color: #fff7b1; height: 50px; width: 120px; }

    .flex div.eg3 { background-color: #b1ffc8; height: 100px; }

    .flex div.eg4 { background-color: #b1ccff; height: 60px; }

    .flex div.eg5 { background-color: #c8b1ff; height: 40px; }

    .flex div.eg6 { background-color: #ffb1e5; height: 80px; }

</style>

    <div class="flex">

    <div class="eg1">1</div>

    <div class="eg2">2</div>

    <div class="eg3">3</div>

    <div class="eg4">4</div>

    <div class="eg5">5</div>

    <div class="eg6">6</div>


</div>

结论7：

 

 

多行或单行，浏览器默认：align-items: normal; 和 align-content: normal;效果为顶部对齐。

 

 

每一行的高度为该行子项中高度最大的那个值。

 

 

例8效果图：

 

设置 align-items : center

 

9ee5ca3fe0472bf5127aaa92a3869014.png

 

Html+css代码：

<style type="text/css">


    .flex { width: 500px; margin: 10px; text-align: center; border: 2px solid red;     
         display: flex;flex-wrap: wrap;align-items: center; }
    .flex div { width: 100px; margin: 5px; font-weight:700;font-size:20px;text- 
         align:center; }

    .flex div.eg1 { background-color: #ffb685; height: 130px; }

    .flex div.eg2 { background-color: #fff7b1; height: 50px; width: 120px; }

    .flex div.eg3 { background-color: #b1ffc8; height: 100px; }

    .flex div.eg4 { background-color: #b1ccff; height: 60px; }

    .flex div.eg5 { background-color: #c8b1ff; height: 40px; }

    .flex div.eg6 { background-color: #ffb1e5; height: 80px; }


</style>

<div class="flex">

<div class="eg1">1</div>

<div class="eg2">2</div>

<div class="eg3">3</div>

<div class="eg4">4</div>

<div class="eg5">5</div>


<div class="eg6">6</div>

</div>

结论8：

 

 

各行子项都在各自行上居中对齐（各行的高度由最高的子项决定，flex容器的高度为所有行的高度最高的子项高度之和）。

 

 

例9效果图：

 

 

设置 align-content: center

 

442105f1977b8a1e1b26df267d4925f8.png

 

Html+css代码：

<style type="text/css">

.flex { width: 500px; margin: 10px; text-align: center; border: 2px solid red; display: flex;flex-wrap: wrap;align-content: center; }

.flex div { width: 100px; margin: 5px; font-weight:700;font-size:20px;text-align:center; }

.flex div.eg1 { background-color: #ffb685; height: 130px; }

.flex div.eg2 { background-color: #fff7b1; height: 50px; width: 120px; }

.flex div.eg3 { background-color: #b1ffc8; height: 100px; }

.flex div.eg4 { background-color: #b1ccff; height: 60px; }

.flex div.eg5 { background-color: #c8b1ff; height: 40px; }

.flex div.eg6 { background-color: #ffb1e5; height: 80px; }

</style>

<div class="flex">

<div class="eg1">1</div>

<div class="eg2">2</div>

<div class="eg3">3</div>

<div class="eg4">4</div>

<div class="eg5">5</div>

<div class="eg6">6</div>

</div>

结论9：

 

 

与初始状态一样，align-content: center并没有起作用，因为此时是以所有子项作为一个整体，而flex容器并没有指定高度（flex容器的高度即为子项整体的最大高度），所以flex容器在交叉轴上没有多余的空间，那么子项整体自然而然也就没有在交叉轴上对齐的说法了。

 

 

例10效果图：

 

 

flex容器设置高度

 

ce38e31bdf2af993a1855a0afd227e30.png

 

Html+css代码：

<style type="text/css">

    .flex { width: 500px; margin: 10px; text-align: center; border: 2px solid red;     
         display: flex;flex-wrap: wrap;height: 300px; }

    .flex div { width: 100px; margin: 5px; font-weight:700;font-size:20px;text-            
         align:center; }

    .flex div.eg1 { background-color: #ffb685; height: 130px; }

    .flex div.eg2 { background-color: #fff7b1; height: 50px; width: 120px; }

    .flex div.eg3 { background-color: #b1ffc8; height: 100px; }

    .flex div.eg4 { background-color: #b1ccff; height: 60px; }

    .flex div.eg5 { background-color: #c8b1ff; height: 40px; }

    .flex div.eg6 { background-color: #ffb1e5; height: 80px; }

</style>

<div class="flex">

<div class="eg1">1</div>

<div class="eg2">2</div>

<div class="eg3">3</div>

<div class="eg4">4</div>

<div class="eg5">5</div>

<div class="eg6">6</div>

</div>

结论10：

由浏览器的默认值确定。

例11效果图：

设置 align-items : center

 

f8ff6affaf53dd2b1ef81258c2a8b52c.png

 

Html+css代码：

.<style type="text/css">

    .flex { width: 500px; margin: 10px; text-align: center; border: 2px solid red; 
         display: flex;flex-wrap: wrap;height: 300px; align-content: center}

    .flex div { width: 100px; margin: 5px; font-weight:700;font-size:20px;text-            
        align:center; }

    .flex div.eg1 { background-color: #ffb685; height: 130px; }

    .flex div.eg2 { background-color: #fff7b1; height: 50px; width: 120px; }

    .flex div.eg3 { background-color: #b1ffc8; height: 100px; }

    .flex div.eg4 { background-color: #b1ccff; height: 60px; }

    .flex div.eg5 { background-color: #c8b1ff; height: 40px; }

    .flex div.eg6 { background-color: #ffb1e5; height: 80px; }

</style>

<div class="flex">

<div class="eg1">1</div>

<div class="eg2">2</div>

<div class="eg3">3</div>

<div class="eg4">4</div>

<div class="eg5">5</div>

<div class="eg6">6</div>

</div>

结论11：

 

 

flex容器将交叉轴上的多余空间按行数平均分给每行，然后每行各自按自己所在的行居中对齐

 

 

例12效果图：

设置 align-content: center

cdb6cdbf97dcfa9f35133e95bc10a6cb.png

 

 

Html+css代码：

.<style type="text/css">

.flex { width: 500px; margin: 10px; text-align: center; border: 2px solid red; display: flex;flex-wrap: wrap;height: 300px; align-content: center}

.flex div { width: 100px; margin: 5px; font-weight:700;font-size:20px;text-align:center; }

.flex div.eg1 { background-color: #ffb685; height: 130px; }

.flex div.eg2 { background-color: #fff7b1; height: 50px; width: 120px; }

.flex div.eg3 { background-color: #b1ffc8; height: 100px; }

.flex div.eg4 { background-color: #b1ccff; height: 60px; }

.flex div.eg5 { background-color: #c8b1ff; height: 40px; }

.flex div.eg6 { background-color: #ffb1e5; height: 80px; }

</style>

<div class="flex">

<div class="eg1">1</div>

<div class="eg2">2</div>

<div class="eg3">3</div>

<div class="eg4">4</div>

<div class="eg5">5</div>

<div class="eg6">6</div>

</div>

结论12：

 

 

flex容器指定高度且子项为多行时，align-content: center将子项作为一个整体，然后这个整体在flex容器的交叉轴上居中对齐的。

 

 

例13效果图：

58eba3013b5ee429077e1f0dac738e1e.png

 

当子项为单行，flex容器有固定的高度且设置了flex-wrap: wrap;时，align-content: center;

对单行的子项也有作用。

<style type="text/css">

.flex { width: 500px; margin: 10px; text-align: center; border: 2px solid red; display: flex;flex-wrap: wrap;height: 300px; align-content: center}

.flex div { width: 100px; margin: 5px; font-weight:700;font-size:20px;text-align:center; }

.flex div.eg1 { background-color: #ffb685; height: 130px; }

.flex div.eg2 { background-color: #fff7b1; height: 50px; width: 120px; }

.flex div.eg3 { background-color: #b1ffc8; height: 100px; }

.flex div.eg4 { background-color: #b1ccff; height: 60px; }

</style>

<div class="flex">

<div class="eg1">1</div>

<div class="eg2">2</div>

<div class="eg3">3</div>

<div class="eg4">4</div>

</div>

结论13：

 

 

当子项为单行且flex容器有固定的高度且设置了flex-wrap: wrap;align-content: center;

 

 

对单行的子项也有作用。将单行的子项作为一个整体在交叉轴居中了。

 

flex-direction容器属性

 

 flex-direction属性决定主轴的方向（即项目的排列方向）。

.container {
  flex-direction: row | row-reverse | column | column-reverse;
}

385be22137fc7b3d1d1a5e7ee6430324.jpeg
这将建立主轴，从而定义Flex项目放置在Flex容器中的方向。Flexbox（除了可选包装）是单向布局概念。将flex项目视为主要布置在水平行或垂直列中。

 

它可能有4个值。

  1. row（默认值）：主轴为水平方向，起点在左端。
  2. row-reverse：主轴为水平方向，起点在右端。
  3. column：主轴为垂直方向，起点在上沿。
  4. column-reverse：主轴为垂直方向，起点在下沿。

案例
row：（默认值）主轴为水平方向，起点在左端 

 

 <div class="flex-direction">
        <div class="row">
            <p>我是第一个flex-direction：row</p>
        </div>
        <div class="row">
            <p>我是第二个flex-direction：row</p>
        </div>
        <div class="row">
            <p>我是第三个flex-direction：row</p>
        </div>
    </div>

    .flex-direction{
           display: flex;
           display: -webkit-flex;
           flex-direction: row;
           width: 500px;
           height: 200px;
           margin: auto;
       }
       .row{
           width: 150px;
           height: 160px;
           border: 1px  black solid;
           background-color: aqua;
       }



效果图

0768e077643b1f08cc813509a44a3a01.jpeg

 

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

 <div class="flex-direction">
        <div class="row_reverse">
            <p>我是第一个flex-direction：row-reverse</p>
        </div>
        <div class="row_reverse">
            <p>我是第二个flex-direction：row-reverse</p>
        </div>
        <div class="row_reverse">
            <p>我是第三个flex-direction：row-reverse</p>
        </div>
    </div>

 .flex-direction{
            display: flex;
            display: -webkit-flex;
            flex-direction: row-reverse;
            width: 500px;
            height: 200px;
            margin: auto;
        }
       .row_reverse{
           width: 150px;
           height: 180px;
           border: 1px #000000 solid;
           background-color: palegoldenrod;
       }


 

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

 <div class="flex-direction">
        <div class="column">
            <p>我是第一个flex-direction：column</p>
        </div>
        <div class="column">
            <p>我是第二个flex-direction：column</p>
        </div>
        <div class="column">
            <p>我是第三个flex-direction：column</p>
        </div>
    </div>

    .flex-direction{
            display: flex;
            display: -webkit-flex;
            flex-direction: column;
            width:500px;
            height: 300px;
            margin: auto;
        }
        .column{
            width: 130px;
            height: 280px;
            border: 1px black solid;
            background-color: gold;
        }

 bd88a7d9e279ce70588eefbece086786.jpeg

 

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

<div class="flex-direction">
        <div class="column-reverse">
            <p>我是第一个flex-direction：column-reverse</p>
        </div>
        <div class="column-reverse">
            <p>我是第二个flex-direction：column-reverse</p>
        </div>
        <div class="column-reverse">
            <p>我是第三个flex-direction：column-reverse</p>
        </div>
    </div>

   .flex-direction{
            display:flex;
            display: -webkit-flex;
            flex-direction: column-reverse;
            width: 500px;
            height: 300px;
            margin: auto;
        }
        .column-reverse{
            width: 150px;
            height: 200px;
            border: 1px black solid;
            background-color: lawngreen;
        }

 

 

 

彦菘
关注
flex中align-content与align-items有什么区别？
王铁柱666的博客
03-07 157
属性都是用于控制Flex容器中项目在交叉轴（垂直于主轴的轴）上的对齐方式，但两者在使用和功能上有一些重要的区别。关注的是多行Flex容器中各行之间的对齐方式和空间分配。如果Flex容器只有一行，关注的是单个项目在交叉轴上的对齐方式，而。在CSS Flexbox布局中，
无涯教程-Flexbox - align-content属性
无涯教程
02-12 1105
如果flex集合有多行(当执行flex-wrap:wrap)，则属性定义集合中每行的对齐方式。用法-aligncontentflexstartflexendcenterspacebetweenspacearoundstretch;此属性接受以下值-stretch - 内容中的行将拉伸以填充剩余的空间。flex-start - 内容中的所有行都在集合的开头。
深入理解CSS对齐属性：align-items, align-self, justify-items, justify-self
最新发布
一萧烟雨任平生
04-07 1972
属性作用对象方向适用布局覆盖关系容器垂直Flex/Grid被align-self覆盖align-self子项垂直Flex/Grid覆盖容器水平Grid被覆盖子项水平Grid覆盖记忆口诀想调垂直用align，想调水平用justify容器设置用-items，单个调整用-selfGrid布局全支持，Flex缺更精准地控制布局中的元素位置减少不必要的嵌套和冗余代码创建更灵活、响应式的设计容器定义全局规则子项只在必要时覆盖保持代码的可预测性和可维护性。
align-item 和 align-content
m0_56699208的博客
01-18 3240
当你的 flex 容器有足够的空间导致内容分布在多行时，align-content 决定了这些行如何相互间隔和对齐。它的值包括 flex-start, flex-end, center, space-between, space-around, 和 stretch。当你有一个 flex 容器，并且里面的项目不足以多行排列时，align-items 将决定这些项目如何在交叉轴上对齐。它有几个值，如 flex-start, flex-end, center, baseline, 和 stretch。
align-item 与 align-content 的区别
热门推荐
ASIYAas的博客
02-18 1万+
align-item 与 align-content 的区别
关于align-items和align-content的区别和使用场景
weixin_30314631的博客
12-14 1825
　　最近在研究flex布局，容器中有两个属性，是用来定义crossAxis测轴排列方式的。一开始接触align-items还可以理解感觉不难,后来看到align-content就感觉有点混淆了，特开一篇博客记录一下我的学习过程。先来看看两个属性的基本用法和定义，这里摘抄于萤火虫塔莉上的回答。 align-items The align-items property applies to a...
align-items和align-content的区别
namnil的博客
02-03 509
根据阮一峰的Flex 布局教程：语法篇中的描述，align-items属性定义项目在交叉轴上如何对齐，而align-content属性定义了多根轴线的对齐方式，如果项目只有一根轴线，该属性不起作用。 问题在于什么叫多根轴线 多根轴线 通过flex-wrap属性可以控制容器中的项目是否换行，一旦flex-wrap的属性不为nowrap，那么容器中就有可能存在多行（内容不足以换行时并不会换行）。每一行...
Flex弹性盒布局-flex-direction、flex-wrap、justify-content、align-items
m0_64460142的博客
04-12 2506
Flex弹性盒布局 flex弹性布局：之前我们学过浮动和定位设置px值才能进行页面排版，flex会比较方便。它比较弹性。 采用 Flex 布局的元素，称为 Flex 容器（flex container），简称“容器”。它的所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称“项目”。容器默认存在两根轴，分别为水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置叫做 main start，结束位置叫做 main end；交叉轴的开始位置叫做 cro
0077 flex：flex-direction、justify-content、flex-wrap、align-content、align-items、flex-flow、align-self、or
maopolunzi的博客
12-28 809
移动web开发——flex布局 1.传统布局和flex布局对比 1.1传统布局 兼容性好 布局繁琐 局限性，不能再移动端很好的布局 1.2 flex布局 操作方便，布局极其简单，移动端使用比较广泛 pc端浏览器支持情况比较差 IE11或更低版本不支持flex或仅支持部分 1.3 建议 如果是pc端页面布局，还是采用传统方式 如果是移动端或者是不考虑兼容的pc则采用flex 2. fl...
css flex布局 —— 容器属性 align-content
且听风吟的博客
10-11 3265
css flex布局 —— 容器属性 align-content
2022-09-30 解决弹性布局flex中,align-item无法居中的问题
GAARA
09-30 1276
文章目录 问题出现 解决方法 效果 height:100%和height:100vh的区别 问题出现 .container{ display: flex; justify-content: center; align-items: center; } #box{ width: 100px; height: 100px; background-color: #1890FF; }
align-content align-items flex-direction flex-wrap flex-flow 什么意思
06-11
- align-content：定义了多根轴线（即多行）的对齐方式，只有在有多行时才会生效。常用的取值有：flex-start、flex-end、center、space-between、space-around、stretch等。 - align-items：定义了单根轴线（即一行...
align-content和align-items的区别
包磊磊的博客
01-18 695
在之前使用弹性布局的时候,align-content与align-items的概念混淆不清,自己特意写了一下来区分. 以下是我的初始代码: 初始代码 效果是这样子的: 初始的效果 测试一: 那么 在.bigbox中添加align-items:center以后,侧轴居中了,效果如下: align-items:center 在.bigbox中...
align-items和align-content区别详解
IOT123的博客
11-05 1019
目录 一、子项为单行时 1.1 flex盒子不设置高度时 1.2 flex盒子设置高度时 二、子项为多行时 2.1 flex盒子没有高度时 2.2 flex盒子设置高度时 三、拓展 四、总结 一、子项为单行时 1.1 flex盒子不设置高度时 初始状态如下 flex盒子添加align-items: center时，结果如下 结果：可以看到每个每个子元素都居中显示 flex盒子添加align-content: center时，结果如下 结果：和初始状态没有区别..
小程序笔记—一文弄懂align-items与align-content的区别（实操）
WeiHan_Seven的博客
01-19 3826
flex布局是小程序的主流布局之一，在写布局的时候总是无法避免align-items与align-content这两个属性，除了知道它们是控制交叉轴的对齐方式，但究竟什么时候用哪个，只能这个不行，就换那个，今天就来搞明白他们的异同。
flex布局详解（内含align-items和align-content的对比案例）
xiaouncle的博客
11-08 4378
flex布局详解（内含align-items和align-content的对比案例）
align-items和align-content
qq_33256648的博客
04-12 255
测试两个值都是 center。第一个是所以的子元素都在中间。第二个是相当于把整行元素看成一个整体，然后在展示在中间。 align-items: align-content: 2.测试两个值都是 flex-end (同上原因，align-content所在一行子元素看成一整体。align-items，把一行中的每个子元素偏向独立) align-items: align-cont...
概述flex布局中align-items 和align-content的区别
小马过河
05-07 5730
align-items属性适用于所有的flex容器，它是用来设置每个flex元素在侧轴上的默认对齐方式。   align-content属性只适用于多行的flex容器，并且当侧轴上有多余空间使flex容器内的flex线对齐。   align-items和align-content有相同的功能，不过不同点是它是用来让每一个单行的容器居中而不是让整个容器居中。   对于只有一行的flex元...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值