內元件

從前面介紹會發現，調整外容器時內元件都是一起變更的，若想單獨針對內元件進行調整，需要另外進行設定

內元件 (items)

• flex：下面 3 個屬性的組合
  • flex-grow：伸展比
  • flex-shrink：收縮比
  • flex-basis：絕對值
• order：排序
• align-self：單一物件的交錯軸對齊

接下來做個簡單的並排選單練習

HTML

首先完成基本列表，使用 <ul> 和 <li>
因為是要點擊連結，所以加入 <a>
最後將這個設定一個 class="menu"

<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 設定為 Flex，並且設定上下置中

.menu{
  width: 600px;
  margin: 0 auto;
  display: flex;
  border: 1px solid #000;
  list-style: none;
}

顯示結果

可以看到已經上下置中排到同一排，border 可以方便確認範圍區塊，確認後再移除，list-style: none; 可以去除選單前方的小黑點

接下來左右均分，因為 6 個 <li>，因此每個 width＝600/6
將文字置中，text-align: center;
增加<li>外框線，border: 1px solid #000;

.menu li{
  width: 100px;
  text-align: center;
  border: 1px solid #000;
}

結果如圖

再來將裡面的<li>、<a>設定為區塊
設定背景色與文字顏色
上下用 padding調整內距
將 <a> 底線去除

.menu li a{
  display: block;
  background: #00ffa2;
  padding-top: 10px;
  padding-bottom: 10px;
  text-decoration: none;
  color: #004466;
}

顯示結果，可以看到幾乎完成了

接著使用 :hover 增加滑鼠滑過去出現的效果，修改被景色與文字顏色

.menu li a:hover{
  background: #004466;
  color: #00ffa2
}

大功告成