Day16 CSS排版之神flex

2021 iThome 鐵人賽

DAY 16

Modern Web

我的網頁前端小小小教室系列第 16 篇

13th鐵人賽

karta1366796

團隊imac_跳過這篇

2021-09-30 14:45:26

1152 瀏覽

分享至

今天要介紹十分好用的一個屬性display:flex。

有了這個東西以後，不用再擔心會排版排到想摔電腦，他可以幫你處理得十分恰到好處，接下來我們就要來認識干貨中的干貨!

首先我們得要了解外容器與內容器，就是由一個大的div包住3個小的div，形成一個外容器與內容器的關西。

我們先介紹外容器container的屬性。
主要是:

display:flex(一定要設定的，不然就不會叫flex排版神器了。)
flex-direction(決定排版方向水平或垂直。)
justify-content(水平方向的對齊模式，但還是要看主軸。)
align-items(垂直方向的對齊模式，但還是要看主軸。)

display:flex

我們一定要在外容器加上這條屬性，否則是沒有作用的。

flex-direction

排序的方向，決定了是從左往右水平，或是從上往下垂直，也可以相反過來，從右往左水平、或是從下往上垂直。

這是flex預設的排版方向，從左往右排。當然方向也可以透過調整屬性改變。

.container {
  flex-direction: row | row-reverse | column | column-reverse;
}

row:從左往右。
row-reverse:從右往左。
column:從上往下。
column-reverse:從下往上。

justify-content

排版的靠齊方式(預設水平)，有點像word裡面的置中、靠左、靠右、平均分配。

.container {
  justify-content: flex-start | flex-end | center | space-between | space-around;
}

總共會有這些屬性，大家可以去試試看，最常用的就是center置中。

align-items

一樣也是排版的靠齊方式，是交錯線(預設垂直)的部分，最常設定的也是center置中。

.container {
  align-items: flex-start | flex-end | center | baseline | stretch;
}

要注意這些屬性都是選擇一個喔!不要傻傻的全部複製貼上去了。

例如:

.container{
    justify-content:center;
    align-items:center;
}

以下是示範例子

我們需要一個三個項目的版面。分別有圖片跟文字。

<body>
    <div class="container">
        <div class="item">
            <img src="https://picsum.photos/seed/picsum/200/250 " alt="">
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum ipsam eos, accusamus ipsum facilis mollitia, repellendus, eius maiores consequuntur non voluptates esse. Itaque odio laborum aperiam quae dignissimos, deleniti unde!</p>
        </div>
        <div class="item">
            <img src="https://picsum.photos/seed/picsum/200/250" alt="">
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum ipsam eos, accusamus ipsum facilis mollitia, repellendus, eius maiores consequuntur non voluptates esse. Itaque odio laborum aperiam quae dignissimos, deleniti unde!</p>
        </div>
        <div class="item">
            <img src="https://picsum.photos/seed/picsum/200/250" alt="">
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum ipsam eos, accusamus ipsum facilis mollitia, repellendus, eius maiores consequuntur non voluptates esse. Itaque odio laborum aperiam quae dignissimos, deleniti unde!</p>
        </div>
    </div>
</body>

這是一開始所呈現的，而我們要開始施展魔法了。

<style>
       .container{                  
           display: flex;
           justify-content: center;
           align-items: center;
       }

       .item{
           width: 300px;
           height: 250px;
           margin: 10px;
       }

       img{
           width: 100%;
           height: 100%;
       }
        
</style>

一個三欄的版面幾乎不用30秒完成了!記得要把圖片設定成滿版，才會占滿整個item的寬喔!