iT邦幫忙

2018 iT 邦幫忙鐵人賽
DAY 30
1
自我挑戰組

網頁學習日誌系列 第 30

Flex : Bootstrap 4 Flex 網格

Bootstrap4 開始用flex來排版,這次也用上一個春聯案例來試試看排版。

以下有幾個使用flex重點:

1.移動方向:

a.左右(x軸)--row

justify-content:從 start(瀏覽器預設)、 endcenterbetween、或 around中選擇。

b.上下(y軸)--col

align-items:從startendcenterbaseline、 或 stretch (瀏覽器預設) 中選擇。

c.自身移動--

align-self:startendcenterbaseline、 或 stretch (瀏覽器預設)。

2.啟用flex

a.無網格--

http://bootstrap.hexschool.com/docs/4.0/utilities/flex/

d-flex和d-inline-flex:
使用 display 通用類別來創建一個 flexbox 容器,並將 直屬內元素 轉換為 flex 屬性。

flex-row和flex-row-reverse:
透過通用類別來設定 flex 容器與內層 flex 的方向。

<div class="d-flex flex-row justify-content-around block">
  <div class="box text-center font-weight-bold">天增歲月人增肥</div>
  <div class="box text-center font-weight-bold">福滿乾坤豬滿堂</div>
</div>//text-center 紅字,font-weight-bold 粗體字

codepen:https://codepen.io/yuski/pen/NXjwvx

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

b.網格系統 row和col--

http://bootstrap.hexschool.com/docs/4.0/layout/grid/
本身具有flex屬性不用另外加上d-flex啟用

<div class="container">//container 無滿版靠中對齊
  <div class="row justify-content-around block">
    <div class="col-1">//12分之一欄位
       <div class="box text-center font-weight-bold">
       天增歲月人增肥
       </div>
    </div>
  <div class="col-1">
       <div class="box text-center font-weight-bold">
       福滿乾坤豬滿堂
       </div>
    </div>
  </div>
</div>

codepen:https://codepen.io/yuski/pen/rpmorR

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

以上只是差在有沒有網格系統,可以視情況而使用!

如果有用「網格系統」

「他父層級一定是row(行),子層級一定是column(欄),最外層則用container包起來」

codepen:

網格:

https://codepen.io/yuski/pen/rpmorR

無網格:

https://codepen.io/yuski/pen/NXjwvx


上一篇
Flex:春聯
系列文
網頁學習日誌30

尚未有邦友留言

立即登入留言