728x90 flexbox2 [CSS] flex로 div 왼쪽 - 가운데 - 오른쪽 3등분하고 정렬하기 이전 포스팅에서는 flexbox의 기본개념과 flex의 속성에 대해 알아보았는데 이걸 사용해서 div를 3등분 또는 n등분으로 쉽게 나눌 수 있다. 부모 div에 flex 속성을 주고 비율 기입하는 방법으로 div를 나눌 수 있다. 1.방법 부모 div에 display : flex; 속성 부여 자식 div에는 저번 포스팅에서 적었던 것처럼 축약형으로 flex를 사용한다. 1)flex: 숫자; 형식으로 비율을 기입한다. 2)flex-basis: 크기; 형식으로 크기를 지정하는 방법도 있다. *flex-grow값만 지정하는거고 나머지는 1 0으로 사용하는것이다. *flex:2로 주면 (flex-grow:2, flex-shirnk:1, flex-basis:0) flex 값은 flex-grow, flex-shr.. 2019. 4. 17. [CSS] flexbox 개념 및 속성 설명(flex-direction / flex-wrap / flex) Flexbox는 CSS3에 새롭게 반영된 레이아웃 모듈이다(Flexible Box module) 인터페이스 내의 아이템 간 공간 배분 강력한 정렬 기능 1차원 레이아웃 모델 Flexbox는 레이아웃을 다룰때 한번에 하나의 행이나 열만을 다루기 때문에 1차원이라고 이야기를 한다. flexbox는 주축과 교차축이라는 두개의 축에 대해 작동하므로 어떻게 동작하는지 확인하고 이해하는 것이 중요함. 크게 속성을 살펴보면 다음과 같다. 1.flex 컨테이너 -문서의 영역 중에서 flexbox가 놓여있는 영역을 가르킨다. -flex 컨테이너를 생성하려면 컨테이너 요소의 display 값을 flex 혹은 inline-flex로 지정한다. .container { display : flex } 2.flex-directio.. 2019. 4. 16. 이전 1 다음 728x90
