선언

display: flex, inline-flex 로 선언한다.

flex 박스로 선언된 박스의 직계(손자 ❌)자손은 자동으로 flex-item으로 선언된다.

flex는 한 줄로 컨텐츠를 나열하고 이 줄을 flex-line이라고 한다.

flex의 경우 main axis와 cross axios가 있고, 이에 따라 속성의 적용 방식이 바뀐다.

또한, flex-direction도 정렬 방식을 바꾸는 방법중에 하나다.\

속성

justify-content

주축의 정렬 방식을 나타낸다.

• flex-start: 주축의 start부분부터 정렬한다.
• flex-end: 주축의 end부분부터 정렬한다.
• center: 주축의 중간지점에 컨텐츠를 모은다.
• space-between: 양 옆 여백을 제외하고 컨텐츠끼리 여백을 같도록 한다.
• space-around: 양 옆 여백을 포함하여 컨텐츠끼리 여백을 같게 한다.

align-items

cross 축의 정렬 방식을 나타낸다.

• flex-start: cross 축의 start부분부터 정렬한다.
• flex-end: cross 축의 end부분부터 정렬한다.
• center: cross 축의 중간지점에 컨텐츠를 모은다.