[CSS] 반응형 박스설정을 위한 display : flex

flex와 grid는 반응형을 위해 쓸 수 있는 효율적인 css 속성이다.

 

먼저, flex에 대해 알아보자.

flex

<div class="fruits">
	<div class="item">apple</div>
	<div class="item">banana</div>
	<div class="item">mango</div>
</div>

자 여기서 fruits는 부모 요소 Flex Container이고 apple,banana,mango는 flax item이라고 부른다.

먼저 플렉스 컨테이너에 적용하는 속성과 아이템에 적용되는 속성이 구분된다.

 

컨테이너에 적용되는 속성

display : flex;

- 먼저 이것은 flex 형식을 따르겠노라고 선언해줘야한다. 그리고 아이템에 flex:(비율값)을 선언해주면

 

 

See the Pen KKzpovq by Levup (@misssim29-the-flexboxer) on CodePen.

 

 

 

이렇게 가로값의 비율에 따라 조절되는것을 볼 수 있다.

 

flex-direction (배치 방향 설정)

 

See the Pen abNOYqQ by Levup (@misssim29-the-flexboxer) on CodePen.

 

 

row : 정방향

row-revese : 수평반대방향

column : 수직방향

column-reverse : 수직반대방향

 

flex-wrap

컨테이너가 더 이상 아이템들을 한 줄에 담을 여유공간이 없을 때 아이템 줄바꿈을 어떻게 할지 결정하는 속성이다.

 

.wrap{
	flex-wrap : nowrap; // 줄바꿈을 하지 않는다
    flex-wrap : wrap; // 줄바꿈을 한다.
    flex-wrap : wrap-reverse // 줄바꿈을 하되 순서가 거꾸로
}

flex-flow

flex-direction과 flex-wrap을 한꺼번에 지정할 수 있는 단축 속성이다.

 

.wrap{
	flex-flow: column wrap;
}

justify-content (메인축 방향 설정)

.wrap{
	justify-content: flex-start; // 기본배치
    justify-content: flex-end; // 끝점으로 정렬
    justify-content: center; // 가운데 정렬
    justify-content: space-between; // 아이템들의 사이에 균일한 간격을 둔다
    justify-content: space-around; // 아이템들의 둘레에 균일한 간격을 둔다
    justify-content: space-evenly; // 양 끝에 균일한 간격을 둔다.
}

space-between, space-around, space-evenly의 차이는 아래와같다.

align-items (수직축 방향 설정)

 

stretch : 기본값

flex-start : 시작점으로 정령 // 가로배치일때는 위, 세로배치일때는 왼쪽

flex-end : 끝으로 정렬

center : 가운데로 정렬

baseline : 텍스트 베이스라인 기준으로 정렬

 

**justify-content : center; align-item:center; 을 해주면 손쉽게 정가운데 정렬을 할 수 있다.

 

아이템에 적용되는 속성

flex-basis

flex 아이템의 기본 크기.

 

flex-grow(유연하게 늘리기)

flex-grow가 1 이상이면 가로값에 맞춰 비율대로 조정한다. flex-basis의 설정값보다 가로값이 작으면 변하지않고 크면 크기에 맞춰 변화한다.

 

flex-shrink(유연하게 줄이기)

flex-grow가 1 이상이면 가로값에 맞춰 비율대로 줄어든다.

 

flex

flex-grow(유연하게 늘리기), flex-shrink(유연하게 줄이기),flex-basis를 축약해서 쓸 수 있다.

item{
	flex : 1; /* flex-grow : 1 ; flex-shrink : 1; flex-basis : 0%; */
    flex : 1 1 auto; /* flex-grow : 1 ; flex-shrink: 1; flex-basis : auto;*/
    flex : 1 500px; /* flex-grow : 1; flex-shrink: 1; flex-basis: 500px;*/
}

align-self

수직축으로 아이템 정렬

 

order

배치 순서

 

z-index

z축 정렬