Flexbox

부모 요소에 적용하는 속성

1. display: flex

• flexbox를 사용하기 위한 레이아웃 구성 방법

2. flex-direction

• 자식 요소들을 정렬할 축 설정
• 속성 : row(기본값), row-reverse, column, column-reverse

3. flex-wrap: nowrap

• 자식 요소들의 크기가 부모 요소의 크기를 넘었을 때, 줄 바꿈 유무 설정
• 속성 : nowrap(기본값), wrap, wrap-reverse

4. flex-flow

• 아래와 같이 flex-direction과 flex-wrap를 한번에 작성 가능

.container {
	display: flex;
    flex-flow: column wrap;
}

5. justify-content

• 자식 요소들을 축의 수평 방향(축과 동일한 방향)으로 어떻게 정렬할지 설정
• 속성 : flex-start, flex-end, center, space-between, space-around

6. align-items

• 자식 요소들을 축의 수직 방향으로 어떻게 정렬할지 설정
• 속성 : stretch, flex-start, flex-end, center, baseline

7. align-content

• flex-wrap: wrap으로 인해 여러 줄이 발생했을 경우, 자식 요소들을 축의 수평 방향(축과 동일한 방향)으로 어떻게 정렬할지 설정
• 속성 : stretch, flex-start, flex-end, center, space-between, space-around

---

자식 요소에 적용하는 속성

1. flex-grow

• 팽창 지수

2. flex-shrink

• 수축 지수

3. flex-basis

• 기본 크기

4. flex

• 아래와 같이 flex-grow, flex-shrink, flex-basis를 한 번에 작성 가능

.item {
	flex: 1 0 auto;
}

5. align-self

6. order

---

와이어프레임 작성 툴 사이트
https://ovenapp.io/
https://www.figma.com/

css 속성 참고 사이트
https://css-tricks.com/snippets/css/a-guide-to-flexbox/