CSS Flex - 단일 아이템 설정

 

 

 

order

.container{
	display: flex;
    flex-direction: row;
}

.item2{
	order: 5;
}

.item3{
	order: 3; /* item2보다 앞에 생성된다. */
}



<!-- HTML -->

<div class="container">
	<div class="item1">1</div>
	<div class="item2">2</div>
	<div class="item3">3</div>
	<div class="item4">4</div>
</div>

   - flex 혹은 grid 컨테이너 내부에서 요소의 우선순위를 지정해주는 속성입니다.

   - 기본값은 order: 0 이며, 정수형 값을 입력합니다.

   - 각자 다른 order 값을 가진 경우 더 작은 order 값을 가진 요소가 앞에 갑니다.

 

 

 

flex-grow

   - 요소를 컨테이너 내에서 할당 가능한 공간의 정도를 조절 가능합니다.

   - 0이 기본값으로, 음수가 아닌 number 형 값을 입력하여 사용합니다.

   - 형제요소가 같은 flex-grow을 가지고 있으면, 차지할 수 있는 최대한의 공간을 동일하게 할당받습니다.

      이는 flew-wrap으로 인해 줄바꿈이 되어도 마찬가지입니다.

   - 서로 다른 flex-grow를 가지고 있다면 값에따라 각자 다른 공간값을 나누어 할당받게 됩니다.

   - 창이 늘어나서 공간이 증가하여도 마찬가지로 적용된 값에 따라 증가합니다.

 

 

flex-shrink

   - 컨테이너 크기 감소시에 요소를 컨테이너 내에서 할당 가능한 공간의 정도를 조절 가능합니다.

   - 1이 기본값으로, 음수가 아닌 number형 값을 입력하여 사용합니다.

   - 값을 추가하면 창이 줄어들때, 적용된 비율에 따라 줄어듭니다.

   - 0을 입력하면 값이 줄어들지 않습니다.

 

 

flex-basis

   - 아이템의 초기 크기를 지정합니다. 따로 지정하지 않는다면 콘텐츠 박스의 크기를 변경합니다.

   - 아이템의 내부 요소 크기에 따라 초기 할당 크기가 달라져

      flex-grow나 flex-shrink에 영향을 주는것을 막기위해 사용합니다.

   - flex-basis 설정 시 비율이 flex-grow나 flex-shrink에 맞춰 변경됩니다.

 

flex (shorthand)

   - flex-grow, flex-shrink, flex-basis의 단축속성입니다.

   - 초기값은 grow : 0 , shrink : 1, basis : auto입니다.

   - 단 flex-basis는 기본값이 0 으로 적용됩니다. 만약 auto로 적용하고 싶다면 flex: initial;을 사용해야 합니다.

   - 적용 방법

      값이 한개일 때, <number>를 지정하면 flex-grow, <length> 또는 <percentage>를 입력하면 flex-basis입니다.

      값이 두개일 때 첫 값은 <number>여야 하며, flex-grow가 됩니다.

         두번째 값은 <number>일 경우 flex-shrink, <length> 또는 <percentage>일 경우 flex-basis 입니다.

      값이 세개일 때 각각 flex-grow, flex-shrink, flex-basis 입니다.

 

align-self

   - 그리드 또는 flex 항목의 값을 재정의합니다.

   - flexbox에서는 항목을 교차축에 정렬합니다.

   - 요소 별로 정렬상태를 지정하는데 사용합니다.