Day 10 CSS的Flexbox實作與練習--align-items與align-self

14th鐵人賽

田田

團隊直接在你主堡跳舞

2022-09-25 14:35:19

1197 瀏覽

分享至

昨天說明的排列方式，主要是透過在同一條橫線上的物件進行左右的分布與排列。今天要介紹物件垂直的排列方式，就是當物件在同一條橫線上，該怎麼進行上下移動的分布與排列呢？

HTML與CSS的基本配置

與昨日相同，在HTML的部分一樣式透過一個大盒子包著三個小盒子，HTML可參考昨日的文章。為了要明顯看出本日排列的差異，會設置三個不同大小與顏色的盒子，首先來看一下本日的CSS語法的配置：

.box{
  display:flex;
  height:200px;
  border:1px solid #000000;
  justify-content:space-around;
}

.box1 {
  font-size:24px;
  text-align:center;
  line-height:50px;
  width: 50px;
  height: 50px;
  color:white;
  background-color: rgba(200,0,0,1);
}

.box2 {
  font-size:24px;
  text-align:center;
  line-height: 100px;
  width: 100px;
  height: 100px;
  color:white;
  background-color: rgba(0,100,0,1);
}

.box3 {
  font-size:24px;
  text-align:center;
  line-height: 150px;
  width: 150px;
  height: 150px;
  color:white;
  background-color: rgba(0,0,100,1);
}

三盒子原始

垂直對齊父元素`align-items`

接著在父元素box的部分分別加上以下幾種CSS語法，透過align-items來進行對齊父元素的垂直排列，現在來觀察網頁的變化：

align-items:flex-start; /*對齊頂線*/
align-items:flex-end; /*對齊底線*/
align-items:center; /*置中對齊*/
align-items:stretch; /*拉伸，在box1、box2、box3沒有設定高度時會拉到與box一樣高，為預設值*/
align-items:baseline; /*對齊同一行中最大行高的中線，此範例中會對齊3*/

flex-start 對齊父元素頂線

三盒子原始

flex-end 對齊父元素底線

對齊底線

center 對齊中線

對齊中線

stretch 拉伸(預設)

該語法為預設值，當子元素沒有設定高度時，將會將子元素高度拉到與父元素一致。以下圖片為刪除box1、box2、box3高度時所產生的結果。

baseline 對齊基準線

該語法會對齊同一行中高度最高者的中線，就是父元素第一行的中線，以此範例觀察會自動對齊box3的中線，可參考下圖。
對齊基準線

調整單一子元素`align-self`

若在父元素中想要特立獨行，可以用對齊自己的方式擺脫父元素中指定的對齊樣式，也就是將這些變化放在子元素的Class中，以下範例將會在box2中加入以下幾種CSS語法，可自行嘗試看看會有什麼變化：

align-self: flex-end; /*對齊父元素底線*/
align-self: flex-start; /*對齊父元素頂線*/
align-self: center; /*對齊父元素中線*/
align-self: stretch; /*拉伸，如果自己沒有設定高度會拉到與父元素一樣高*/
align-self: baseline; /*對齊自己的行高基準線*/