박스가 커지면 아이템들이 어떻게 커져야하는지 박스가 작아지면 아이템들이 어떻게 작아져서 배치되어야하는지
float: 이미지와 텍스트를 어떻게 배치할 것인지에 대한 정의
Flexbox가 생기면서 float는 원래의 목적에 맞게 사용하면 된다.
Flexbox: 박스를 배치한다. (행, 열)
container의 속성값, container안의 items 속성값으로 나뉜다.
container 속성값:
-display
-flex-direction
-flex-wrap
-flex-flow
-justify-content
-align-items
-align-content
item 속성값:
-order
-flex-grow
-flex-shrink
-flex
-align-self
수평축이 중심축이고,
수직축이 반대축이 된다.
수직축이 중심축이고,
수평축이 반대축이 된다.
중심축을 수직으로 두느냐 수평으로 두느냐에 따라 반대축이 바뀐다.
div.container>div.item.item${$}*10<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div class="container">
<div class="item item1">1</div>
<div class="item item2">2</div>
<div class="item item3">3</div>
<div class="item item4">4</div>
<div class="item item5">5</div>
<div class="item item6">6</div>
<div class="item item7">7</div>
<div class="item item8">8</div>
<div class="item item9">9</div>
<div class="item item10">10</div>
</div>
</body>
</html>body, html {
height: 100%;
}
.container{
background:beige;
height: 100%;
}여기에서 height를 100%라고 하면 컨테이너의 부모body에 100%를 채우겠다는 의미.
.container{
background:beige;
height: 100vh;
}
플렉스 박스를 사용하기 위해 먼저 컨테이너에 디스플레이에 플랙스라고 명시해준다.
왼쪽에서 오른쪽으로 정렬된다.
그 다음 컨테이너 레벨을 지정해주는데 기본값은 row이다. 왼쪽에서 오른쪽으로 가는 방향.
row-reverse는 왼쪽에서 오른쪽 방향. 여기서 중심축은 수평축이다.
column으로 해주면 위에서 아래로 가는 방향이 된다.
colume-reverse는 아래에서 위로 가는 방향이 된다.
flex-wrap의 기본값은 nowrap이다. 아이템들을 한줄에 무조건 넣는다.
wrap를 하게 되면 다음칸으로 넘어간다.
wrap-reverse는 아래에서 위로 거꾸로 올라온다
.container{
background:beige;
height: 100vh;
display: flex;
flex-direction:row;
flex-wrap: nowrap;
}
flex-flow는 flex-direction과 flex-wrap를 합친것이다.
.container{
background:beige;
height: 100vh;
display: flex;
flex-flow: column nowrap;
}
.item {
width: 40px;
height: 40px;
}
아이템을 어떻게 배치할 것인가에 대한 것은 justify-content로 한다.(중심축: main axis)
flex-start, flex-end, center는 디렉션에 따라 바뀐다. 순서가 아니라 화면의 위, 아래, 중간의 배치를 말한다.
space-around는 박스를 둘러싸게 공간을 준다.
space-evenly는 똑같은 간격을 준다.
space-between은 양끝 간격은 없고, 중간에 아이템들의 간격만 준다.
justify-content는 중심축에서 아이템을 배치하는 거였다면 align-items는 반대축에서 아이템을 배치하는 방법이다.
.container{
background:beige;
height: 50vh;
display: flex;/* 보여준다 */
flex-direction:row; /* 방향 가로, 세로*/
flex-wrap: wrap; /* 다음줄로 넘길건지 */
/* flex-flow: column nowrap; */
/* 아이템을 어떻게 배치 */
justify-content: space-between;
align-items: baseline;/* 반대축 */
/* baseline은 아이템 1에 패딩값이 있어도 중심으로 보여줄 수 있게 한다. */
align-content:center; /* 반대축의 아이템을 지정한다 */
/* 브라우저 호환이 안될 경우도 있어서 확인해야한다. */
}
.item {
width: 40px;
height: 40px;
}
.item1{
background:#ffcdd2;
padding: 20px;
}
.item2{
background:#e1bee7;
}
.item3{
background:#c5cae9;
}
.item4{
background:#b3e5fc;
}
.item5{
background:#b2dfdb;
}
.item6{
background:#dcedc8;
}
.item7{
background:#fff9c4;
}
.item8{
background:#ffe0b2;
}
.item9{
background:#d7ccc8;
}
.item10{
background:#cfd8dc;
}
item에 order의 기본값은 0인데 각 아이템에 번호를 넣어주면 순서가 바뀐다. 현업에서는 잘 쓰이진 않는다.
.container{
background:beige;
height: 50vh;
display: flex;
align-items:center;
}
.item {
width: 40px;
height: 40px;
}
.item1{
background:#ffcdd2;
order:2;
}
.item2{
background:#e1bee7;
order:1;
}
.item3{
background:#c5cae9;
order:3;
}flex-grow은 한줄에 가득차려고 하는 성질이 있다. 기본값은 0이다.
.container{
background:beige;
height: 50vh;
display: flex;
align-items:center;
}
.item {
width: 40px;
height: 40px;
}
.item1{
background:#ffcdd2;
order:2;
flex-grow:1;
}
.item2{
background:#e1bee7;
flex-grow:2;
}
.item3{
background:#c5cae9;
flex-grow:3;
}flex-shrink은 화면을 줄일 때의 크기를 지정한다. 기본 값은 0이다.
.container{
background:beige;
height: 50vh;
display: flex;
align-items:center;
}
.item {
width: 40px;
height: 40px;
}
.item1{
background:#ffcdd2;
order:2;
flex-grow:1;
flex-shrink:1;
}
.item2{
background:#e1bee7;
flex-grow:2;
flex-shrink:2;
}
.item3{
background:#c5cae9;
flex-grow:1;
}grow와 shrink는 컨테이너의 사이즈가 바꼈을때 아이템들이 얼마나 줄어들고 늘어나야하는지 정의한다.
flex-basis는 공간을 얼마나 차지해야하는지 세부적으로 명시할 수 있다. 기본값은 auto다. grow와 shrink없이 %으로 지정해서 컨테이너의 width에 따라서 변형된다.
.container{
background:beige;
height: 50vh;
display: flex;
align-items:center;
}
.item {
width: 40px;
height: 40px;
}
.item1{
background:#ffcdd2;
flex-basis:60%;
}
.item2{
background:#e1bee7;
flex-basis:30%;
}
.item3{
background:#c5cae9;
flex-basis:10%;
}
align-self는 아이템 각각을 정렬할 수 있다.
.container{
background:beige;
height: 50vh;
display: flex;
}
.item {
width: 40px;
height: 40px;
}
.item1{
background:#ffcdd2;
flex: 2 2 auto; /* grow, shrink, basis */
align-self: center;
}
.item2{
background:#e1bee7;
}
.item3{
background:#c5cae9;
}
플렉스 정리
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
MDN 플레스
developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox
Basic concepts of flexbox - CSS: Cascading Style Sheets | MDN
Basic concepts of flexbox The Flexible Box Module, usually referred to as flexbox, was designed as a one-dimensional layout model, and as a method that could offer space distribution between items in an interface and powerful alignment capabilities. This a
developer.mozilla.org
플렉스 게임
Flexbox Froggy
A game for learning CSS flexbox
flexboxfroggy.com
'STUDY > HTML, CSS' 카테고리의 다른 글
| FreeCodeCamp: Button Style CSS3 (0) | 2021.05.14 |
|---|---|
| CSS display, position (0) | 2021.01.20 |
| CSS Basic (0) | 2021.01.20 |
| HTML Basic (0) | 2021.01.20 |
댓글