---
# System prepended metadata

title: EP09__彈性盒子flexbox
tags: [FD前端學習]

---

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

# EP09__彈性盒子flexbox

{%hackmd @Limo470/image-scroll %}

特殊展示效果(display)，**將標籤內內容物**進行對齊放置，為最有彈性佈局方式，預設將物件向後方水平排列。
```
{display:flex;}
```
https://monoame.com/works
![](https://i.imgur.com/rHefFD6.png)
![](https://i.imgur.com/AiFarRB.png)

[導圓角border-radius](https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius)


[游標變化cursor](https://developer.mozilla.org/zh-TW/docs/Web/CSS/cursor)

![](https://i.imgur.com/OJt1CKH.png)pointer

![](https://i.imgur.com/FHdX6ry.png)text

設定間距
`  gap:10px;`


#### 🛣對齊方式
>🎇justify-content/align-items
以九宮格式進行物件排列

水平方向：justify-content 
垂直方向：align-items

**flex-start**
物件放置在前
![](https://i.imgur.com/9P6rRRd.png)

**center**
物件放置在中
![](https://i.imgur.com/CnH6xxF.png)


**flex-end**
物件放置在後
![](https://i.imgur.com/bavAtOC.png)


**space-between**
物件前後置放散開排列
![](https://i.imgur.com/APCIjwv.png)

**spacr-around**
物件前後與彼此間間隔

![](https://i.imgur.com/w0nAfIb.png)

https://www.idea-focus.com/
![](https://i.imgur.com/KIlfVrI.png)

![image](https://hackmd.io/_uploads/rk5D31zhR.png)


||方向|justify-content|align-items|
| --- | --- | --- | --- | 
|⬅️⬆️|前上|flex-start|flex-start|
|⬅️⏺|前中|flex-start|center|
|⬅️⬇️|前下|flex-start|flex-end|
|||||
|⏺⬆️|中上|center|flex-start|
|⏺⏺|中中|center|center|
|⏺⬇️|中下|center|flex-end|
|||||
|➡️⬆️|後上|flex-end|flex-start|
|➡️⏺|後中|flex-end|center|
|➡️⬇️|後下|flex-end|flex-end|
|||||
|↔️⬆️|散上|space-between|flex-start|
|↔️⏺|散中|space-between|center|
|↔️⬇️|散下|space-between|flex-end|
|||||
|⏸⬆️|間上|space-around|flex-start|
|⏸⏺|間中|space-around|center|
|⏸⬇️|間下|space-around|flex-ehd|
|||||

#### 🎢斷行方式與排列方向

**內容斷行：**
子物件超出父層是否斷行或者撐開父層


**排列方向：**
預設往後水平排列，亦可改為上下垂直排列，留意對齊設定將向順時針90度旋轉。

||||||
|-|-|-|-|-|
|斷行|```flex-wrap:wrap;```|||
|不斷行|```flex-wrap:nowrap;```|||
|||
|水平排列|```flex-direction:row;```||||
|垂直排列|```flex-direction:column;```|||||
|||


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

![](https://i.imgur.com/MRK731L.png)
<!-- 


子物件填滿父層

設定本身的填滿屬性
且父層已設定```display:flex;```

佔滿父層佔滿比例

```
flex:1;
```




若父層為400px 
子層皆是flex 1 
如下

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

|flex||||
|:-:|:-:|-|-|
|🌕|🌑|佔比|
|3|1|🌕🌕🌕🌑|
|1|1|🌕🌕🌑🌑|
|1|3|🌕🌑🌑🌑|
|3|5|🌕🌗🌑🌑|
|1|7|🌗🌑🌑🌑|
 -->
作業

🎨文字+背景色即可


![](https://i.imgur.com/wdq1Kp8.jpg)

填滿父層
{flex：1；}
常見於排版效果
能填滿畫面
以利於rwd效果

設定最小大小
min-width
此標籤將不會小於該大小
若父層
{flex-wrap:wrap;}
小於子物件大小
將向下斷行


