[CSS] Flexbox

float

목적 : 이미지와 텍스트 어떻게 배치할 것인지 정의
- left, center, right : 텍스트가 이미지 감싸는 형태로 나타남

 

flexbox

1. container에 적용 : display, flex-direction, flex-wrap, justifu-content, align-iems, ...
2. item에 적용 : order, flex-grow, flex, align-self, flex-shrink
중심축(main axis)과 반대축(cross axis)이 있다

 

실습 준비

div.container>div.item.item${$}*10 입력 후 tab키 누르기

Tip
height: 100% → 아이템에 맞게 높이가 지정됨, 아이템이 들어있는 부모의 높이에 100% 채우겠다
예를 들면, container의 부모는 body니까 body의 높이에 100% 채우겠다
body의 부모는 html이므로 body의 height: 100%로 지정하면 html의 높이에 100% 채운다

height: 100vh → 아이템을 부모에 상관없이, 현재 보이는 height를 100% 다 쓰겠다
80퍼만 쓰고 싶다면 80vh 등

 

1. container에 적용하는 flexbox

flex-direction

   1) 중심축 : 수평

row : 왼쪽에서 오른쪽, 디폴트
row-reverse : 오른쪽에서 왼쪽

   2) 중심축 : 수직

column : 위에서 아래
column-reverse : 아래에서 위

flex-wrap

들어있는 아이템들 줄바꿈 관련
nowrap : 랩핑 안함, 화면 크기가 작아져도 한 줄에 계속 붙어있다, 디폴트
wrap : 아이템이 한줄에 꽉 차면 자동으로 다음 줄로 넘어간다
wrap-reverse : 위에서 반대로 랩핑

flex-flow

direction과 wrap 한번에 정의 가능
예를 들면 border: 1px solid black; 처럼 정의하듯이!

justify-content

아이템을 중심축(main axis)에서 어떻게 배치할지 결정
flex-start : 왼쪽에서 오른쪽, 디폴트
flex-end : 오른쪽 끝 축으로 배치, 아이템 순서는 그대로 유지
space-around : 각 아이템들 둘러싸는 space 생성, 양 끝과 사이의 아이템들 간격이 다르다
space-evenly : 아이템들에 똑같은 간격을 넣어줌, 양 끝 아이템 포함
space-between : 양 끝 아이템은 화면에 붙이고, 중간 아이템에만 간격을 넣어줌

align-items

아이템을 반대축(cross axis)에서 어떻게 배치할지 결정
baseline : 박스 크기가 달라도 텍스트가 baseline에 맞춰서 균등하게 배치된다

align-content

아이템들이 2행 이상 있을 때 반대축에서의 배치 결정
space-between : 위 아래는 끝에 붙어있고 사이 아이템에는 간격 준다
center : 중간으로 아이템들 모은다

 

2. item에 적용하는 flexbox

order

각 아이템들의 순서를 지정할 수 있다

flex-grow

아이템들이 컨테이너를 꽉 채우기 위해 늘어난다
디폴트 값은 0
각 아이템의 크기 "비율"을 지정

flex-shrink

컨테이너가 점점 작아지면 어떻게 행동하는지 지정
다른 아이템들에 비해서 몇 배로 작게 줄어들어라

flex-basis

아이템들이 공간을 얼마나 차지해야 하는지 세부적인 명시
디폴트 값은 auto
각 아이템들이 차지하는 % 지정

align-self

아이템별로 아이템들 정렬 가능
예를 들면, 하나의 아이템만 center로 배치하는 등

 

 

 

 

참고 : youtube 드림코딩 by 엘리(https://www.youtube.com/watch?v=7neASrWEFEM)