플렉스박스 만들기
flexbox : 1차원으로 요소를 배치하는 방식
ㄴ 가로 방향이나 세로 방향으로 배치한다.
display: flex;기본축(main-axis) : default = 가로
교차축 cross-axis : 기본축에 수직인 방향
기본 flexbox의 방향은 가로다.
배치 방향
flex-direction 을 사용하면 기본 축의 방향을 정할 수 있다. 이때 기본 값은 row 다.
기본 축 정렬 : justify-content
justify-content 를 사용하면 기본 축 방향으로 정렬할 수 있다. 기본값은 flex-start다.
justify-content: center : 중앙 정렬
justify-content: flex-start : 왼쪽 정렬
justify-content: flex-end : 오른쪽 정렬
justify-content: space-between : 사진으로 이해하는게 편하다.
교차 축 정렬 : align-items
교차 축 방향으로 정렬할 때는 align-items 를 사용한다. 기본값은 stretch다.
align-items: stretch : 늘려서 배치
align-items: center : 중앙 정렬
align-items: flex-start : 위쪽 정렬
align-items: flex-end : 아래쪽 정렬
요소가 넘칠 때 :flex-wrap
요소가 넘치는 경우 flex-wrap: wrap 을 지정해주면 교차 축 방향으로 넘어가 배치된다.
간격 : gap
요소들 간의 간격을 지정할 수 있다. gap: 00px;
gap: 20px 10px : 세로 20px, 가로 10px의 간격을 지정한다.
요소 늘려서 채우기 : flex-grow
기본값은 0이다. flex-grow 값이 클수록 많이 늘어단다. 숫자들은 상대적인 값이다.
flex-grow: 1이 여러 개 일 경우 값이 1인 요소들의 크기는 동일하다. 요소 줄여서 채우기 : flex-shrink
만약 요소들의 크기가 커서 넘치는 경우, 요소의 크기를 줄여서 플렉스박스 안에 가득 채운다. flex-shrink의 기본 값이 1이기 때문에 기본적으로 요소를 줄여서 배치하고, 0으로 지정하면 크기가 줄어들지 않는다. 그리고 flex-shrink 값이 클수록 상대적으로 많이 줄어든다.
팁
빈 공간을 채우고 싶을 땐 flex-grow:1;를 사용한다.
어떤 요소의 크기를 내가 원하는대로 조정하고 싶을 땐flex-shrink: 0;를 사용한다.
빈 공간을 채우고 싶을 땐 flex-grow:1;를 사용한다.
어떤 요소의 크기를 내가 원하는대로 조정하고 싶을 땐flex-shrink: 0;를 사용한다.
flex-basis 속성
플렉스박스에서는 고정된 크기가 있는 게 아니라 시작 크기와 최종 크기가 있다. 기본 축에서는 시작 크기를 정해 놓으면 플렉스박스 안에서 유연하게 최종 크기가 결정된다. 크롬 개발자 도구에서 플렉스박스의 요소를 검사해 보면 빗금을 친 부분만큼의 시작 크기에서, 화살표만큼 최종 크기로 늘어나거나 줄어드는 걸 볼 수 있다.
width 값이 큰 값이지만, flex-shrink에 의해서 줄어들었다.플렉스박스에서 요소의 시작 크기는 flex-basis 라는 속성으로 지정할 수 있다. flex-basis 값을 따로 정해 주지 않으면 기본값은 auto 다. 그럼 width 나 height 를 참고해서 시작 크기를 정한다. 기본 축의 방향이 가로 방향이면 width 를, 세로 방향이면 height 를 참고해서 시작 크기를 정한다. 그래서 사실 대부분의 경우 width 나 height 만 잘 정해주면 별문제 없이 동작한다. 하지만 플렉스박스에서 크기를 정하고 싶을 때는 보다 정확하게 flex-basis를 사용하는 것이 좋다.
flex 속성
flex-basis 를 사용하면 flex 라는 속성으로 코드를 짧게 쓸 수 있다.
width 속성으로 시작 크기 지정하기
flex-grow: 1;
flex-shrink: 0;
width: 100px;flex-basis 속성으로 시작 크기 지정하기
flex-grow: 1;
flex-shrink: 0;
flex-basis: 100px;flex 속성으로 짧게 쓰기
flex: 1 0 100px;