---
tags: FD前端學習
---

# EP10__排版類型_flex

{%hackmd @Limo470/image-scroll %}

###### tags: `FD前端學習`

## display:flex

將展示屬性訂為 **`display`**
將其 **`子層`** 物件水平排列

display:flex;
justify-content:space-between;
align-items:flex-start;
flex-wrap:wrap;
flex-direction:row;
gap:10px;

<div class="display-flex">
    <div>01</div>
    <div>02</div>
    <div>03</div>
</div>

### justify-content
控制物件(左右)排序方式(置前、置後、平均分散、間隔排列...)
`justify-content:space-between;`

### align-items
控制物件(上下)靠齊方式(置前、置後...)
`align-items:flex-start;`

### flex-wrap
當物件大小超出父層(overflow)， **`物件`** 進行換行wrap/nowrap
`flex-wrap:wrap;`

### gap
物件之間預設間隔(類似margin)
`gap:5px;`

## flex-direction
設定該物件排列方向，橫排為row直派為column
💎justify-content與align-items隨 **`column翻轉`**
`flex-direction:column;`

## flex:1;
1. **`父層`** 須為display:flex;
2. 設定在 *`物件`* 本身，本身自動填滿父層(flex:1;佔1等分、flex:2;佔2等分)
3. 子物件繼承flex:1;
4. 高寬由內容物決定`width:fit-content;`

### 常見版面配置

<b>

|-|lv1|lv2|lv3|-|
|-|-|-|-|-|
|🎅|頁首header|logo
|||nav|menu|links
|🥼|主體main|topbar|menu|links
|||sidebar|menu|links
|||main|section
|🦵|頁尾footer|info|

</b>

<iframe height="400" style="width: 100%;" scrolling="no" title="flex" src="https://codepen.io/limo147/embed/eYjqEML?default-tab=css%2Cview" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
See the Pen <a href="https://codepen.io/limo147/pen/eYjqEML">
flex</a> by limo147 (<a href="https://codepen.io/limo147">@limo147</a>)
on <a href="https://codepen.io">CodePen</a>.
</iframe>

<iframe height="300" style="width: 100%;" scrolling="no" title="Untitled" src="https://codepen.io/limo147/embed/rNrXGzB?default-tab=css%2Cview" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
See the Pen <a href="https://codepen.io/limo147/pen/rNrXGzB">
Untitled</a> by limo147 (<a href="https://codepen.io/limo147">@limo147</a>)
on <a href="https://codepen.io">CodePen</a>.
</iframe>

## border-radius
https://www.webdesigns.com.tw/css_border-radius.asp

導圓角
<div class="edit"><p>預設的div區塊為方形，CSS的border-radius屬性可以幫div添加圓角的效果，</p>
<p>設定值為圓角的半徑值，例如：border-radius:5px 意思為圓角半徑為5px</p>
<div>我們可以依據自身需求為div的四個邊分別設定不同數值，</div>
<div>四個數值對應的方向為 border-radius:&nbsp; 左上 右上 右下 左下</div>
<div>
<div>範例：</div>
<iframe height="265" scrolling="no" title="xQJbqB" src="//codepen.io/bok770/embed/xQJbqB/?height=265&amp;theme-id=0&amp;default-tab=css,result" frameborder="no" allowtransparency="true" allowfullscreen="true" style="width: 100%;">See the Pen <a href='https://codepen.io/bok770/pen/xQJbqB/' _fcksavedurl='https://codepen.io/bok770/pen/xQJbqB/'>xQJbqB</a> by Ya (<a href='https://codepen.io/bok770' _fcksavedurl='https://codepen.io/bok770'>@bok770</a>) on <a href='https://codepen.io' _fcksavedurl='https://codepen.io'>CodePen</a>.
</iframe>
<div>以上範例僅設了兩個圓角10px，分別為右下角和左下角，其他兩邊設成0，所以會是直角。</div>

<div>若只設一個數值，則全部的角皆會設成該值</div>
<div>範例：</div>
<iframe height="265" scrolling="no" title="ZmjYpo" src="//codepen.io/bok770/embed/ZmjYpo/?height=265&amp;theme-id=0&amp;default-tab=css,result" frameborder="no" allowtransparency="true" allowfullscreen="true" style="width: 100%;">See the Pen <a href='https://codepen.io/bok770/pen/ZmjYpo/' _fcksavedurl='https://codepen.io/bok770/pen/ZmjYpo/' _fcksavedurl='https://codepen.io/bok770/pen/ZmjYpo/' _fcksavedurl='https://codepen.io/bok770/pen/ZmjYpo/'>ZmjYpo</a> by Ya (<a href='https://codepen.io/bok770' _fcksavedurl='https://codepen.io/bok770' _fcksavedurl='https://codepen.io/bok770' _fcksavedurl='https://codepen.io/bok770'>@bok770</a>) on <a href='https://codepen.io' _fcksavedurl='https://codepen.io' _fcksavedurl='https://codepen.io' _fcksavedurl='https://codepen.io'>CodePen</a>.
</iframe></div>

<div>若要設計圓形可以設border-radius: 99em</div>
<div>範例：</div>
<p><iframe height="265" scrolling="no" title="KrBwNy" src="//codepen.io/bok770/embed/KrBwNy/?height=265&amp;theme-id=0&amp;default-tab=css,result" frameborder="no" allowtransparency="true" allowfullscreen="true" style="width: 100%;">See the Pen <a href='https://codepen.io/bok770/pen/KrBwNy/' _fcksavedurl='https://codepen.io/bok770/pen/KrBwNy/' _fcksavedurl='https://codepen.io/bok770/pen/KrBwNy/'>KrBwNy</a> by Ya (<a href='https://codepen.io/bok770' _fcksavedurl='https://codepen.io/bok770' _fcksavedurl='https://codepen.io/bok770'>@bok770</a>) on <a href='https://codepen.io' _fcksavedurl='https://codepen.io' _fcksavedurl='https://codepen.io'>CodePen</a>.
</iframe></p>

## background-image

div {
  background-image: url(https://i.redd.it/59rzinpiayw01.jpg);
  background-position: top;
  background-repeat: no-repeat;
  background-color: gray;
  background-size: contain;
  background-size: cover;
}

<b>

數值

|/////////////////////|數值|說明|
|-|-|-|
|background-image|url(圖片檔案位置)|在背景色之上|
|background-position|圖片放置方位|-|
|background-repeat|圖是否重複|-|
|background-color|背景色|在圖片之下|
|background-repeat|圖是否重複|-|
|background-repeat|圖是否重複|-|
|-|-|-|
|background-size|contain|完整包含，保持圖片完整性，等比縮放，可能會露出背景色|
|background-size|cover|延展覆蓋，等比延伸圖片占滿tag，空間不足會隱藏圖片資訊|

</b>

<iframe height="300" style="width: 100%;" scrolling="no" title="background-image" src="https://codepen.io/limo147/embed/dyqyxNj?default-tab=css%2Cresult" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
See the Pen <a href="https://codepen.io/limo147/pen/dyqyxNj">
background-image</a> by limo147 (<a href="https://codepen.io/limo147">@limo147</a>)
on <a href="https://codepen.io">CodePen</a>.
</iframe>

https://www.asos.com/us/men/shirts/cat/?cid=3602
https://special.moe.gov.tw/study.php
https://www2.inservice.edu.tw/

<!-- 1.  -->
<!-- 1.  -->
<!-- 1.  -->
<!-- 1.  -->
<!-- 1.  -->
<!-- 1.  -->
<!-- 1.  -->

<b>

001

</b>

<b>

002

</b>