플렉스(정렬)
플렉스는 1차원의 레이아웃을 만드는 것이라고도 부르는데
여기서 차원이란 요소를 정렬하기 위한 축의 개수라고 보면된다.
ex.
<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
</div>.container {
background-color: royalblue;
display: flex;
}
.container .item {
width: 100px;
height: 100px;
border: 3px dashed red;
background-color: orange;
}결과
이는
원래 이렇게 block요소에 세로로 쌓여 있던 요소들이
요소가 flex로 바뀌면서
수평 정렬 되는 것이다.
여기서 display 속성이 flex인 요소는 flex container 가 되고
그 자식 요소들은 flex items라고 부를 수 있다.
이 때 flex container에 부여되는 속성들과 flex items에 부여되는 속성들이 따로 있다.
display속성값이 flex인 요소 즉, flex container의 자식 요소들은 수평 정렬이 된다.
flex는 블록요소와 같이 flex container를 정의하고
inline-flex는 인라인 요소와 같이 flex container 를 정의한다.
둘의 차이는 무엇이냐면
그냥 flex를 사용하면 이렇게 블록요소와 같이 수직으로 쌓이는데
inline-flex들은 수평으로 쌓이게 된다.
flex-direction을 통해 주축을 설정할 수 있다.
column도 있으나, 어차피 블록요소를 만들면 위에서 아래로 쌓이므로 column값은 잘 사용하지 않는다.
정렬시 시작점을 start, 끝점을 end라 한다.
만약 값이 row라면 맨왼쪽이 start 맨오른쪽이 end이다.
이도 기억해두어야 한다.
교차축이란 영어도 기억해두어야 한다.
교차축은 정렬하는 축과 수직인 축으로 row로 정렬하면 교차축은 y축이 된다.
flex items의 묶음(wrap) 여부에 대한 속성이 바로 flex-wrap이다.
nowrap 이 기본값으로 묶음이 없다.
wrap이라는 값을 쓰면 이는 여러줄로 묶인다.
no-wrap이면 요소들이 묶이지 않는다. 즉, 무조건 수평으로만 정렬이 된다.
하지만 flex-wrap: wrap; 으로 설정을 하면 칸이 모자라서 넘치려는 요소는 자동으로 묶여서 줄바꿈처리가 된다.
ex.
<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
</div>.container {
width: 400px;
background-color: royalblue;
display: flex;
flex-wrap: wrap;
}
.container .item {
width: 100px;
height: 100px;
border: 3px dashed red;
background-color: orange;
}결과
justify-content : 주 축의 정렬방법을 결정
justify-content 의 기본값은 flex-start이다.
align-content : 교차축의 여러줄 정렬 방법
수평으로 정렬한다 가정시 수직 정렬 방법
기본값은 stretch 인데 stretch는 사전상 '늘린다'는 의미를 가진다.
첫번째 그림에는 height가 따로 없고 그래서 각각의 item의 높이는 align-content가 기본값이 stretch이므로 늘려서 사용한다.
한번 직접 확인해보자.
<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
</div>.container {
width: 400px;
height: 200px;
background-color: royalblue;
}
.container .item {
width: 100px;
border: 3px dashed red;
background-color: orange;
}원래 height의 기본값은 auto로 브라우저마다 각자의 값이 있다.
그래서 정렬을 따로 하지 않으면 위 코드는
이런 결과를 보여준다.
그리고
.container {
width: 400px;
height: 200px;
background-color: royalblue;
display: flex;
flex-wrap: wrap;
}
.container .item {
width: 100px;
border: 3px dashed red;
background-color: orange;
}이렇게 하면
height를 따로 설정하지 않아도 세로 부분을 가득 채운다.
이는 align-content의 기본값이 stretch 이기 때문이다.
그리고 align-content: flex-start; 라고 설정하면
다시 height는 auto가 되고 세로축의 flex start를 기준으로 요소들이 쌓이게 된다.
이 때 CSS 코드를
.container {
width: 400px;
height: 200px;
background-color: royalblue;
display: flex;
flex-wrap: wrap;
align-content: stretch;
}
.container .item {
width: 100px;
height: 50px;
border: 3px dashed red;
background-color: orange;
}위와 같이 height를 설정해주고 align-content를 stretch 로 다시 설정해주면
이렇게 어떤 축을 기준으로 정렬이 되지 않고 세로방향으로는 요소-여백-요소-여백을 반복하여 요소가 쌓이는 것을 볼 수 있다.
align-content는 기본적으로 여러줄이어야 한다.
그럴려면 반드시 flex-wrap이 wrap이어야 한다.
이렇게 여러가지 조건이 만족되어야 사용할 수 있는 점 때문에 수직방향의 정렬의 경우, align-items를 더 많이 사용한다.
교차축의 한줄 정렬 방법 : align-items
한 줄에 대한 정렬이므로 차이점이 명확히 보인다!
align-content는 한줄인 경우 작동X
align-items 는 이렇게 작동이 된다.
ex.
.container {
width: 400px;
height: 200px;
background-color: royalblue;
display: flex;
justify-content: center;
align-items: center;
}
.container .item {
width: 100px;
height: 50px;
border: 3px dashed red;
background-color: orange;
}
플렉스(정렬) items
지금까지 정렬에 관한 속성은 모두 flex-container에 작성했었다.
지금부터는 flex-item에 작성하는 속성들을 알아보자.
- order
flex item의 순서를 지정해주는 속성이다.
0이 기본값으로 순서가 없다는 의미이다.
숫자가 작을수록 먼저 온다.
HTML구조를 바꾸지 않고도 정렬되는 요소의 순서를 그 때 그 때 바꿀 수 있다는 장점을 가진다.
- flex-grow
flex item의 증가 너비 비율이다.
기본값인 0을 쓰면 증가비율이 없다.
다른 숫자를 넣어주면 증가비율이 생긴다.
2번째 그림을 보자. 증가비율이라는 것은 빈 공간을 요소들이 몇대몇으로 채우겠냐는 의미인데 나머지는 0인데 A만 비율이 1이므로 1 대 0 대 0으로 나머지 공간을 A가 모두 차지하게 된다.
3번째 그림에서는 원래의 공간을 제외한 나머지 공간을 B와 C가 2대1로 먹는 것을 의미한다.
- flex-shrink
flex item 의 감소 너비 비율이다.
기본값은 1이고 Flex Container 너비에 따라 감소 비율이 적용된다.
숫자를 입력할 수 있는데 이는 감소 비율을 의미한다.
정확한 의미는 그림을 보도록 하자.
container의 크기가 첫번째 그림에서 두번째 그림처럼 줄어든다고 가정해보자.
앞선 flex정렬에서 따로 flex-wrap: wrap; 을 해주지 않으면 container 크기에 맞춰 요소들의 크기가 줄어드는 것을 봤다.
그 원인은 각각의 item에는 flex-shrink의 값이 1로 지정되어져 있기 때문이다.
그러므로 각자 1대1대1로 컨테이너가 줄어드는 만큼 비율이 같이 줄어든다.
그래서 모두 flex-shrink값을 0으로 지정하면 container의 크기가 줄어들더라도 요소들이 각자의 크기를 유지하고 있는 것을 볼 수 있다.
- flex-basis
flex item의 공간 배분 전 기본 너비를 의미한다.
기본값은 auto로 요소의 Content너비이다.
단위는 px, em, rem 등을 쓸 수 있다.
처음에 각 요소들은 점선을 친 content의 크기만큼 공간을 먹고 남은 공간을 1대1대2로 먹게된다. 그래서 비율은 정확히 1대1대2 가 되지는 않는다.
그래서 깔끔하게 1대1대2로 비율을 맞추고 싶다면
flex-basis를 모두 0으로 두면 된다.
