---
# System prepended metadata

title: 0513 flex、網站製作
tags: [跨裝置企業平台與資料庫整合設計班]

---

0513 flex、網站製作
===

## flex
[圖解：CSS Flex 屬性一點也不難](https://wcc723.github.io/css/2017/07/21/css-flex/)
[FLEXBOX FROGGY](https://flexboxfroggy.com/)  
有24關,教你怎樣使用 flex  

### level 1.
![](https://i.imgur.com/Ur973zo.png =200x)
```htmlmixed=
justify-content:flex-end;
```
![](https://i.imgur.com/h1nnawe.png =200x)

### level 2.
![](https://i.imgur.com/bSMQPuV.png =200x)
```htmlmixed=
justify-content:center;
```
![](https://i.imgur.com/gQw1UVo.png =200x)

### level 3.
![](https://i.imgur.com/57mk4eG.png =200x)
```htmlmixed=
justify-content:space-around;
```
![](https://i.imgur.com/fk2zjCo.png =200x)

### level 4.
![](https://i.imgur.com/SERQW1j.png =200x)
```htmlmixed=
justify-content:space-between;
```
![](https://i.imgur.com/LlsEIJs.png =200x)

### level 5.
![](https://i.imgur.com/nwkFLim.png =200x)
```htmlmixed=
align-items:flex-end;
```
![](https://i.imgur.com/RPvM4bP.png =200x)

### level 6.
![](https://i.imgur.com/Fc8PbPg.png =200x)
```htmlmixed=
justify-content:center;
align-items:center;
```
![](https://i.imgur.com/h5uHf6o.png =200x)

### level 7.
![](https://i.imgur.com/jEuvM5d.png =200x)
```htmlmixed=
justify-content:space-around;
align-items:flex-end;
```
![](https://i.imgur.com/TNjxOMg.png =200x)

### level 8.
![](https://i.imgur.com/Eca6TLK.png =200x)
```htmlmixed=
flex-direction:row-reverse;
```
![](https://i.imgur.com/VetDcxR.png =200x)
### level 9.
![](https://i.imgur.com/ABlbK5j.png =200x)
```htmlmixed=
flex-direction:column;
```
![](https://i.imgur.com/Ha30pp6.png =200x)

### level 10.
![](https://i.imgur.com/8zVPnf3.png =200x)
```htmlmixed=
flex-direction:row-reverse;
justify-content:flex-end;
```
![](https://i.imgur.com/u5CNvjM.png =200x)

### level 11.
![](https://i.imgur.com/sfLqRFb.png =200x)
```htmlmixed=
flex-direction:column;
justify-content:flex-end;
```
![](https://i.imgur.com/Lbw7o51.png =200x)

### level 12.
![](https://i.imgur.com/QWdjmHG.png =200x)
```htmlmixed=
flex-direction:column-reverse;
justify-content:space-between;
```
![](https://i.imgur.com/Rh8Fm8i.png =200x)

### level 13.

```htmlmixed=
flex-direction:row-reverse;
justify-content:center;
align-items:flex-end;
```
![](https://i.imgur.com/UpTVxmY.png =200x)

### level 14.
```htmlmixed=
order:1;
```
![](https://i.imgur.com/37A5cFj.png =200x)

### level 15.
```htmlmixed=
order:-1;
```
![](https://i.imgur.com/75qOgCi.png =200x)

### level 16.
```htmlmixed=
align-self:flex-end;
```
![](https://i.imgur.com/g3VEOcB.png =200x)

### level 17.
![](https://i.imgur.com/991QTU1.png =200x)

```htmlmixed=
order: 1;
align-self:flex-end;
```
![](https://i.imgur.com/9nDqS6y.png =200x)

### level 18.
![](https://i.imgur.com/aYPnDK0.png =200x)
```htmlmixed=
flex-wrap:wrap;
```
![](https://i.imgur.com/MYRQpc1.png =200x)

### level 19.
![](https://i.imgur.com/vd9kTc3.png =200x)

```htmlmixed=
flex-direction:column;
flex-wrap:wrap;
```
![](https://i.imgur.com/uxKouRl.png =200x)

### level 20.
![](https://i.imgur.com/jInh4L2.png =200x)

```htmlmixed=
flex-flow: column wrap;
```
![](https://i.imgur.com/gLreLtA.png =200x)

### level 21.
![](https://i.imgur.com/ZQ5GyvG.png =200x)

```htmlmixed=
align-content: flex-start;
```
![](https://i.imgur.com/jldMmMc.png =200x)

### level 22.
![](https://i.imgur.com/dBJyjBX.png =200x)

```htmlmixed=
align-content:flex-end;
```
![](https://i.imgur.com/PQ9PYve.png =200x)

### level 23.
![](https://i.imgur.com/jziFTyL.png =200x)

```htmlmixed=
flex-direction:column-reverse;
align-content:center;
```
![](https://i.imgur.com/Pl0UuaC.png =200x)

### level 24.
![](https://i.imgur.com/JC5xhq3.png =200x)

```htmlmixed=
flex-direction:column-reverse;
flex-wrap:wrap-reverse;
align-content:space-between;
justify-content:center;
```
![](https://i.imgur.com/Qkk2ve0.png =200x)


## 主題網站製作
* 製作方向
1.電影
2.品牌
3.景點
4.動物


參考版型網站：
[Awwwards - Website Awards - Best Web Design Trends](https://www.awwwards.com/)





###### tags: `跨裝置企業平台與資料庫整合設計班`