출처 : 유튜브 드림코딩 flexbox
flexbox? item들을 행 또는 열로 자유자재로 배치시킬 수 있다.
float : flexbox 이전에 사람들이 자주 사용하던 것. image와 text를 어떻게 배치할 것인지를 정의하기 위해 나타남.
ex) float : left ; float : center
**
✏️ flexbox의 큰 특징 2가지
1. container/ item 속성값들이 존재한다.
2. 중심축(main axis)와 반대축(cross axis)이 있다.
flexbox에는 container 내에 적용할 수 있는 속성값들, item 내에 적용할 수 있는 속성값들이 존재한다.
flex의 방향을 가로(행, row)로 할 것인지 세로(열, column)로 할 것인지 결정한다. 기본값 : row
wrap : item 들이 한줄에 꽉 차게 되면 자동적으로 다음 line으로 넘어가게 한다. flex-wrap 기본값 : nowrap
.container{
display : flex;
flex-direction : row;
flex-wrap : wrap;}
.container{
display : flex;
flex-direction : row-reverse;
}
row-reverse : 행으로 배치하고 item들의 순서를 역으로 바꾼다.
flex-direction 과 flex-wrap 을 합친 것
.container{
flex-flow : row nowrap;}
중심축(main axis)에서 item 이 어떻게 배치할 것인지를 보여준다. 기본값 : flex-start
justify-content: flex-end;
위의 코드를 통해 item들을 오른쪽에 배치한다.
flex-direction : column;
justify-content: flex-end;
위의 코드를 통해 item들을 아래쪽에 배치한다.
justify-content : center; -> item 가운데 정렬
justify-content : space-around; -> item 사이 양 옆 공간을 준다.
justify-content : space-evenly; -> item 모든 사이 공간이 같다.
justify-content : space-between; -> 가장 끝 item들은 공간이 없다.
반대축(cross axis)에서 item을 배치한다.
ex)
align-items : center;---> 반대축(열)의 가운데에 배치
align-items : baseline;----> item 모두 균등하게 배치
반대축(cross axis) item을 지정한다.
align-content : space-between;
align-content : center;
align-content : space-evenly;
item 들의 순서 지정 가능
.item{
order : 1;}
container를 item들이 꽉 채울 수 있게끔 만들어줌. 기본값 : 0
.item1{
flex-grow:1}
.item2{
flex-grow:1}
.item3{
flex-grow:1}
container가 점점 작아졌을 때 얼마나 item 줄어들게 할 것인지 지정한다. 기본값 : 0
.item1{
flex-shrink:2}
.item2{
flex-shrink:1}
.item3{
flex-shrink:1}
item1 이 다른 item들보다 두배 더 작게 줄어든다.
=> flex-grow 와 flex-shrink는 container의 size가 바뀜에 따라 item들이 얼마나 줄어들고 늘어나야하는지를 정의한다.
item들이 얼마나 자리를 차지해야 하는지 세부적으로 명시할 수 있게 해준다.
기본값 : auto
flex-basis : 70%
무조건 다른 item들에 비해 70%를 차지한다.
item 개개별로 item을 정렬한다. container을 벗어날 수 있다.
.item1{
align-self : center}
위의 해당 아이템만 중앙정렬된다.
참고)
div.container>div.item.item${$}*10
tap key 누르면, 아래와 같이 생성됌.
<div class = container>
<div class = "item item1">1</div>
<div class = "item item2">2</div>
.생략
.
.
.
.
<div class = "item item10">10</div>
</div>