Flexbox
2가지 중요한 포인트가 있다.
1. container,items
각각 적용할 수 있는 속성값들이 있다.
box에 지정하는 속성들이 있고 box에 들어가는 items에 지정하는 속성들이 있다.
container
- display
- flex-direction
- flex-wrap
- justify-content
- align-items
- align-content
items
- order
- flex-grow
- flex-shrink
- flex
- align-self
2. Main axis, Cross axis
flexbox에는 중심축과 반대축이 있다.
만약 수평축(x축)이 중심축이 되면 수직축(y축)은 반대축이 되고
수직축(y축)이 중심축이 되면 수평축(x축)dl 반대축이 된다.
container 속성값들
<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>vh (viewport height)
부모에 상관없이 아이템을 보이는 viewport height의 xx%를 사용하는것.
ex)
.container {
background: beige;
height: 100vp;
}
--------------------------
.body, html {
height: 100%
}
//위와 아래는 동일한 값이 출력된다.1. display
flexbox로 만들고 싶다면 container에 이제 넌 flexbox라고 말해줘야한다.
그럴때 display를 활용한다.
.container {
background: beige;
height: 100vh;
display: flex;
}2. flex-direction
flexbox의 방향성을 정하는 것이다.
default값은 row이다.
flex direction: row // 왼쪽에서 오른쪽으로
flex direction: row-reverse // 오른쪽에서 왼쪽으로
//row 일때 중심축은 수평축(x축)이다.
flex direction: column // 위에서 아래로
flex direction: column-reverse // 아래에서 위로
//column 일때 중심축은 수직축(y축)이다.3. flex-wrap
default값은 nowrap이다. items들이 많아져서 창이 줄어 들게 되면 item들이 자동적으로 한줄에 붙어있는 걸 볼 수 있다. 이는 우리가 wrapping을 하지 않겠다고 지정을 했기 때문이다.
wrap을 지정하게 되면 item들이 한줄에 꽉 차게 되면 자동으로 다음 라인으로 넘어가게 된다.
flex-wrap: nowrap; // default
flex-wrap: wrap; // 꽉 차면 다음 라인으로 넘어감
flex-wrap: wrap-reverse // 반대로 wrapping된다. flex-flow
flex-direction과 flex-wrap을 한줄로 표현한것.
flex-flow: row nowrap;4. justify-content
중심축에서 item들을 어떻게 배치할 것인지를 결정한다.
기본값은 왼쪽에서 오른쪽 혹은 위에서 아래로 이다.
justify content: flex-end;
justify content: center;
justify content: space-around;
justify content: space-evenly;
justify content: space-between;5. align-items
반대축에서 item들을 어떻게 배치할 것인지를 결정한다.
justify-content에서 사용한 속성들을 모두 사용할 수 있다.
align items: baseline; // text가 균등하게 보이게 해준다.6. align-content
반대축에서 item들을 어떻게 배치할 것인지를 결정한다.
justify-content에서 사용한 속성들을 모두 사용할 수 있다.
flex-wrap:wrap;이렇게 wrap이 활성화 되어 있어야하고 두줄 이상이어야 의미가 있는 값이다.
item 속성값들
1. order
order를 지정해서 html에 나온 순서와 별개로 순서를 지정할 수 있다.
2. flex-grow
flex-grow를 사용하지 않으면 원래 지정해놓은 크기를 유지하고 있는다. container가 아무리 커져도 사이즈를 유지하다가 container가 너무 작아지면 어쩔 수 없이 작아지긴 하지만 자신의 고유의 사이즈를 유지하려고 한다.
그런데 flex-grow를 사용하면 컨테이너를 꽉 채우려고 item들이 늘어나게 된다. 기본값은 0 이다.
.item {
width: 40px
height: 40px
border: 1px solid black;
}
.item1 {
flex-grow: 2;
}
.item2 {
flex-grow: 1;
}
.item3 {
flex-grow: 1;
}
// 이렇게 지정하면 1,2,3이 2:1:1의 비율로 커지게 되고 작아지게 되면 고유의 값으로 돌아왔다가 같은 사이즈로 점점 작아지게 된다.3. flex-shrink
flex-shrink를 사용하면 컨테이너가 작아질때 어떤 비율로 줄어들지 결정할 수 있다.
.item {
width: 40px
height: 40px
border: 1px solid black;
}
.item1 {
flex-shrink: 2;
}
.item2 {
flex-shrink: 1;
}
.item3 {
flex-shrink: 1;
}4. flex-basis
item들이 공간을 얼마나 차지하는지 세부적을 명시한다.
기본값은 auto이다.
.item1 {
flex-basis: 60%
}
.item2 {
flex-basis: 10%;
}
.item3 {
flex-basis: 30%;
}5. align-self
container 레벨에서는 justify-content align-items align-content 를 통해서 item들을 골고루 배치할 수 있다면 align-self를 통해서 item별로 item들을 정렬할 수 있다.
