flex는 container와 item들이 부모와 자식 관계일 때 container에 display:flex속성을 줌으로서 설정할 수 있다.
flex아이템들은 가로방향으로 배치되고 자신이 가진 내용물의 width만큼만 차지한다. height는 컨테이너의 높이만큼 늘어난다.
display:inline-flex는 inline요소와 같은 수평 쌓임을 가진다.
flex-direction속성
flex아이템들이 배치되는 축의 방향을 결정하는 태그이다. (가로 or 세로)
줄넘김 처리 설정 flex-wrap
컨테이너가 더 이상 아이템들을 한 줄에 담을 공간이 없을 때, 아이템 줄바꿈을 어떻게 할지 결정하는 속성이다.
flex-wrap:nowrap -> 기본값, 줄바꿈을 하지 않는다. 넘치면 그냥 삐져나옴
flex-wrap:wrap -> 줄바꿈을 한다.
flex-wrap:wrap-reverse -> 줄바꿈을 하는데 , 아이템을 역순으로 배치한다.
메인축 방향 정렬 justify-content
.container {
justify-content: flex-start;
/* justify-content: flex-end; */
/* justify-content: center; */
/* justify-content: space-between; */
/* justify-content: space-around; */
/* justify-content: space-evenly; */
}justify-content:flex-start -> 기본값, 아이템들을 시작점으로 정렬한다.
flex-direction이 row일때는 왼쪽, flex-direction이 column일떄는 위이다.
justify-content:flex-end ->아이템들을 끝점으로 정렬한다.
flex-direction이 row일떄는 오른쪽, flex-directiond이 column일떄는 아래이다.
justify-content:center -> 아이템들을 가운데로 정렬한다.
justify-content:space-between -> 아이템들의 사이(space)에 균일한 간격을 만들어준다.
justify-content:space-around -> 아이템들의 둘레(around)에 균일한 둘레를 만들어준다.
수직축 방향 정렬 align-items
.container {
align-items: stretch;
/* align-items: flex-start; */
/* align-items: flex-end; */
/* align-items: center; */
/* align-items: baseline; */
}수직 방향으로 아이템들을 정렬하는 속성이다.
align-items:flex-start -> 아이템들을 시작점으로 정렬한다.
flex-direction이 row일떄는 위, flex-direction이 column일때는 왼쪽이다.
align-items:flex-end-> 아이템들을 끝으로 정렬한다.
flex-direction이 row일때는 아래, flex-direction이 column일떄는 오른쪽이다.
align-items:center -> 아이템들을 가운데로 정렬한다.
2_)flex 아이템에 적용하는 속성들
flex-basis
flex-basis는 flex아이템의 기본 크기를 설정한다. (flex-direction이 row일떄는 너비, flex-direction이 column일떄는 높이)
flex-grow
flex-grow는 아이템이 flex-basis값보다 커질 수 있는지를 결정하는 속성이다.
flex-grow는 숫자 값이 들어가고, 숫자가 0보다 크면 해당 아이템이 유연한(flexible) 박스로 변하고, 원래의 크기보다 커지며 빈 공간을 메운다.
기본값은 0이다.
flex-shrink
flex-shrink속성은 아이템이 flex-basis보다 작아질 수 있는지를 결정하는 속성이다.
flex-shrink에는 숫자 값이 들어가고 , 숫자가 0보다 크면 아이템이 유연한 박스로 변하고, 원래의 크기보다 작아진다.
align-self
align-items이 전체 아이템의 수직축 정렬이라면 , align-self는 해당 아이템의 수직 축 정렬이다.