flex란
flex는 display, float, position등에서 해결하지 못 한 한계를 구현하기 위하여 추가된 방식이다
flexbox는 부모 요소인 flex container와
자식 요소인 flex item으로 구성된다
이 때 기본값은 주축이 가로축, 교차축이 세로축이며
이는 속성을 통해서 바꿀 수 있다
flex의 속성
flexbox에서 사용하는 속성은 부모 요소인 flex container에 정의하는 속성과 자식 요소인 flex item에 정의하는 속성으로 나누어진다
flex container 속성
-flex-direction: 주축을 결정한다
-flex-wrap: 줄 넘김을 결정한다
-justify-content: 주축 배열을 결정한다
-align-content: 교차축 배열을 결정한다
flex item의 속성
-flex: 1 1 0의 형태로 사용하며 flwx-grow, flex-shrink, flex-basis의 축약형태이다
flex 1은 flex: 1 1 0을 의미한다
flex: initial은 flex: 0 1 auto와 같다
flex: none는 flex: 0 0 auto와 같다
flex: auto는 flex: 1 1 auto와 같다
-flex-grow: 0과 1을 값을 가지며 0일 때는 container의 크기에 따라 요소의 크기가 커지지 않고 유지되고, 1일 때는 요소의 크기가 커진다
-flex-shrink: 위와 반대로 고정되거나 줄어든다
-flex-basis: 기본크기를 결정하며 기본값은 auto이다
-order:
개발 공부 블로그