CSS3의 flexbox(flex) 정리

| flexbox(flex)

: 간단하게 레이아웃을 정렬할 수 있는 속성으로 flex container와 flex item 두가지로 나뉜다.

1. flex container

   • display : flex ; ( inline요소처럼 일렬로 배치된다 - 기본값 row )
     : container에 flex를 넣으면 item이 일렬로 배치가 된다.

   • flex-direction ( 배치 방향 )

     • row (기본값) : item이 가로방향으로 배치된다.
     • row-reverse : item이 가로방향, 역순으로 배치된다.
     • column : item이 세로방향으로 배치된다.
     • column-reverse : item이 세로방향, 역순으로 배치된다.

   • flex-wrap ( container의 width보다 item의 width가 클 때, 줄 바꿈 요소 )

     • nowrap (기본값) : 줄바꿈을 하지 않는다.
       ( container의 width에 영향을 받지 않고 item의 width에 맞춤 -> 넘치게 된다. )
     • wrap : 줄바꿈을 한다.
       ( container의 width에 맞게 줄바꿈이 된다.)
     • wrap-reverse : 줄바꿈을 하나, 역순으로 배치한다. ( 끝에 배치한 자식요소가 첫번째로 배치가 된다. )

   • flex-flow ( flex-direction과 flex-wrap을 한번에 작성 할 수 있음)

     • flex-flow : column nowrap;
       = flex-direction : column;
       = flex-wrap : nowrap;

   • justify-content ( 가로축을 기준으로 좌우정렬 )

     • flex-start(기본값) : item을 시작(top:0, left:0)부분에서 정렬한다.
       ( flex-direction : row | 시작 = left ),( flex-direction : column | 시작 = top )
     • flex-end : item을 끝(bottom:0, right:0)부분에서 정렬한다.
       ( flex-direction : row | 끝 = right ),( flex-direction : column | 끝 = bottom )
     • center : item을 가운데로 정렬한다. ( width를 정해준 뒤 margin:auto를 해준것처럼 )
     • space-between : item들의 사이에 균일한 간격을 만들어준다.
     • space-around : item들의 둘레에 균일한 간격을 만들어준다.
     • space-evenly : item들의 사이와 양쪽 끝에 균일한 간격을 만들어준다.

   • align-items ( 세로축을 기준으로 상하정렬 )

     • stretch (기본값) : container의 높이만큼 item이 수직축으로 늘어난다.
     • flex-start : item을 시작(top:0, left:0)부분에서 정렬한다.
       ( flex-direction : row | 시작 = top ),( flex-direction : column | 시작 = left )
     • flex-end : item을 끝(bottom:0, right:0)부분에서 정렬한다.
       ( flex-direction : row | 끝 = bottom ),( flex-direction : column | 끝 = right )
     • center : item을 가운데로 정렬한다.

2. flex item

   • flex-basis ( flex item의 기본 사이즈를 지정하는 속성 )
     • auto (기본값) : 컨텐츠의 크기에 따라서 사이즈가 결정된다.
     • flex-basis는 width에서 사용하는 모든 단위(px, %, em, rem ···)을 사용 할 수 있다.
       : flex-direction이 row일 때는 width, column일 때는 height로 지정이 된다.
       : flex-basis와 width를 동시에 적용할 경우 flex-basis가 우선순위를 갖게 된다.
   • flex-grow ( flex-basis 속성에서 정한 기본 사이즈를 늘리는 속성 )
     • 0 (기본값)
       : flex-basis를 제외한 여백 부분을 flex-grow에 지정된 숫자의 비율로 나누어 가진다
       ( 정수는 물론이고 소수점도 넣을 수 있다. )
   • flex-shrink : flex-basis 속성에서 정한 기본 사이즈를 줄이는 속성
     • 1 (기본값)
       : container의 flex-wrap: wrap; 속성을 부여한 경우 적용되지 않는다.
       : flex-wrap 속성을 정의하지 않거나 flex-wrap : nowrap 을 정의해주어야 사용이 가능하다.
   • flex ( flex-grow, flex-shrink, flex-basis를 한 번에 쓸 수 있는 축약형 속성 )
     • flex : flex-grow, flex-shrink, flex-basis 순서로 작성이 된다.
       ex) flex : 1 => flex-grow=1, flex-shrink=1, flex-basis=0
       : flex-basis의 기본 점유 크기를 0으로 만든 후 화면 비율에 따라 유연하게 늘어나거나 줄어들 수 있음을 만들 수 있다.
   • align-self ( 세로축 정렬 - item )
     • auto (기본값) : 기본적으로 align-items 설정을 상속받는다.
     • 이외의 나머지 값은 align-items와 동일하다.
   • order ( 시각적 나열 순서 )
     • auto (기본값) : html 순서 기준이 기본값이며 낮은 숫자로 지정하는 부분이 먼저 배치된다.
     • 스크린 리더에서는 html기준으로 리딩되기 때문에 order로 바꾼것은 의미가 없다.

3. flex를 재밌게 익히는 사이트
   https://flexboxfroggy.com/#ko