| 참고 영상
flex
먼저 행(row), 열(column) 알아보기
사실 나는 이게 몇년째 헷갈려서 할 때마다 찾아보고 있다.
우선 사용할 기본 문서를 만들어줬다.
flex container에 주는 속성
display: flex
.container {
display: flex;
height: 100vh;
background-color: lightcyan;
}
flex-direction의 default값이 row이기 때문에 자동으로 행 기준으로 정렬된다.
flex-direction
flex-direction: column
.container {
display: flex;
flex-direction: column; // <- 요기 추가
height: 100vh;
background-color: lightcyan;
}
- 열 기준으로 정렬이 된 모양이 된다
flex-direction: row-reverse
- row 기준으로 정렬되되 역순으로 정렬된다
flex-wrap
화면을 줄였을 때 넘치는 요소를 끊어서(나눠서) 보여줄 것인지 여부를 설정할 수 있다
flex-wrap: no-wrap(default. 안끊음)
.container {
display: flex;
flex-wrap: no-wrap
height: 100vh;
background-color: lightcyan;
}
flex-wrap: wrap
화면 너비가 마지막 요소보다 작아지가 끊어서 아래로 내려간 모습이다
justify-content
요소의 정렬을 설정해줄 수 있는데 요소를 오뎅꼬치를 꽂는다고 생각했을 때 꼬치가 축이되는 정렬이다
.container {
display: flex;
justify-content: flex-start; // <- 요기 추가
height: 100vh;
background-color: lightcyan;
}justify-content: flex-start(default)
justify-content: center
justify-content: space-between
각 요소별로 전체 여백을 동일하게 나눠 가진다
justify-content: space-around
space-between과 비슷하지만 전체 여백을 나눠 가질때 요소의 좌,우로 같이 가지게 된다
align-items
위의 justify-content가 오뎅꼬치를 축으로 삼는다면 align-items는 그 오뎅꼬치의 수직이 되는 축을 축으로 정렬한다.
.container {
display: flex;
align-items: stretch; // <- 요기 추가
height: 100vh;
background-color: lightcyan;
}align-items: stretch(default)
align-itmes: flex-start
align-items: flex-end
align-items: center
응용해보자!
요소가 행열의 정 중앙으로 오게 하려면?
.container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: lightcyan;
}
align-content
flex-wrap: wrap 스타일과 함꼐 사용되며, 화면이 좁아져서 요소가 끊어졌을 때 어떻게 보여줄지를 설정할 수 있다.
.container {
display: flex;
flex-wrap: wrap; // 필요한 스타일
align-content: flex-start; // <- 요기 추가
height: 100vh;
background-color: lightcyan;
}align-content: flex-start
위에서 flex-wrap: wrap 만 적용했을떄와 비교해보면 위로 챡 붙어있을을 알 수 있다.
align-content: center
align-content: space-between
justify-content와 마찬가지로 남은 여백을 요소별로 나눠 가진 형태이다
align-content: space-around
justify-content와 마찬가지로 남은 여백을 요소별로 상,하로 나눠 가진 형태이다(축이 바뀌었기 때문에 반대로 나눠 가진다)
flex item에 주는 속성
flex-grow
요소가 원래보다 넓어졌을 때 요소 각각을 어떤 비율로 늘어나게 할 지 설정할 수 있다
⚠️ 단, 여백 기준으로 늘리는 것이지 width 기준으로 늘리는 게 아니다
.item:nth-child(1){
flex-grow: 1;
}
.item:nth-child(2){
flex-grow: 2;
}
.item:nth-child(3){
flex-grow: 1;
}
flex-basis
원래 요소가 점유해야 할 공간을 설정할 수 있다.
설정하게 되면 요소의 너비가 여백이 아닌 내가 지정한 비율대로 너비를 가지게 된다.
.item {
flex-basis: 0;
background-color:rgba(255, 192, 203, 0.5)
}
.item:nth-child(1){
flex-grow: 1;
}
.item:nth-child(2){
flex-grow: 2;
}
.item:nth-child(3){
flex-grow: 1;
}
- 아까랑 무슨 차이인가 싶을 수 있는데 flex-basis가 없을 때에는 남은 여백을 기준으로 설정한 비율을 나누기 때문에 B가 A, C의 2배가 아니었다
flex-shrink
| 참고 영상
지금까지 보던 영상만으로는 shrink 이해가 잘 되지 않아서 추가적으로 찾아봤다. 근데 기본값을 0라고 알려주시는데 사실은 1이다.
아무튼 flex-shrink는 컨테이너가 작아졌을 때 요소를 어떤 비율로 줄일 것인가를 설정하는 것이다. 확인해보기 위해 스타일을 약간 수정했다.
그리고 각각의 요소에 flex-shrink를 다르게 적용해보겠다
.item:nth-child(1){
flex-shrink: 3;
}
.item:nth-child(2){
flex-shrink: 2;
}
.item:nth-child(3){
flex-shrink: 1;
}
영상으로 보는게 이해가 더 빨라서 찍어봤다.
컨테이너가 줄어들때 flex-shrink가 3 > 2 > 1인 순으로 줄어드는게 보인다. 줄어드는 비율이기 때문에 숫자가 클수록 빠르게(많이) 줄어든다.
flex-grow, flex-shrink 축약형
{
flex-grow: 1
flex-shrink: 1
}위 코드는 아래와 같이 축약형으로 쓸 수 있다.
{
flex: 1
}축약형으로 사용했을 때 달라지는 점
flex-basis: 0을 적용하지 않아도 요소들이 자동으로 여백이 아닌 너비를 기준으로 나눠 가지게 된다
활용해보기
하나의 요소에만 flex를 지정했을 때
.item:nth-child(2){
flex: 1;
}
// 나머지 nth-child에는 안넣어줌
이를 응용해서 한가지 요소는 너비를 가지고 그 외의 부분을 전체 너비로 가지는 요소를 가지고 싶을 때
.item:nth-child(1){
width: 200px; // 첫번째 요소에만 고정 너비를 주었다
}
.item:nth-child(2){
flex: 1;
}
align-self
요소가 자신의 정렬을 스스로 지정할 수 있다
align-items 는 container가 하위 요소들의 정렬을 지정하는 것이기 때문에 다른 것이다
.item:nth-child(1){
flex: 1;
align-self: flex-start;
}
.item:nth-child(2){
flex: 2;
align-self: center;
}
.item:nth-child(3){
flex: 1;
align-self: flex-end;
}
order
요소가 정렬될 순서를 지정할 수 있다
.item:nth-child(1){
flex: 1;
order: 2;
}
.item:nth-child(2){
flex: 2;
order: 1;
}
.item:nth-child(3){
flex: 1;
order: 3;
}
마법같이 flex 사용해보기
사실 이런 설명 아니었는데 position등 다른 속성으로 하려면 어려운 작업인데 손쉽게 할 수 있어서 이렇게 제목을 붙여봤다
위에서 만든 예제의 방향을 열 기준으로 바꾸고 싶다면 어째야 할까 정말 막막하다. 그렇게 flex를 사용하면 direction만 수정해주면 아주 쉽게 바꿀 수 있다.
.container {
//...else
flex-direction: column;
}
