display : flex

블록요소 가운데 정렬
margin: 0 auto

인라인요소 가운데 정렬
text-align :center

인라인 요소 세로가운데정렬 x
line height : height 값과 일치
세로 가운데처럼 보이게 하는 효과를 나타냄

인라인 요소에 위드 하이트 값을 줄려면 display : block를 줘야함

///인라인요소에 포지션 속성 적용시 블록요소처럼 w,h를 적용가능

1차원 레이아웃 생성


flex 구조

 

부모한테 display = flex를 주고

자식한테 flex = none 값을 준다.

부모 > 자식 으로 구조를 생성

부모 : flex container

자식 :flex item

container -> 명령어
레이아웃 배치방향
레이아웃 정렬
여백

item ->  명령어
아이템의 크기
아이템의 배치순서

1) flex 적용하기

부모 (container)
display:flex
기본레이아웃은 가로배치
flex-direction: row, column
가로이든 세로이든 하나만 사용가능

flex-direction으로 지정한 방향을 -> main axis(주축)

나머지방향
Cross Axis, Sub Axis (교차축, 서브축)

정렬명령어

- 주축명령어 (x축)

justify-content

flex-start (left정렬)
flex-end (right정렬)
center
space-between (배분정렬) 
space- around (배분정렬)

- 서브축 명령어 (y축)

align - items
: stretch (기본값) : 보조축의 공간이 아이템의 높이보다 클때 자동으로 높이를 늘려줌
: flex-start
: flex-end
: center
: baseline

algin- content

flex-item의 크기

1) 부모 > 자식보다 클때

2) 부모 < 자식보다 작을때
flex-grow
flex-shrink
flex-basis


- 아이템이 컨테이너보다 클때 (자식이 부모보다 클때)
flex - wrap
컨테이너 밖으로 넘치게 할것인가
자동으로 컨테이너 안에서만 보여주게 할것인가를 설정

기본값은 nowrap
wrap 아이템은 무조건 컨테이너 안에서만 보임