CSS-Align Item 對齊標籤內容

https://affinity.help/designer/en-US.lproj/index.html?page=pages/ObjectControl/align.html?title=Aligning%20objects

首先複習一下

之前都在研究Justify-content 是屬於 X軸 主軸方向。

這一篇主要講述 Y軸 也就是交錯軸!

MDN_Web 演示範例

https://developer.mozilla.org/en-US/docs/Web/CSS/align-items

---

HTML 文本

<ul class="menu">
  <li><a href="#">首頁</a></li>
  <li><a href="#">政治</a></li>
  <li><a href="#">娛樂</a></li>
  <li><a href="#">論壇</a></li>
  <li><a href="#">財經</a></li>
  <li><a href="#">運動</a></li>
</ul>

CSS 裝飾語言

.menu{
    display: flex;
    background: greenyellow;
    width: 1000px;
    margin: 0 auto;
    padding: 50px;

    flex-direction:column;
    justify-content:flex-start;
    flex-wrap: nowrap;

    align-items:center;
  }


  .menu li{
    background: rgb(31, 161, 231);
    font-size: 30px;
    width: 600px;
    text-align: center;
    margin: 10px;
  }

  .menu li a{
    margin: 6px;
    display: block;
    background: #4a4afc;
    padding-top: 5px;
    padding-bottom: 10px;
    text-decoration: none;
    color: #FFFFFF;
  }
  .menu li a:hover{
    background: #6A6AFF;  
    color: #ADADAD;
   }

演示結果