# Flexbox란?
- box(container)와 item들을 행, 열로 자유자재로 배치시켜줄 수 있는 유용한 것.
- CSS의 꽃이라고 불린다.
- Flexbox만 잘 이해해도 웹사이트의 layout을 잘 구성할 수 있다.
예전에는 layout을 만들기 위해서 position, float, table을 이용했었다.
가능은 했지만, 너무 복잡하고 시간도 많이 소요됐다.
** float에 대하여
원래의 목적 : 이미지와 텍스트들을 어떻게 배치할 것인가에 대해서 정의하기 위해 나타난 것.
"float: left"로 지정하면 이미지가 왼쪽으로 지정되고 텍스트들이 이미지를 감싸면서 배치된다.
# Flexbox에서 중요한 2가지
Flexbox는 2가지만 이해하면 된다.
1/ container-item
- container에 적용되는 속성값
- item에 적용되는 속성값
1) container에 적용할 수 있는 속성값
2) item에 적용할 수 있는 속성값
2/ 중심축(main axis) - 반대축(cross axis)
위 item들은 왼쪽 → 오른쪽으로 정렬되어있다.
- 중심축(main축) : 수평축
- 반대축 : 수직축
위 item들은 위 → 아래으로 정렬되어있다.
- 중심축(main축) : 수직축
- 반대축 : 수평축
# Flexbox 예시
Emmet으로 요소생성
div.container>div.item.item${$}*10
## height: 100vh vs 100%
.container {
background: beige;
height: 100%;
}
1/ height : 100%
container가 들어있는 부모 요소의 높이의 100%를 말한다.
container는 아직 보이지 않는다.
body를 100%해도 아직안나온다.
그 이유는 html이 아직 height: 100%가 아니기 때문.
html의 height이 100%면 드디어 나온다.
body, html {
height: 100%;
}
.container {
background: beige;
height: 100%;
}
Q. html태그까지 height: 100%로 주면 container가 보이는 이유는?
→ 만약 CSS에서 <html> 태그에 height: 100%;를 지정한다면,
이는 브라우저의 뷰포트에 대해 100% 높이를 가지도록 설정됩니다. <html> 태그는 일반적으로 브라우저의 최상위 요소로 사용되며, 이를 100%로 설정하면 뷰포트의 전체 높이를 차지하게 됩니다.
부모와 상관없이 보이는 뷰포트 height의 100%를 다 쓰겠다!
→ height: 100vh;
item의 크기를 width, height 둘다 40px씩 주자.
지금은 한 줄에 하나씩 나온다.
.item {
width: 40px;
height: 40px;
}
1/ container의 속성값
# 전체적인 방향, 축, wrapping
1) display: flex
flexbox로 만들고싶다면
→ container에 display:flex 준다.
.container {
background: beige;
height: 100vh;
display: flex;
}
2) flex-direction : main축 정하기
.container {
flex-direction: row | row-reverse | column | column-reverse;
}
◆ row, row-reverse : main축은 수평축
- flex-direction: row; (기본값) 왼쪽 → 오른쪽
- flex-direction: row-reverse; 오른쪽 → 왼쪽
◆ column, column-reverse : main축은 수직축
- flex-direction: column; 위 → 아래
- flex-direction: column-reverse; 아래 → 위
3) flex-wrap : 다음줄로 item이 넘어가게 할지
.container {
flex-wrap: nowrap | wrap | wrap-reverse;
}- flex-wrap : nowrap (기본값); item들이 많아지게 되면 한줄에 빼곡하게 붙어있다.
아무리 브라우저 너비가 작아져도 한줄에 붙어있게 된다.
왜냐하면 "wrapping을 안하겠다"라고 지정했기 때문.
- flex-wrap : wrap; item들이 한줄에 꽉 차게되면 자동으로 다음 라인으로 넘어가게 된다.
- flex-wrap: wrap-reverse; 반대로 wrapping된다.
flex items will wrap onto multiple lines from bottom to top.
4) flex-flow : flex-direction + flex-wrap 합친 것.
shorthand for the flex-direction and flex-wrap properties.
The default value is row wrap
ex: flex-flow : column nowrap;
# item들을 어떻게 배치할 건지
1) justify-content : 중심축에서 item들을 어떻게 배치할것인지
- justify-content : flex-start (기본값)
처음부터 오른쪽으로.
만약, 중심축이 수직축이라면 위에서 아래로.
- justify-content : flex-end;
item의 순서는 유지하되, 배치를 오른쪽 → 왼쪽
flex-direction이 column이게 되면, item의 순서는 유지하되, 배치를 아래쪽 → 위쪽
cf) flex-direction: column-reverse;와 차이점
- item들 자체가 반대로 아래쪽에서부터 1,2,3,4 순서로 쌓인다.
- justify-content : center;
item들을 center로 배치.
- justify-content : space-around;
box를 둘러싸게 space를 넣어주는 것.
그래서 제일 왼쪽에 있는것과 제일 오른쪽에 있는 item은 딱 한줄만 들어가서 space가 작고, 가운데 있는 item들은 space가 두줄씩 들어가므로 space가 크다.
- justify-content : space-evenly;
간격을 똑같이 넣어주는 것.
- justify-content: space-between;
왼쪽과 오른쪽 item들은 딱 붙이고 중간에만 space를 넣어주는 것.
2) align-items : 반대축에서 item들을 어떻게 배치할것인지
item들을 수직적으로 중심에 놓고싶을 때.
.container {
align-items: stretch | flex-start | flex-end | center | baseline | first baseline | last baseline | start | end | self-start | self-end + ... safe | unsafe;
}
- align-items : baseline;
item1에 padding이 있어서 text의 위치가 바뀌었을 때 text가 균등하게 보여주는 것.
▼
2) align-content : 반대축의 item을 지정
justify-content는 중심축에서 item들을 배치한다면, align-content는 반대축의 item을 지정하게 된다.
** align-content 속성은 multi-line container, 즉 flex-wrap이 wrap 또는 wrap-reverse인 경우에만 효과가 있다. 만약 single-line container(flex-wrap이 nowrap인 경우)인 경우에는 align-content가 의미가 없다.
.container {
align-content: flex-start | flex-end | center | space-between | space-around | space-evenly | stretch | start | end | baseline | first baseline | last baseline + ... safe | unsafe;
}
- align-content: space-between
align-content의 값을 space-between으로 하게되면, 위아래는 딱 붙어있으면서 중간 item들에 space가 들어가게된다.
▼
justify-content에 사용할 수 있는 것들을 다 쓸 수 있다.
- align-content : center
중간으로 item들이 모여서 배치된다.
** 참고사이트 소개
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
A Complete Guide to Flexbox | CSS-Tricks
Our comprehensive guide to CSS flexbox layout. This complete guide explains everything about flexbox, focusing on all the different possible properties for the parent element (the flex container) and the child elements (the flex items). It also includes hi
css-tricks.com
2/ item의 속성값
1) order: item의 순서를 바꿈
지금 기본적으로 flex이기 때문에 왼쪽 → 오른쪽 row값으로 정렬되어 있다.
item에는 order를 지정할 수 있다.
기본값은 모두 0으로 되어있다. 즉, item이 html에서 나온 상태 그대로 정렬되어 있다.
이걸 order를 이용해서 바꿀 수 있다.
item1은 두번째로 가고, item2 너는 첫번째, item3은 세번째로 가라.
.container {
padding-top: 100px;
background: beige;
height: 100vh;
display: flex;
}
.item {
width: 40px;
height: 40px;
border: 1px solid black;
}
.item1 {
background: #ef9a9a;
order: 2;
}
.item2 {
background: #ce93d8;
order: 1;
}
.item3 {
background: #90caf9;
order: 3;
}
순서가 order에 맞춰서 바뀐다.
(현업에서 order를 바꾼 적은 없다..)
2) flex-grow
flex-grow를 쓰지 않으면, item의 사이즈 40px * 40px을 유지하고 있다. 컨테이너가 아무리 커져도 사이즈가 유지된다.
container가 너무 작아지면 어쩔 수 없이 한줄에 꽉 차있어야하니 조금씩 작아진다. 하지만 자신의 고유한 사이즈를 유지하려고 한다.
하지만 flex-grow를 쓰게되면, container를 꽉 채우려고 item들이 늘어난다.
기본값은 0이다. 그래서 item들이 메우려고 하지 않는다.
item1만 flex-grow를 1로 지정했기 때문에 item2,3은 자신의 고유 사이즈를 유지하고 있다.
item2, 3도 flex-grow를 1로 지정하게 되면,
"너희는 골고루 늘어나게 될거야"라고 지정한 것.
item1은 flex-grow: 2, item2,3는 flex-grow: 1로 지정하게되면,
item2,3에 비해 item1은 2배로 늘어나게 된다.
작아지게 되면 자신의 고유 사이즈로 돌아온다.
3) flex-shrink
- container가 점점 작아졌을 때 어떻게 행동하느냐를 지정하는 것.
- 기본값은 1
- item1,2,3 모두 flex-shrink값이 1이면 container가 작아질때, 똑같은 비율로 작아진다.
item1의 flex-shrink의 값을 2로 주게되면 "너는 2배로 더 줄어들어라"는 의미.
item1이 더 많이 줄어드는 걸 볼 수 있다.
이렇게 flex-grow, flex-shrink는 container의 크기가 바뀌었을 때 item들이 얼마나 어떻게 더 줄어들고 늘어나는지를 정의한다.
4) flex-basis : item들이 공간을 얼마나 차지해야하는지 세부적으로 알려주는 것.
기본값 : auto
auto로 하게되면 flex-grow, flex-shrink에 지정된 것에 맞춰서 변형되지만,
flex-grow, flex-shrink를 쓰지않고
item1에는 flex-basis: 60%,
item2에는 flex-basis: 30%,
item2에는 flex-basis: 10%만 차지해.
이렇게 지정해놓으면 커질때도, 작아질때도 container의 60%, 30%, 10%를 차지하는 걸 볼 수 있다.
굉장히 유용하다.
5) align-self : item별로 item을 정렬.
item1에 align-self: center로 하게되면, item1 하나만 center로 배치하게 된다.
**참고영상 및 자료:
https://www.youtube.com/watch?v=7neASrWEFEM&list=PLv2d7VI9OotQ1F92Jp9Ce7ovHEsuRQB3Y&index=9
https://css-tricks.com/snippets/css/a-guide-to-flexbox/#aa-flex-direction
A Complete Guide to Flexbox | CSS-Tricks
Our comprehensive guide to CSS flexbox layout. This complete guide explains everything about flexbox, focusing on all the different possible properties for the parent element (the flex container) and the child elements (the flex items). It also includes hi
css-tricks.com
'CSS' 카테고리의 다른 글
| [CSS] display에 대하여 (0) | 2023.12.17 |
|---|---|
| 프론트엔드 필수 반응형 CSS 단위 em 과 rem | 예제 프로젝트를 통해 정리 하세요 ✨ by 드림코딩 (0) | 2023.12.10 |
| 가상 클래스 셀렉터(Pseudo-Class Selector) (0) | 2023.10.17 |
| [CSS] transition (트랜지션) (0) | 2023.10.10 |
| HTML파일에 CSS 적용하는 방법 3가지 (0) | 2023.07.10 |
