iT邦幫忙

2018 iT 邦幫忙鐵人賽
DAY 29
0
自我挑戰組

網頁學習日誌系列 第 29

Flex:春聯

新曆年一到之後就是農曆新年,為了應景來用html寫個春聯,css3 的flex剛好套用在這次範例來說明他的好用之處。

html:

設定外框(wall)包住兩張春聯(paper)

<div class="wall">
   <div class="paper">
      十口心思思君思國思社稷
    </div>
   <div class="paper">
     八目共賞賞花賞月賞秋香
   </div>
</div>

css:

1.加上外框和春聯的寬高和背景顏色

.wall{
  width: 300px;
  height: 250px;
  background:yellow;
}
.paper{
  width: 30px;
  height: 220px;
  background:red;
}

2.設定flex

flex 的重點就是在外層(block)設置為display:flex,讓裡面元件(box)可以在它的範圍內調整位置..

依照外牆內部範圍(align-items、align-self、justify-content…),來調整春聯位置。

外牆block調整如下:

01.設定display:flex;

02.設定春聯的位置為兩邊:

使用的語法為justify-content:他是針對左右移動
往兩邊排放有兩種,兩種都試試看

a. space-around

.wall{
  display:flex;
  justify-content: space-around;
}

https://ithelp.ithome.com.tw/upload/images/20200411/20107321bskGfbNw5h.png

b. space-between

.wall{
  display:flex;
  justify-content: space-between;
}

https://ithelp.ithome.com.tw/upload/images/20200411/20107321PjUyAiVf4U.png

目前第二種space-between比較適合春聯擺放位置,現在來調整文字位置,水平和垂直置中

水平置中最簡單的方式就直接設定春聯 text-align:center;
當然也可以用flex來設定不過還要在文字再設一個外層並設定文字寬度,讓整個程式碼更多

.paper{
  width: 30px;
  height: 220px;
  background:red;
  text-align:center;
  font-weight: bold;
}

垂直置中:
文字外框也就是paper,把他設定flex,並讓他垂直去排列,使用的語法為align-items,置中則設定為center

.paper{
  display:flex;
  align-items:center;
}
  

結果如下圖:

https://ithelp.ithome.com.tw/upload/images/20200411/201073214ToYSqtXWG.png

codepen:

左右聯:https://codepen.io/yuski/pen/Zvedze
上左右聯:https://codepen.io/yuski/pen/GyWaGw

flex 教學資源

透過青蛙遊戲了解flex:(推薦)
http://flexboxfroggy.com/#zh-tw

Flex 產生器:
https://loading.io/flexbox/

flex用法可參考w3c:
https://www.w3schools.com/cssref/css3_pr_justify-content.asp

深入解析CSS Flexbox:
http://www.oxxostudio.tw/articles/201501/css-flexbox.html


上一篇
API : Google Maps API 設定(4) js+json 標記 wifi 熱點
下一篇
Flex : Bootstrap 4 Flex 網格
系列文
網頁學習日誌30

尚未有邦友留言

立即登入留言