CSS align-items詳解

一、基本概念

align-items是指定義在flex容器上的屬性，用於控制flex子元素在flex容器中的垂直對齊方式。該屬性定義了在交叉軸（Cross Axis）上，如果存在多個子元素，如何對其進行對齊。

align-items的常見取值為flex-start（在容器交叉軸的起始位置對齊）、flex-end（在容器交叉軸的結束位置對齊）、center（在容器交叉軸的中心位置對齊）、stretch（默認狀態，將子元素在交叉軸方向上拉伸填充滿容器交叉軸空間）等。

二、實現垂直居中

在flex布局中，在父元素上設置display:flex可以使子元素按照一定的規則進行排列。如果想要實現垂直居中，除了設置flex-direction: column使子元素從上往下排列外，還可以設置align-items:center屬性。

.parent{
  display:flex;
  flex-direction:column;
  align-items:center;
}

上述代碼中，flex-direction: column是讓子元素從上往下排列的屬性，而align-items:center屬性是垂直居中的實現方式。

三、實現底部對齊

通過設置align-items:flex-end屬性可以將子元素放在容器的底部。

.parent{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
}

上述代碼中，flex-direction: column是讓子元素從上往下排列的屬性，而align-items:flex-end則讓子元素對齊到容器的底部。

四、實現左對齊

除了實現垂直居中、底部對齊，align-items屬性還可以用於實現左對齊。

.parent{
  display:flex;
  align-items:flex-start;
}

上述代碼中，align-items:flex-start屬性將子元素向左對齊，因為flex-direction默認為row。

五、實現上對齊

通過調整容器高度，可以實現子元素上對齊。在父元素上設置align-items:flex-start屬性，子元素設置高度為100%即可。

.parent{
  display:flex;
  align-items:flex-start;
  height:200px;
}
.child{
  height:100%;
}

六、總結

align-items是用於控制flex子元素在flex容器中的垂直對齊方式的屬性，常見取值為flex-start、flex-end、center、stretch等。通過設置不同的取值，可以實現垂直居中、底部對齊、左對齊、上對齊等效果。