https://heropy.blog/2018/11/24/css-flexible-box/
CSS Flex(Flexible Box) 완벽 가이드
많은 경우 float, inline-block, table 등의 도움을 받아서 수평 레이아웃을 구성하지만 이는 차선책이며, 우리는 Flex(Flexible Box)라는 명확한 개념(속성들)으로 레이아웃을 쉽게 구성할 수 있습니다. CSS F
heropy.blog
Flex
Flex를 사용하기 전 블럭들을 가로로 배치할 경우1
<div class="container">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>.container {
border: 2px solid red;
}
.container .item {
width: 100px;
height: 100px;
border: 2px solid;
border-radius: 10px;
display: inline-block;
}네모박스를 수평 정렬을 하기 위해서 위와 같이 코드를 짜면 아래와 같이 나온다.
중간에 블럭들 사이에 한칸씩 띄어져 있는데 inline요소라서 띄어쓰기 한칸씩 들어가기 때문이다.
block속성을 가지면서 width와 height값을 가질 수는 있었지만 inline요소는 한칸씩 띄어진다.
이 띄어져 있는 문제를 해결하기 위해서 과거에는
.container에 font-size를 0을 줘서 띄어쓰기 자체를 0으로 만들어서 붙였고
.container .item에 font-size: 16px을 줘서 박스 안에 들어갈 폰트크기를 다시 지정해줬다.
Flex를 사용하기 전 블럭들을 가로로 배치할 경우2
float과 clearfix라는 클래스를 만들어서 했었다.
<body>
<div class="container clearfix">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
</body><style>
.container {
border: 2px solid red;
}
.container .item {
width: 100px;
height: 100px;
border: 2px solid;
border-radius: 10px;
float: left;
}
.clearfix::after {
content: "";
display: block;
clear: both;
}
</style>
Flex를 사용해보자.
flex하나만 사용해서 바로 수평을 만들 수 있다.
<body>
<div class="container">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
</body><style>
.container {
border: 2px solid red;
display: flex;
}
.container .item {
width: 100px;
height: 100px;
border: 2px solid;
border-radius: 10px;
}
</style>
container와 items
위 flex 코드 예시와 같이 display: flex 들어간 부분이 container가 된다고 생각하면 된다.
이렇게 하면 container안에 들어가는 것은 자동으로 items가 된다.
Flex Container 속성
display
display: flex
컨테이너 자체가 블럭처럼 세로로 쌓인다.
display: inline-flex;
컨테이너 자체가 인라인 요소처럼 가로로 쌓인다.
✅ container안에 items들은 그대로 가로로 정렬된다는 점!
여기서 이해를 돕기 위해 잠깐 정리하면!
container자체에 flex던 inline-flex던 display를 주면 내부에 있는 요소들은 일단 가로로 정렬되고
그 다음 container가 블럭처럼 세로로 쌓일지(flex) 가로로 쌓일지(inline-flex) 결정된다고 생각하자.
flex flow, flex-direction
flex-flow: 주축 여러줄묶음;
flex-flow: {flex-direction} {flex-wrap}
flex-direction: row는 items들이 수평정렬된다.
flex-direction: column은 items들이 수직정렬된다.
row-reverse와 column-reverse가 있다.
Flex 주축(main-axis)과 교차축(cross-axis)
시작점과 끝점
❗️ 교차축의 시작점과 끝점은 reverse가 되어도 달라지지 않는다.
flex-wrap
여러줄로 묶을 것이냐(wrap) 여러 줄로 묶지 않을 것이냐(nowrap) 정도만 알고 있으면 된다.
기본적으로 nowrap이기 때문에 한 줄에서만 표시된다.
justify-content
주 축(main-axis)의 정렬 방법을 설정한다.
align-content
flex-wrap: wrap이어야 하고 아이템들이 두 줄 이상, 여백이 있어야 한다.
예를 들어서 align-content는 쓰지 않고 justify-content만 썼을 때는 아래와 같이 될 수 있다.
item들의 높이를 지정해놔서 그렇지 item들의 높이를 auto로 해놓는다면 위아래로 달라붙어있는 것을 볼 수 있다.(기본값이 stretch)
하지만 align-content로 교차축에서도 센터로 맞춰준다면 아래와 같이 된다.
여기서 align-content: center로 하지 않고 stretch로 한다면 위아래로 늘려져서 붙는 등 다른 방법들도 있다.
❗️ 계속 주의해야 할 점은 2줄 이상일 때 사용가능하다.
align-items
교차 축(cross-axis)에서 items의 정렬 방법을 설정한다.
❗️ 그렇다면 align-content와 align-items의 차이점은 무엇인가요?
align-content는 여백이 있어야되고 2줄이 있어야되는데 align-items는 한 줄일 때 사용한다.
그렇기 때문에 이전에 요소안에 텍스트같은 것을 가운데 정렬할 때 justify-content: center; align-items: center; 한 것이다.
2줄 이상일 경우에는 align-items보다 align-content가 우선이 되기 때문에
2줄 이상일 때 align-items를 사용하려면 align-content를 기본 값인 stretch로 놓고 사용해야 한다.
그림을 보면 두 줄일 때 align-items을 사용할 때인데 align-items는 한 줄씩 적용된다는 것에 유의하자.
글자의 크기가 다 다르게 표기된 이유는 baseline을 보면 문자열을 기준으로 배치되기 때문이다.
✅ item안에 글자를 가운데 정렬할 때 설명
item자체에 display: flex를 주게 되면 item 하나하나가 flex의 컨테이너가 된다. 이 flex안에서 글자가 items가 되기 때문에
items를 가운데 정렬하려면 justify-content: center로 주축에 대하여 (좌->우) 가운데 정렬해주고 1줄 이기 때문에 align-items: center로 교차축 가운데 정렬을 해준다.
Flex Items 속성
item 하나하나 개별적으로 적용 가능한 flex items 속성에 대해 배운다.
order
기본값은 0으로 다 세팅되어 있으며
order 값을 줘서 좌측에 있는 order 수 보다 크다면 우측으로 밀린다.
만약 숫자가 같으면 html구조를 보고 구조에서 더밑에 있다면 우측으로 밀린다.
flex-grow
items의 너비 비율을 말합니다.
만약에 블럭1개만 flex-grow: 1이고 나머지 2개는 width: 100px씩 가지고 있었다고 하면
width가 100인 두 블럭은 그대로 자리를 차지하고 나머지 공간을 flex-grow: 1인 블럭이 차지한다.
+ 블럭이3개 일 때 flex-grow를 2개의 블럭에만 적용했다고 가정하자. 정확히 2배가 되게 하려면?
그런데 블럭 2개를 flex-grow: 1, 2로 각자 두고 나머지 1개는 width: 100px이라고 하면
flex-grow를 준 2개의 블럭에 width값이 100으로 들어가 있다면 이 두 개가 정확히 2배가 되지 않는다.
그래서 이 때는 flex-grow를 준 2개의 블럭에 width값을 제거해두면 auto로 자동으로 될 것이고 이 두 블럭은 2배 차이날 것이다.
+ 블럭이 2개일 때 한개는 고정되고 한개는 가로가 가변되게 만들 수 있다.
블럭 1개는 flex-grow: 1을 주고(가변하는 부분 / 창 너비를 늘렸다 줄였다 할 때 변화될 부분) 다른 1개는 width: 100px;만 주는 식으로.
flex-shrink
items 감소 비율을 말합니다.
숫자가 클 수록 더 크기가 감소합니다.
flex-basis가 200px이면 기본 너비가 200px인 것을 말한다. width는 고정너비인데 witdh와 좀 다른 개념이다 조금있다 살펴보자.
사용빈도가 엄청 많지는 않다고 한다. 이런 원리로 되는 것이구나만 봐놓자.
flex-basis
기본너비라고 보면 된다.
flex-basis: auto는 내부 컨텐츠 외에 비율을 조절한다.(기본)
flex-basis: 0은 내부 컨텐츠에 신경쓰지 않고 전체크기 자체로 조절한다.
flex-basis: 100px은 기본 너비 자체를 지정해줬다.
flex
item의 너비(증가, 감소, 기본)을 설정하는 단축 속성.
flex-grow : item의 증가 너비 비율 / 기본값 0
flex-shrink : item의 감소 너비 비율 / 기본값 1
flex-basis : item의 기본 너비 설정 / 기본값 auto
flex: 증가너비 감소너비 기본너비;
❗️ 주의사항
flex: 1 // 증가너비는 1로 쓰고 나머지는 기본값으로 쓰겠다
그런데 문제는 뭐냐면 flex-basis가 이렇게 단축속성을 쓸 때 명시를 안하면 0이 된다.
> 해결방법 단축속성을 쓰면서 grow 1넣어야 한다면 flex: 1 1 auto;
align-self
교차 축에서 개별 item의 정렬 방법을 설정.
❗️ align-items는 Container에 부여했었다. 그에 따라 모든 items의 정렬 방법을 설정했었다!
응용해서 전체적으로 교차축에 대해 정렬하고 하나의 아이템에 추가로 정렬을 부여하려면
컨테이너에 align-items를 부여하고 개별 아이템에 align-self를 부여하자.
auto를 제외하고는 모두 align-items에 있던 내용이다.
align-items보다 우선시 적용된다.
2번 : align-self: center
4번 :flex-start
7번 height를 auto로 만들어서 100px을 풀어버리고 stretch
'Developer Camp[Fastcampus NKLCB] 2021.07 > 2021.07~ FastCampus 네카라쿠배2기' 카테고리의 다른 글
| 5일차 : Javascript(1) (0) | 2021.07.16 |
|---|---|
| 4일차 : CSS Animation (0) | 2021.07.15 |
| 4일차 : Figma 김데레사 강사님(html, css) (0) | 2021.07.15 |
| 4일차 : CSS 배경 (0) | 2021.07.15 |
| 3일차 : Git에 대해서 (0) | 2021.07.15 |
댓글