---
tags: CSS, flex, 隨手筆記
---

# 隨手筆記 - CSS Flex 對齊語法詳記

## 本文目的
紀錄flex的排版方式

## 說明

父容器要先使用以下css語句
子容器才能繼承之後介紹的屬性

display: flex;

**排序方式**
按照行(column)或是列(row)的方式排序
也可以反過來
只要在行或列的後面加上 **-reverse** 就好

flex-direction: row;

**對齊方式**
按照flex-direction的排序
靠左靠右或是置中對齊
除了上列三種還有平均分散(兩種)
flex-start、flex-end、center、
space-around、space-between

justify-content: flex-start;

**對齊方式**
按照flex-direction的排序
靠上靠下或是置中對齊
除了上列三種還有平均分散(兩種)
flex-start、flex-end、center、
space-around、space-between

align-self用於排序單一子元素
用法同align-self

align-items: flex-start;
align-self: flex-start;

**順序**
給個別容器指定順序
預設為1

order: 1;

**換行**
指定是否要換行
預設不換行(nowrap)
還有換行(wrap)及反向排序的換行(wrap-reverse)
亦可以和flex-direction一起使用
屬性為flex-flow

flex-wrap: nowrap;
flex-flow: row nowrap;

**填滿方式**
靠左靠右或是置中填滿
除了上列三種還有平均分散(兩種)
flex-start、flex-end、center、
space-around、space-between

align-content: flex-start;