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

# EP09__彈性盒子flexbox

{%hackmd @Limo470/image-scroll %}

特殊展示效果(display)，**將標籤內內容物**進行對齊放置，為最有彈性佈局方式，預設將物件向後方水平排列。

{display:flex;}

https://monoame.com/works

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

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

pointer

text

設定間距
` gap:10px;`

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

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

**flex-start**
物件放置在前

**center**
物件放置在中

**flex-end**
物件放置在後

**space-between**
物件前後置放散開排列

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


https://www.idea-focus.com/


||方向|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>

<!--

子物件填滿父層

設定本身的填滿屬性
且父層已設定```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|🌗🌑🌑🌑|
-->
作業

🎨文字+背景色即可


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

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