Css Flex

1. FLEX 디자인
오라클자바

2. Flexible Box Design Layout
■ 정식명칭
■ Flexbox를 사용해서 요소를 가로로 배치하는 방법
■ 익숙해지는데는 시간이 걸리지만, 일단 익숙해지면 작업효율이 향상
■ 반응형 웹사이트 구축에 적합

3. 기본
■ 컨테이너(부모요소)
■ 아이템(자식요소)

4. 기본 콘테이너(부
모 요소)
아이템(자식
요소)

5. 기본(html)
■ <div class="f-container">
■ <div class="f-item">1</div>
■ <div class="f-item">2</div>
■ <div class="f-item">3</div>
■ </div>

6. 기본(css)
■ .f-container {
■ display: flex;
■ }

7. 컨테이너(부모 요소)에
사용되는 프로퍼티

8. Flex-
direction
아이템 배치
순서 지정
ROW ROW-REVERSE
COLUMN COLUMN-
REVERSE

9. Flex-direction: row (기본값)
아이템 수평방향 좌~우
■ .f-container {
■ display: flex;
■ flex-direction: row;
■ }
1 2 3

10. Flex-direction: row-reverse
아이템 수평방향 우~좌
■ .f-container {
■ display: flex;
■ flex-direction: row-reverse;
■ }
3 2 1

11. Flex-direction: column
아이템 수직방향 상~하
■ .f-container {
■ display: flex;
■ flex-direction: column;
■ }
1
2
3

12. Flex-direction: column-reverse
아이템 수직방향 하~상
■ .f-container {
■ display: flex;
■ flex-direction: column-reverse;
■ }
3
2
1

13. Flex-wrap
아이템 랩(자동 줄바꿈) 지정
■ Nowrap
■ Wrap
■ Wrap-reverse

14. Flex-wrap: nowrap
아이템을 줄바꿈없이 일렬로 배치
■ .f-container {
■ display: flex;
■ flex-wrap: nowrap;
■ }
1 2 3 4 5 6 7

15. Flex-wrap: wrap
아이템을 줄바꿈해서 복수행으로
위에서부터 아래로 배치
■ .f-container {
■ display: flex;
■ flex-wrap: wrap;
■ }
1 2 3 4
5 6 7

16. Flex-wrap: wrap-reverse
아이템을 줄바꿈해서 복수행으로
아래에서부터 위로 배치
■ .f-container {
■ display: flex;
■ flex-wrap: wrap-reverse;
■ }
1 2 3 4
5 6 7

17. Flex-flow
배치방법과 랩(줄바꿈) 지정
■ Flex-direction과 flex-wrap을 한번에 설정하는 방법
■ Flex-flow: {flex-directio값} {flex-wrap값}

18. Justify-content
아이템 수평방향 위치 지정
■ Flex-start(디폴트)
■ Flex-end
■ Center
■ Space-between
■ Space-round

19. Justify-content: flex-start(디폴트)
아이템을 왼쪽으로 정렬
■ .f-container {
■ display: flex;
■ flex-wrap: wrap;
■ justify-content: flex-start;
}
1 2 3

20. Justify-content: flex-end
아이템을 오른쪽으로 정렬
■ .f-container {
■ display: flex;
■ flex-wrap: wrap;
■ justify-content: flex-end;
}
1 2 3

21. Justify-content: center
아이템을 중앙으로 정렬
■ .f-container {
■ display: flex;
■ flex-wrap: wrap;
■ justify-content: center;
}
1 2 3

22. Justify-content: space-between
아이템을 균등분할
■ .f-container {
■ display: flex;
■ flex-wrap: wrap;
■ justify-content: space-between;
}
1 2 3

23. Justify-content: space-around
아이템을 균등분할 (맨 좌우측 아이템 고려)
■ .f-container {
■ display: flex;
■ flex-wrap: wrap;
■ justify-content: space-around;
}
1 2 3

24. Align-items
아이템 수직 방향 위치 지정
■ Stretch(디폴트)
■ Flex-start
■ Flex-end
■ Center
■ baseline

25. Align-items: stretch(기본값)
■ 아이템의 상하여백을 다 채우는 것
■ .f-container {
■ display: flex;
■ flex-wrap: wrap;
■ align-items: stretch;
}

26. Align-items: flex-start
■ 아이템을 위로 정렬하는 것
■ .f-container {
■ display: flex;
■ flex-wrap: wrap;
■ align-items: flex-start;
}

27. Align-items: flex-end
■ 아이템을 아래로 정렬하는 것
■ .f-container {
■ display: flex;
■ flex-wrap: wrap;
■ align-items: flex-end;
}

28. Align-items: center
■ 아이템을 상하중앙으로 정렬하는 것
■ .f-container {
■ display: flex;
■ flex-wrap: wrap;
■ align-items: center;
}

29. 여러 속성등을 복합적으로 사용
■ .f-container {
■ display: flex;
■ flex-wrap: wrap;
■ justify-content: center;
■ align-items: center;
■ flex-direction: column;
■ }

30. 아이템(자식요소)에 사용되는 프로퍼
티
■ Order
■ Flex-grow
■ Flex-shrink
■ Flex-basis
■ Flex
■ Align-self