CSS3에서 Flexbox 주사위 레이아웃 구현 및 문제점 설명

이 글은 기본 속성의 사용법을 숙지하고 주사위 세트의 각 면을 완성하기 위한 것입니다. 다음 콘텐츠에서는 이전 버전 구문, 공급업체 접두사, 브라우저 문제 등과 같은 Flexbox의 더 어려운 문제 중 일부를 다루지 않습니다.

1 First Face
주사위는 6개의 면을 가지고 있으며, 각 면의 점 개수는 면의 값을 나타내며, 첫 번째 면은 가로, 세로 중앙의 점으로 구성됩니다. 구체적인 구현을 살펴보겠습니다.

<section name="01" class="face-01">   
  <span class="dot"></span>   
 </section>   
face-01 {   
display: flex;   
justify-content: center;   
align-items: center;

justify-content 및 align-items 사용에 대해서는 여기 justify-content, align-items를 참조하세요. Flexbox를 사용하면 두 행의 속성을 수직으로 중앙에 배치하면 매우 쉽습니다!

2. Second Face

.face-02 {   
 display: flex;   
 justify-content: space-between;   
}   
.face-02 .dot:nth-of-type(2) {   
 align-self: flex-end;   
}   
  <section name="02" class="face-02">   
   <span class="dot"></span>   
   <span class="dot"></span>   
  </section>

여기에서는 align-items 속성을 사용할 수 없습니다. Flexbox는 align-self 속성을 제공하므로 Flex 항목을 보다 편리하게 제어하여 교차 축 방향을 따라 다양한 레이아웃을 설정할 수 있습니다. align-self 사용법은 여기에서 align-self를 참조하세요.

3. 세 번째 얼굴

rree

이 얼굴은 두 번째 얼굴과 동일한 속성을 사용하므로 다시 설명하지 않습니다.

4. 네 번째 면

.face-03 {   
 display: flex;   
 justify-content: space-between;   
}   
.face-03 .dot:nth-of-type(2) {   
 align-self: center;   
}   
.face-03 .dot:nth-of-type(3) {   
 align-self: flex-end;   
}   
<section name="03" class="face-03">   
 <span class="dot"></span>   
 <span class="dot"></span>   
 <span class="dot"></span>   
</section>

이 예에서는 문자 그대로의 의미에서 알 수 있듯이 방향을 제어하는 ​​데 사용됩니다. flex, 즉 열별 또는 행별 레이아웃 이 속성의 자세한 사용법은 flex-direction 뒤의 Fifth Face 및 Sixth Face

를 참조하세요. 쉬우므로 자세한 내용은 다루지 않겠습니다!

이렇게 작성하면 JS로 작은 주사위 게임을 작성하는 것이 쉬울 것입니다.

5. 1, 2, 3, 4, 6, 12등분 실현

.face-04 {   
 display: flex;   
 justify-content: space-between;   
 flex-direction: column;   
}   
.face-04 .column {   
 display: flex;   
 justify-content: space-between;   
}   
<section name="04" class="face-04">   
  <div class="column">   
    <span class="dot"></span>   
    <span class="dot"></span>   
  </div>   
  <div class="column">   
    <span class="dot"></span>   
    <span class="dot"></span>   
  </div>   
</section>

이 예에서는 flex-grow, flex-shrink, flex가 사용되었습니다. - 세 가지 속성을 기본으로 합니다.
1. flex-grow: 필요에 따라 flex 항목의 확장 기능을 정의하는 데 사용됩니다. 단위가 없는 값을 비율로 받아들입니다. 확장 가능한 컨테이너의 남은 공간에 비례하여 얼마나 많은 공간을 확장해야 하는지 결정하는 데 주로 사용됩니다.
모든 Flex 항목의 "flex-grow"가 "1"로 설정된 경우 각 Flex 항목은 동일한 크기의 남은 공간으로 설정됩니다. Flex 항목 중 하나에 대해 "flex-grow" 값을 "2"로 설정하면 이 Flex 항목이 차지하는 남은 공간은 다른 Flex 항목이 차지하는 남은 공간의 두 배가 됩니다. 음수 값은 유효하지 않습니다.
2. flex-shrink: 필요에 따라 플렉스 항목을 축소하는 기능을 정의하는 데 사용됩니다. 음수 값도 유효하지 않습니다.
3. flex-basis: 스케일링 기준값을 설정하는 데 사용됩니다. 음수 값은 지원되지 않습니다. 0으로 설정하면 콘텐츠 주변의 추가 공간이 고려되지 않습니다. auto로 설정하면 flex-grow 값에 따라 추가 공간이 할당됩니다.

6. 2-3-7 레이아웃 구현

.row {   
  display: flex;   
  box-sizing: border-box;   
}   
  
.column {   
  margin: 10px;   
  flex-grow: 1;   
  flex-shrink: 1;   
  flex-basis: 0;   
  box-sizing: border-box;   
}   
<section class="row">   
  <div class="column">One</div>   
</section>   
<section class="row">   
  <div class="column">One Half</div>   
  <div class="column">One Half</div>   
</section>   
<section class="row">   
  <div class="column">One Third</div>   
  <div class="column">One Third</div>   
  <div class="column">One Third</div>   
</section>   
<section class="row">   
  <div class="column">One Fourth</div>   
  <div class="column">One Fourth</div>   
  <div class="column">One Fourth</div>   
  <div class="column">One Fourth</div>   
</section>   
<section class="row">   
  <div class="column">One Sixth</div>   
  <div class="column">One Sixth</div>   
  <div class="column">One Sixth</div>   
  <div class="column">One Sixth</div>   
  <div class="column">One Sixth</div>   
  <div class="column">One Sixth</div>   
</section>   
<section class="row">   
  <div class="column">One Twelve</div>   
  <div class="column">One Twelve</div>   
  <div class="column">One Twelve</div>   
  <div class="column">One Twelve</div>   
  <div class="column">One Twelve</div>   
  <div class="column">One Twelve</div>   
  <div class="column">One Twelve</div>   
  <div class="column">One Twelve</div>   
  <div class="column">One Twelve</div>   
  <div class="column">One Twelve</div>   
  <div class="column">One Twelve</div>   
  <div class="column">One Twelve</div>   
</section>

여기에 flex-basis 값을 계산하는 공식이 있어야 합니다. , sass , less 및 기타 전처리 언어와 협력하면 다중 열 적응형 레이아웃을 구현하는 데 매우 편리할 것입니다.

CSS3 Flexbox 주사위 레이아웃 구현 및 문제 설명과 관련된 더 많은 기사를 보려면 PHP 중국어 웹사이트를 주목하세요!