flex box 등장배경

positon, float, table 의 한계

동일 위치에 정렬하는것이 복잡

float

float: left / float: center / float: right
원래 용도는 텍스트와 이미지를 배치하는 것이었으나 flex box 이전 box들을 배치하는 heck으로 사용됨

중요 개념 2가지

container(박스)가 갖는 속성값과 그안의 item들이 갖는 속성값으로 나뉜다.

1. container

• display
• flex-direction
• flex-wrap
• flex-flow
• justify-content
• align-items
• align-content

2. item

• order
• flex-grow
• flex-shrink
• flex
• align-self

메인축과 반대축이 있다.

반대(cross)축은 main에 따라 달라진다. 그림과 반대로 수직이 메인이면 수평이 반대축이 된다.

중요 개념 2가지 예시

container

1. display
   • display: flex; 로 flexbox 사용을 알림
2. flex-direction

• flex-direction: row; 기본값은 row 이다. 왼쪽에서 오른쪽으로 수평 배치(중심축이 수평)
  

• flex-direction: row-reverse; 오른쪽에서 왼쪽으로 수평 배치(중심축이 수평)
  

• flex-direction: column; 위에서 아래로 수직배치(중심축이 수직)
  

• flex-direction: column-reverse; 아래에서 위로 수직배치(중심축이 수직)
  

3. flex-wrap

   • flex-wrap: nowrap; 기본값은 nowrap, 아무리 아이템이 많아도 한줄에 위치
     

   • flex-wrap: wrap; 아이템이 창크기에 비해 많은경우 자동으로 다음줄로 넘어감
     

   • flex-wrap: wrap-reverse; 거꾸로 랩핑됨
     

4. flex-flow

   • flex-direction + flex-wrap 을 한번에 설정
   • 형식 flex-flow: column nowrap;

5. justify-content: 중심축에 아이템 배치 조작

   • flex-start;가 기본값. 중심축이 row이면 아이템을 왼쪽을 기준으로 정렬/ column이면 위를 기준으로 정렬
     

   • flex-end;는 중심축이 row이면 아이템을 오른쪽을 기준으로 정렬. 오른쪽에 붙여놓을뿐 아이템 순서를 reverse 하지는 않음
     

   • center;
     

   • space-around; 박스를 둘러싼 스페이스를 넣어줌. 박스기준으로 동일하게 넣어주므로 1번과 10번처럼 박스사이가 아닌 바깥간격은 좁음
     

   • space-evenly; around 사용시 박스사이가 아닌 바깥간격이 좁은 문제 해결. 모든 간격을 일정하게

   • space-between 아이템 사이만 간격을 넣어줌

6. align-items: 반대축에 아이템 배치 속성
   - center; row 가 메인일때 수직으로 가운데에 배치한다.
   
   - baseline; 텍스트가 균등하게 보여질수 있도록 baseline에 맞춘다
   

7. align-content: 반대축 아이템을 지정. justify-content와 동일한 옵션 사용가능. 세로방향으로 각 아이템 간격이 부여되어 있는 것을 확인가능
   

item

1. order
   - 순서변경, 기본값은 0(html상태 그대로)
   
   - 설정시 아이템 순서 변경됨
   - 잘쓰이진 않음~

2. flex-grow, flex-shrink
   - grow : 창크기를 아이템 이상으로 늘릴때 동작
   - shrink: 창크기를 아이템 이상으로 줄일때 동작
   - 공통
   1) 기본값은 0, 창 크기를 변경해도 고유 사이즈 유지
   2) 1로 변경시 창 조절하면 그에 맞게 변경됨
   3) 숫자는 비율 설정임
   

3. flex-basis: 창크기 늘리고 줄일때 동작

   • 기본값auto
   • 비율 설정은 n%로

4. align-self: 개별 아이템별로 특별히 배치
   

기타

%와 vh

• height: 100vh(veiw height)는 부모에 상관없이 보이는 길이를 모두 쓸수있다.

.contatiner{
height: 100vh;
}

• height: 100%; 는 부모인 html height 값에 따른다.

color tool 웹사이트에서 색 코드를 복사가능

MDN 사이트에서 브라우저 호환과 레퍼런스 확인가능

참고사이트

CSS-TRICKS : A Complete Guide to Flexbox