- 본 포스트는 1분코딩님의 글을 요약해서 정리한 글입닙니다.
- 1분코딩, CSS Flex를 익혀보자
CSS #1 display:flex 이걸로 끝내자
1분코딩이 가르쳐주는 차세대 CSS 레이아웃의 두 가지 Flex와 Grid에 대해서 순차적으로 본 포스트에서 살펴보고자 합니다. 필요한 내용에 있어서는 추가적인 자료를 더 찾아볼 예정이고, 참고한 사이트 역시 함께 이곳에 기록해 드리겠습니다.
해당 시리즈는 차세대 시리즈이기 때문에, 현업에서 현재 많이 사용하고 있는 Float와 inline-block에 대해서는 해당 포스트가 끝난 다음에 따로!! 정리해 드리겠습니다.
그럼 이제 차세대 CSS 레이아웃 첫번째 Flex에 대해서 다뤄보겠습니다. Let's Go!!!
1) FlexibleBox
- 레이아웃 배치 전용 기능 CSS 속성
- Gird 이후의 Flex?
여전히 Flex는 Gird가 제어하지 못하는 어려운 레이아웃에 대해서 쉽고 간편하게 작성할 수 있다는 부분에서 여전히 인기가 있는 차세대 레이아웃 속성입니다.
Flex 를 사용하기 위해서는 먼저 container div 가 있어야 합니다.
<div class="container">
<!-- Flex Container -->
<!-- Flex Item -->
<div class="item1">one</div>
<div class="item2">two</div>
<div class="item3">three</div>
<!-- Flex Item -->
<!-- Flex Container -->
</div>첫째, flex 선언(display:flex;)
.container {
display:flex;
}이렇게 display를 선언하면 Flex레이아웃을 적용하여 사용할 수 있게 됩니다. 이후 flex의 방향을 설정할 수 있는 4개의 옵션을 사용해서 열(➡️, ⬅️)로 flex를 할지, 행(⬇️,⬆️)으로 flex를 할지 정할 수 있습니다.
.container {
display:flex;
flex-direction: column ; // ⬇️ 순차적으로, 공간의 위쪽부터
flex-direction: column-reverse ; // ⬆️ 역순으로 마지막 요소가 맨 위로, 공간의 아래쪽부터
flex-direction: row ; // ➡️ 순차적으로, 공간의 왼쪽부터
flex-direction: row-reverse ; // ⬅️ 역순으로 마지막 요소가 맨 앞으로, 공간의 오른쪽부터
}둘째, 컨터이너 줄바꿈 wrap
.container {
display:flex;
flex-direction: column;
flex-wrap: nowrap; // 기본속성으로 계속 옆으로 붙여 넣는다. 공간이 부족해도 말이다.
flex-wrap: wrap; // 공간에 마주쳤고, 내 자리가 없다 그러면 아래로 보낸다.
flex-wrap: warp-reverse; // 공간에 마주쳤고, 내 자리가 없다 그러면 위로 보낸다.
}셋째,direction와 wrap을 단번에
.container {
display:flex;
flex-direction: row;
flex-wrap: wrap;
}
아래와 같이 한 줄로 입력하는 것도 가능하다.
.container {
display:flex;
flex-flow: row wrap;
}
넷째,가로축과 세로축 정렬
.container {
display:flex;
// 가로축
jusitify-content : flex-start; // 왼쪽정렬
jusitify-content : center; // 가운데 정렬
jusitify-content : flex-end; // 오른쪽 정렬
jusitify-content : space-between; // 첫요소와 마지막요소를 양끝에 두고 사이에 있는 아이템들을 동일한 간격으로 배치시킨다.
jusitify-content : space-around; 각각의 요소들의 margin을 동일하게 설정하고 공간을 배치시킨다.
10px[A]10px | 10px[B]10px | 10px[B]10px
jusitify-content : space-evenly; 10px [A] 10px [B] 10px[B] 10px
// 세로축 (한 줄 일 때)
align-items : flex-start;
align-items : center;
align-items : flex-end;
align-items : baseline; flex-start와 유사하지만, 같은 가로축에서 각각의 아이템들의 세로축의 중심을 꼬치에 꽂듯이 정렬한다. 닭꼬치에 닭과 대파의 길이가 다르지만, 가지런히 꽂혀있는 모습을 생각해보자.
align-items : stretch 세로축 전체를 동일한 높이(height)로 가득 채운다.
// 세로축 (복수의 줄 일 때)
align-items : flex-start;
align-items : center;
align-items : flex-end;
align-items : stretch;
align-items : space-between; 요소의 첫 요소와 마지막 요소를 양측에 놓고, 사이의 공간을 1/m 하여 배치시킨다.
align-items : space-around; 위 jusitify-content를 다루었던 것과 동일하다.
align-items : space-evenly; 위 jusitify-content를 다루었던 것과 동일하다.
다섯째, 공간을 유연하게(가로축)
- flex-direction: row 일 때는 너비(양옆)
- flex-direction: column 일 때는 높이(위, 아래)
- 선택자 를 보면, container가 아니라, item이다.
flex-basis
.item {
flex-basis: auto; 기본값 // 그리드를 생각하면 1fr 1fr 1fr 으로 여겨도 될 것 같지만,
그리드의 1fr은 container 자체를 나누는 것이고, flex는 남은 여백에 대한 동일한 적용이다.
flex-basis: content;
flex-basis: 0;
flex-basis: 50%;
flex-basis: 300px;
flex-basis: 10rem;
}:auto 는 flex를 선언한 container의 값에 따라 적용된다. :content 는 auto와 유사하게 아이템의 기본 점유 크기를 설정한다.
:100px 는 100px가 넘는 item도 모자라는 item도 모두 100px로 설정한다. 이때 넘어서는 item의 경우 넘어간 것들을 아래줄로 보내버린다. :% 란 contanier의 공간을 어느정도 사용할지이니 이해할 수 있을 것이다.
flex-grow 모자란 공간 자동 채우기!!
.item {
flex-grow:1;
}flex-grow:0 은 설정하지 않았을 때의 기본 값이다. container의 너비가 100px인데 안에 있는 itemes를 다 모아도 40px밖에 안된다고 하면, 모자란 공간으로 머물러 있을 것이다.
그런데 이를 flex-grow:1 로 변경하면 모자란 60px를 자동으로 채워주는 놀라운 설정을 구현할 수 있다.
- 해당 부분의 설명은 모질라, Flex-grow가 설명을 잘해주고 있음으로 참고하면 좋을 것 같다. 또한 미리 정해진 css효과의 적용부분을 볼 수 있음으로 이해하기가 좋다.
flex-shrink 넘처난 공간 자동 줄이기!!
.item {
flex-basis:100px;
flex-shrink:1; // 기본값
}먼저 flex-basis:100px;의 상황이 전재되어 있는 상황에서 flex-shrink:0;이 세팅되면, 아이템의 크기가 flex-basis보다 작아지지 않기에 고정폭을 지정한 컬럼을 쉽게 만들 수 있다. 반면에 기본값 1 이상의 숫자는 유연한 적용이 되어, flex-basis 보다 작아지게 만들 수도 있다.
.container {
display: flex;
** width:100%;
** width:250px;
}
.item:nth-child(1) {
flex-shrink: 0;
width: 100px;
}
.item:nth-child(2) {
flex-grow: 1;
}코드를 읽어보면 container 안에 두개의 item이 있다. (1)item은 너비가 100px 인 상태에 고정되어 있다. shrink:0이기 때문에 줄어들지도 않는다. 그리고 나머지 공간에 대해서 (2)item은 flex-grow: 1을 설정하여 남은 공간을 모두다 채우도록 했다.
이러한 상황에서 width:100% 를 width:250px 로 변경하면, (1)item의 너비는 변경되지 않고 100px에 고정된 상태로 남아있고, 나머지 150px 또는 100%(-100px)를 (2)item이 조절하며 채워준다.
- 해당 부분의 설명은 모질라, Flex-shrink가 설명을 잘해주고 있음으로 참고하면 좋을 것 같다. 또한 미리 정해진 css효과의 적용부분을 볼 수 있음으로 이해하기가 좋다.
위의 basis, grow, shrink 를 한 번에 "flex"
.item {
flex: 1;
/* flex-grow: 1; flex-shrink: 1; flex-basis: 0%; */
flex: 1 1 auto;
/* flex-grow: 1; flex-shrink: 1; flex-basis: auto; */
flex: 1 500px;
/* flex-grow: 1; flex-shrink: 1; flex-basis: 500px; */
}.item {
flex: 1 1 0;
}
.item:nth-child(2) {
flex: 2 1 0;
}아직 flex-basis:0에 대한 이해가 어려운데, 내가 이해한 바로는 item 들의 너비를 0으로 하고 오로지 grow에서 설정한 비율을 따르는 것 같다. 그 결과 1:2:1을 만들어 낸다. 즉 여백의 비가 아니라 영역 자체를 원하는 비율로 분할하기를 원한다면 flex-basis:0을 만들어주면 된다.
여섯째, 공간을 유연하게(세로축)
- 선택자 를 보면, container가 아니라, item이다.
.item {
align-self: auto;
/* align-self: stretch; */
/* align-self: flex-start; */
/* align-self: flex-end; */
/* align-self: center; */
/* align-self: baseline; */
}각각의 요소에 대해서 다르게 설정할 수 있다는 것이다. 모든 item의 높이가 100px이고, container가 200px라고 할 때 아래를 보자.
.item {
align-self: auto;
}
.item:nth-child(2) {
align-self: flex-start;
}
.item:nth-child(3) {
align-self: center;
}모든 아이템들은 모자란 길이를 알아서 맞출 것이다. 그러나 item:nth-child(2)는 100px인 상태는 위쪽에, item:nth-child(3)은 100px인 상태로 가운데에 위치될 것이다.
Editor. EDWIN.
date. 23/02/27.
