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

目录

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

flex-direction容器属性

---

 

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

 

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

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

只在两种情况下有效果：

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

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

---

 

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

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

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

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

 

 

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

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

 

 

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

 

 

第2部分：实例演示

例1效果图：

 

 

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

 

 

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

 

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-w