flex box의 기능 목록 및 설명
먼저 요즘은 잘 사용하지 않는 float의 간단한 설명
float 뜻
flioat의 원래 목적은 텍스트와 이미지들을 배치하는 용도로 사용한다
float: left라면 이미지가 왼쪽 상단에 있고
이미지 오른쪽부터 아래로 텍스트가 이미지를 감싸 내려가게 된다
float: center라면 이미지 가운데있고 좌우 텍스트를 감싸고
아래에 텍스트가 배치된다
float 코드모음
float: left
float: center
float: right
flex 코드모음
_container
flex-direction
row = 기본값 왼쪽-오른쪽 정렬
row-reverse = 오른쪽-왼쪽 정렬
column = 기본축을 반대로 바꾼다 기본축이 x축이었다면 y축으로 변경
column-reverse = 반대 (축을 바꾸진 않는다)
flex-wrap
nowrap = 기본값
wrap = item들이 한줄에 가득차면 자동으로 다음 라인으로 넘어간다 (동적 페이지 사용?)
wrap-reverse = 반대
flex-flow = flex-direction, flex-wrap을 합친것이다
예시)
flex-flow: column nowrap; 컬럼은 flex-direction, 노랩은 flex-wrap의 값을 담은것이다
중심축 아이탬 배치
justify-content
flex-start = 기본값
flex-end = 오른쪽 축 방향으로 아이탬을 배치한다 (item의 열은 그대로 유지, reverse와 다르다)
space-around = box를 둘러싸 space를 넣어주는것 (margin과 비슷하지만 px는 못 정함)
space-evenly = 같은 간격 space
space-between = 처음과 끝 box만 제외하고 space를 넣어준다
반대축 아이탬 배치
align-items
center = 중심축이 x축이라면 y축의 가운데 수직 기준 가운데로 배치한다
baselin = 만약 1-10개의 item이 있는데 1번 item만 padding이 들어가있으면 전체 item box의 텍스트가 정렬이 안된다 이때 모든 텍스트를 정렬시켜주는 기능이다
_item
flex-grow
0 = 기본
1 = flwx-grow를 하면 창의 크기만큼 늘어남(여의봉)
2 = flex-grow: 1; 보다 2배로 커져라 라는뜻
flex-shrink
0 = 기본; flex-grow의 반대이다, grow는 커지는것, shrink는 작아지는것
1 =
2 = flex-grow: 1; 보다 2배로 작아져라 라는뜻
flex-basis
auto = 기본
100%-1%까지 = container box의 크기의 몇%를 가져갈 것인지 정해준다
align-self
item별로 정렬가능 item 하나하나씩 정렬도 가능
예)
center = 가운데
%와 vh의 차이
예시
.container {
background: beige;
height: 100%
}
100%는 container가 들어있는 부모의 높이의 100%를 채우겠다는 뜻이다
100vh는 부모에 상관없이 100% 사용한다 라는 뜻이다
부모 순서
container<body<head
div.container>div.item.item${$}*10