flexbox를 사용하면, 더 쉽게 화면을 구성할 수 있다.
각가지 요소들을 자동을 정렬하기에 알맞은 display 속성이다.
-
flexbox는 display: flex; 를 통해서 사용할 수 있다.
부모 요소에 flexbox를 적용하면, 자식 요소들은 flex 속성을 통해서 정렬될 수 있다. -
flex-direction을 통해서 정렬의 방향을 정할 수 있는데, 기본값으로 설정된 방향은 row이다.
column으로 설정하고자 한다면,
flex-direction: column; -
flex: grow shrink basis
grow는 요소의 상대적인 크기를 나타낸다.
shrink는 축소에 대한 값이다.
basis는 요소의 절대적인 크기를 나타낸다.
🐑 display: flex가 적용된 부모 요소의 하위 요소에 적용할 수 있다. -
flex-grow 속성이 0보다 크면 각 박스는 동일한 비율을 갖는다.
-
flex-shrink는 실제 크기를 예측하기 어렵다. 1로 두고 사용하는 것이 좋다.
-
flex-basis는 박스의 기본 크기를 의미한다. grow를 0으로 설정하면 basis 값보다 커질 수 없다.
grow가 1보다 크면 basis보다 커질 수 있다.
🐏 axis(축)에는 main axis / cross axis 가 있다.
🐏 main axis는 flex-direction에 의해 결정된다.
flex-direction: row 이라면, main axis는 가로이다.
flex-direction: column 이라면, main axis는 세로이다.
🐏 cross axis는 main axis와 수직이다.
따라서, main axis가 가로이면 cross axis는 세로이다.
만약 main axis가 세로이면, cross axis는 가로이다.
- flexbox에서 컨텐츠를 수평정렬하기 위해서는 justify-content를 사용한다.
flex-start,
flex-end,
center,
space-between
(처음과 끝에 하나씩 배치하고 그 사이에 동일한 간격으로 items 배치),
space-around
(모든 items를 같은 간격을 두고 배치하며, 양 끝에 빈 공간을 두는데 items 사이 간격의 절반으로 한다.)- 컨텐츠를 수직 정렬하기 위해서는 align-items를 사용한다.
flex-start, flex-end, center, stretch(기본 설정)
🐏 flex-wrap: wrap; 설정을 통해서 자동으로 줄바꿈을 할 수 있다.
