flex布局之a(chǎn)lign-items屬性詳解

1. 介紹

align-items類似于justify-content可以設(shè)置子元素的顯示的位置，不同的是justify-content設(shè)置的是子元素在主軸方向上的，而align-items則是設(shè)置子元素在側(cè)軸中的位置，相對justify-content屬性了解的可參考flex布局之justify-content屬性詳解，那么接下來就讓我來介紹align-items的值。（注：align-items生效的前提示flex容器不換行，以下演示均已側(cè)軸為從上到下方向）

  • flex-start（默認(rèn)）
即默認(rèn)狀態(tài)下的在側(cè)軸的上邊位置，頁面代碼如下：
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    #container {
      display: flex;
      margin: 0px auto;
      width: 800px;
      height: 400px;
      background-color: purple;
      align-items: flex-start;
    }
    .item {
      background-color: red;
      margin-left: 10px;
      margin-top: 10px;
      width: 250px;
      height: 100px;
    }
  </style>
</head>
<body>
  <div id="container">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">1</div>
    <div class="item">2</div>
  </div>
</body>
</html>

其效果如下：


align-items: flex-start效果

  • flex-end
    其flex-end則是在側(cè)軸的下邊位置，效果如下圖所示：


    align-items: flex-end效果

  • center
    設(shè)置為center值之后，其子元素整體的位置則是在側(cè)的中心位置，其效果如下：


    align-items: center效果

自己先給自己點個贊，沖啊！咱是最棒的！嘿嘿！觀看的小可愛一起點個贊唄，求求了！

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容