# Flexbox教學

## Flexbox教學

在包裹容器加入

```
 display: flex;
```

## 包裹容器屬性(Parent)

### flex-direction

1.排列行或列

<http://www.w3schools.com/cssref/tryit.asp?filename=trycss3_flex-direction>

```
flex-direction: row | row-reverse | column | column-reverse;
```

### flex-wrap

2.要不要分行

```
flex-wrap: nowrap | wrap | wrap-reverse;
```

### flex-flow

shortcut <http://www.w3schools.com/cssref/css3_pr_flex-flow.asp>

```
flex-flow: <‘flex-direction’> || <‘flex-wrap’>
```

### justify-content

3.元素間的排列方式

<http://www.w3schools.com/cssref/tryit.asp?filename=trycss3_justify-content>

```
 justify-content: flex-start | flex-end | center | space-between | space-around;
```

### align-items

4.元素整體排列方式 (元素間為column)

<http://www.w3schools.com/cssref/tryit.asp?filename=trycss3_align-items>

```
 align-items: flex-start | flex-end | center | baseline | stretch;
```

### align-content

5.元素整體排列方式 (元素間為row)\
<http://www.w3schools.com/cssref/playit.asp?filename=playcss_align-content&preval=stretch>

```
align-content: flex-start | flex-end | center | space-between | space-around | stretch;
```

## 容器內元素屬性(Children)

### order

1.排列順序order，數字越小越左邊

<http://www.w3schools.com/cssref/tryit.asp?filename=trycss3_order>

```
order: <integer>;
```

### flex-grow

2.元素所占空間比例，數字大空間大

<http://www.w3schools.com/cssref/tryit.asp?filename=trycss3_flex-grow>

```
  flex-grow: <number>; /* default 0 */
```

### flex-shrink

3.元素所占空間比例，數字大空間小

<http://www.w3schools.com/cssref/tryit.asp?filename=trycss3_flex-shrink>

```
flex-shrink: <number>; /* default 1 */
```

### flex-basis

4.強制讓元素固定大小(會蓋過width)

<http://www.w3schools.com/cssref/tryit.asp?filename=trycss3_flex-basis>

<https://www.w3.org/TR/css3-flexbox/images/rel-vs-abs-flex.svg>

```
flex-basis: <length> | auto; /* default auto */
```

### flex

5.上面三個可縮寫

<http://codepen.io/HugoGiraudel/pen/95aeaf737efab9c2c1c90ea157c091c6>

```
flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
```

```
flex: 1 1 20em (shorthand for flex-grow: 1, flex-shrink: 1, flex-basis: 20em)
```

### align-self

6.元素的位置類似於align-item但為單個元素

```
align-self: auto | flex-start | flex-end | center | baseline | stretch;
```

## 相關問題

1.如果在子元件 flex 1 這樣設定沒反應，但設定 width 有反應，則可能是 text overflow，把子組建的 width 移除然後加上 overflow: hidden，然後再設定一次 flex: 1 與另一元件為 flex: 2試試

## 相關題目：

<https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/381#issuecomment-706830714>


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://easonwang.gitbook.io/web_basic/css-advance/flexbox.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.