FlexBox

Flexbox : 아이템들을 행 or 열로 자유자재로 배치할 수 있는 유연한 레이아웃방식

• 웹페이지의 레이아웃을 쉽게 구성할 수 있다.

과거 레이아웃 구성할 때 이용한 것들
-position
-float
-table
=>사용하기 까다로웠다.

float 가볍게 알아보기
정의
: 이미지와 텍스트들을 어떻게 배치할지에 대해 정의하기 위해 나타난 레이아웃방식.

float: left //이미지 왼쪽으로 배치 , 텍스트가 이미지를 감싸면서 배치 
float: center //이미지 중앙
float: right  //이미지 오른쪽 

📍 Flexbox 2가지 특성

1. container에 적용되는 속성값들이 존재, 각각의 아이템에 적용할 수 있는 속성값이 존재한다.
- container에 꾸며줄 수 있는 속성값
Ex.

• display
  • display : flex -오른쪽으로 순서대로 정렬됨
• flex-direction
  • row : 왼쪽에서 오른쪽으로 정렬됨 *row-reverse : 반대로 오른쪽에서 왼쪽 정렬
  • column : 위에서 아래쪽으로 정렬됨 *column-reverse : 반대로 아래쪽에서 위쪽 정렬
• flex-wrap
  • nowrap : defalut 값 , 한 라인에 가득차더라도 다음라인으로 넘어가지 않는다.
  • wrap : 한 라인에 가득차면, 다음라인으로 알아서 정렬된다. *wrap-reverse : 반대로 wraping 된다.
• flex-flow : flew-direction, flex-wrap 합한 것 (코드 한줄에 쓸 수 있다.)
• justify-content : 중심축에서 아이템들을 어떻게 배치할 것인지 알려준다.
  • flex-start : 왼쪽에 붙어서 아이템을 배치하는 것
  • flex-end : 오른쪽에 붙어서 아이템을 배치하는 것 ( 순서는 유지하되 오른쪽으로 배치하는 것 )
  • center : 아이템들을 중앙에 맞춰서 배치
  • space-around : 박스에 공간을 둘러싸는 것
  • space-evenly : 똑같은 간격을 넣어 배치하는 것
  • space-between : 왼쪽과 오른쪽은 끝에 붙도록 배치하고, 그 사이에 아이탬을 배치하는 것
• align-items : 반대축에서 아이템들을 배치하는 것
  • center : 반대축의 중앙에 배치해준다.
  • end : 반대축의 끝에 배치한다.
  • baseline : 텍스트가 균등하게 보여질 수 있도록, 베이스라인에 맞춰서 배치된다.
• align-content : 반대축에서 아이템을 지정하게 된다.
  • space-between : (row 일 경우) 아이템들이 위쪽과 아래쪽은 각각 끝에 붙어있고 다른 아이템들과의 사이에 space를 만들어준다.
  • center : 아이템들이 중앙으로 모인다.
  • start : 컨테이너의 위쪽으로 모인다.

- 아이템에 적용되는 속성값
Ex.

• order : 아이템의 순서를 바꿀 수 있다. (잘 쓰이지 않음/-값으로 움직일 수도 있음)
  • default : 0
• flex-grow : 웹사이트를 차지하는 아이템의 비율을 지정할 수 있다. (컨테이너 사이즈와 비례함)
  • default : 0
• flex-shrink : 컨테이너가 점점 작아졌을 때 어떻게 행동하는지 정하는 것. (컨테이너 사이즈와 비례함)
  • default : 0
• flex-basis : 컨테이너 사이즈에 따라 % 로 비율을 지정할 수 있다.
• align-self : 아이템별로 아이템들을 정렬할 수 있다.

2. 중심축과 반대축이 있다. (수직과 수평선)
-아이템들이 정렬되는 쪽이 중심축이 된다.

*유용한 코딩방법

div.container>div.item.item${$}*10 

-$: 별도 고유의 번호 (자동적으로 번호 지정됨)
-*10 : 이 코드를 10번 반복한다.
이렇게 간단한 코드가 밑의 코드로 만들어진다.

<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>

🧷 100% vs 100vh

100% : 이 코드가 들어있는 부모의 높이의 100% 를 채우겠다.
100vh : 부모에 상관없이 아이템을 보이는 뷰포인트 높이 100%를 다 채우겠다.

ui 에서 컬러가 어떻게 나오는지 예시 보여주는 웹사이트
flexbox 참고사이트
flexbox 문제게임
flexbox 이론정리 추가공부