<aside> 📎 요약 Udemy The Web Developer 부트캠프 2024 - Section 10 완강

Flexbox에 대해 이해하고 홈페이지에서 요소들을 정렬할 수 있게 되었다.

작성한 소스코드

</aside>

Flexbox란?

페이지의 콘텐츠 상자 안에 아이템을 배치하는 데 사용되는 도구

# Flex-Direction 속성

display: flex;

컨테이너 안에 있는 요소에 Flexbox 속성을 주려면 위와 같이 코드를 작성하면 된다.

• display를 flex로 바꾸기 전

• display를 flex로 바꾼 후

전부 좌-우로 정렬되었다.

• display를 flex로 설정하여 만든 요소에는 두 개의 축이 있다.

1. 본 축 (MAIN AXIS) : 왼쪽➡️오른쪽

• 콘텐츠를 왼쪽에서 오른쪽으로 정렬시킬 수 있다.
• 이 순서는 flex-direction 속성(컨테이너 안에서 본축 방향(컨텐츠의 방향)을 결정하는 속성)을 사용해 바꿀 수 있다.
• flex-direction: row : 기본 값flex-direction: row-reverse : 본축을 우-좌 방향으로 바꾼다.flex-direction: column : 본축을 상-하 방향으로 바꾼다.flex-direction: column-reverse : 본축을 하-상 방향으로 바꾼다.

2. 교차 축 (CROSS AXIS)