CSS flexbox 초보자 가이드 - 2부

첫 번째 부분에서는 flex 컨테이너에 영향을 주는 flexbox 속성에 대해 썼습니다. 이 두 번째 부분에서는 작동 방식과 함께 플렉스 항목에 영향을 미치는 flexbox 속성을 제공합니다.

1부에서 사용한 것과 동일한 펜을 사용하겠습니다.

<div class="container">
   <div class="one">1</div>
   <div class="two">2</div>
   <div class="three">3</div>
   <div class="four">4</div>
</div>

.container{
display: flex;
}

.one, .two, .three, .four {
  background-color: #f5f  
  padding: 2rem;
  font-size: 2rem;
}

주요 속성은 다음과 같습니다.

주문

플렉스 성장

플렉스 쉬링크

플렉스 기반

플렉스

셀프 정렬

주문하다

이 속성은 플렉스 항목이 표시되는 순서를 지정합니다. 기본적으로 항목은 소스 코드에 작성된 순서대로 표시되지만 이 속성을 사용하면 항목의 순서를 변경할 수 있습니다.

.one{
 order: 4
}

플렉스 성장

이 속성은 사용 가능한 공간에 맞게 항목이 늘어나거나 확장되어야 하는 정도를 지정합니다. 항목에 flex-grow 값을 2로 지정하면 해당 항목은 컨테이너의 다른 요소보다 두 배의 공간을 차지합니다.

.one{
 flex-grow:2
}

플렉스 수축

이 속성은 flex-grow와 달리 항목이 사용 가능한 공간에 맞게 축소되는 정도를 지정합니다.

.one{
 flex-shrink: 5
}

이 이미지에서 볼 수 있듯이 첫 번째 항목은 나머지 항목보다 훨씬 작습니다.

플렉스 기반

이 속성은 컨테이너의 공간이 분산되기 전에 항목의 초기 또는 기본값을 지정합니다.

.one{
 flex-basis: 10rem;
}

몸을 풀다

이것은 flex-grow, flex-shrink 및 flex-basis 속성의 속기 속성입니다.

.one{
 flex: 0 0 10rem;
}

첫 번째 요소는 커지거나 줄어들지 않으며 초기 길이는 10rem입니다.

자기 정렬

이 속성은 align-items처럼 작동하지만 전체 컨테이너가 아닌 하나의 항목에만 적용됩니다.

.one{
 align-self: flex-start;
}

그게 다야! 이것으로 초보자를 위한 CSS flexbox에 대한 미니 시리즈를 마칩니다. Flexbox를 더 잘 이해하는 데 도움이 되었기를 바랍니다. 질문이나 의견이 있으시면 아래에 작성하십시오.