.png)
CSS3 flex
구성요소
1. container
2. items
container = items를 감싸는 부모!
각 item을 정렬하기 위해서는 container의 존재가 필수!
속성을 구분해서 사용하자!
Flex Container
속성
diplay
display: flex, display: inlin-flex의 차이
display: flex;
cotainer에게 block 요소와 같이 수직쌓임을 가지게 한다.
display: inline-flex;
cotainer에게 inline 요소와 같이 수평쌓임을 가지게 한다.
flex-direction
items의 주 축(main-axis)를 설정
값
주 축(main-axis)과 교차 축(cross-axis)?
값 row는 Items를 수평축으로 표시하므로 이때는 주 축이 수평이며 교차 축은 수직이 됩니다.
반대로 값 column은 Items를 수직축으로 표시하므로 주 축은 수직이며 교차 축은 수평이 됩니다.
즉, 방향(수평, 수직)에 따라 주 축과 교차 축이 달라집니다.
시작점(flex-start)과 끝점(flex-end)?
주 축이나 교차 축의 시작하는 지점과 끝나는 지점을 지칭합니다.
flex-wrap
items의 여러 줄 묶음(줄 바꿈)의 설정
기본적으로 Items는 한 줄에서만 표시되고 줄 바꿈 되지 않습니다.
이는 지정된 크기(주 축에 따라 width나 height)를 무시하고 한 줄 안에서만 가변합니다.
Items를 줄 바꿈 하려면 값으로 wrap을 사용해야 합니다.
justify-content
주 축(main-axis)의 정렬 방법을 설정합니다.
align-content
교차 축(cross-axis)의 정렬 방법을 설정합니다.
주의할 점은 flex-wrap 속성을 통해 Items가 여러 줄(2줄 이상)이고 여백이 있을 경우만 사용 가능!
items가 한 줄일 경우 align-items 속성 사용!
align-items
교차 축(cross-axis)에서 Items의 정렬 방법을 설정합니다.
Items가 한 줄일 경우 많이 사용합니다.
주의할 점은 Items가 flex-wrap을 통해 여러 줄(2줄 이상)일 경우에는 align-content 속성이 우선합니다.
따라서 align-items를 사용하려면 align-content 속성을 기본값(stretch)으로 설정해야 합니다.
Flex-items
속성
order
item의 순서 설정
Item에 숫자를 지정하고 숫자가 클수록 순서가 밀립니다.
flex-grow
item의 증가 너비 비율을 설정
예를 들어 item이 3개이고 증가 너비가 각각 1, 2, 1 일 경우
첫 번째 Item은 총 너비의 25%(1/4)을,
두 번째 Item은 총 너비의 50%(2/4)를,
세 번째 Item은 총 너비의 25%(1/4)을 가지게 됩니다.
flex-basis
item의 (공간 배분 전) 기본 너비를 설정
값이 auto일 경우 width, height 등의 속성으로 Item의 너비를 설정할 수 있습니다.
하지만 단위 값이 주어질 경우 설정할 수 없습니다.
flex 속성에서 설명한 것 같이 단축 속성 내에서 flex-basis를 생략하면 값이 0이 되는 것을 주의!
align-self
교차 축(cross-axis)에서 개별 Item의 정렬 방법을 설정
align-items는 Container 내 모든 Items의 정렬 방법을 설정
필요에 의해 일부 Item만 정렬 방법을 변경하려고 할 경우 align-self를 사용 가능!
이 속성은 align-items 속성보다 우선!
ref(https://developer.mozilla.org/ko/docs/Web/CSS/CSS_Flexible_Box_Layout/Flexbox%EC%9D%98_%EA%B8%B0%EB%B3%B8_%EA%B0%9C%EB%85%90)
ref(https://heropy.blog/2018/11/24/css-flexible-box/)
