집 >웹 프론트엔드 >CSS 튜토리얼 >CSS3 Flexbox 주사위 레이아웃 구현 및 분석

CSS3 Flexbox 주사위 레이아웃 구현 및 분석

不言원래의: 2018-06-14 17:32:552923검색

이 글은 주로 CSS3의 Flexbox 주사위 레이아웃 구현 및 분석을 소개합니다. 이제 이를 여러분과 공유합니다. 도움이 필요한 친구들이 참고할 수 있습니다.

Dice 레이아웃은 이름에서 알 수 있듯이 한 면에 최대 9개 포인트를 배치할 수 있으며 각 측면에 배치된 포인트 수는 정확히 레이아웃의 모델 다이어그램입니다. 여기서는 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를 사용하면 두 행의 속성을 수직으로 중앙에 배치할 수 있습니다.

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 속성을 사용하면 두 지점 모두에 영향을 줍니다. self 속성을 사용하면 교차 축 방향을 따라 플렉스 항목의 다양한 레이아웃을 보다 편리하게 제어할 수 있습니다. align-self 사용법은 여기의 align-self를 참조하세요.

3. 세 번째 얼굴

.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>

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

4. 네 번째 얼굴

.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">   
  <p class="column">   
    <span class="dot"></span>   
    <span class="dot"></span>   
  </p>   
  <p class="column">   
    <span class="dot"></span>   
    <span class="dot"></span>   
  </p>   
</section>

이번 예시에서는 flex-direction을 문자 그대로 사용하면 flex의 방향, 즉 열이나 행의 레이아웃을 제어하는 데 사용되는 것을 알 수 있습니다. 이 속성의 자세한 사용법은 flex-direction

뒤에 있는 Fifth Face와 Sixth Face를 참조하세요. 이전 레이아웃 아이디어에 따르면 매우 쉬우므로 자세히 설명하지 않겠습니다!

이 글을 작성하면서 생각해 보세요. JS를 사용하여 작은 주사위 게임을 작성하는 것은 매우 쉬울 것입니다.

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

.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">   
  <p class="column">One</p>   
</section>   
<section class="row">   
  <p class="column">One Half</p>   
  <p class="column">One Half</p>   
</section>   
<section class="row">   
  <p class="column">One Third</p>   
  <p class="column">One Third</p>   
  <p class="column">One Third</p>   
</section>   
<section class="row">   
  <p class="column">One Fourth</p>   
  <p class="column">One Fourth</p>   
  <p class="column">One Fourth</p>   
  <p class="column">One Fourth</p>   
</section>   
<section class="row">   
  <p class="column">One Sixth</p>   
  <p class="column">One Sixth</p>   
  <p class="column">One Sixth</p>   
  <p class="column">One Sixth</p>   
  <p class="column">One Sixth</p>   
  <p class="column">One Sixth</p>   
</section>   
<section class="row">   
  <p class="column">One Twelve</p>   
  <p class="column">One Twelve</p>   
  <p class="column">One Twelve</p>   
  <p class="column">One Twelve</p>   
  <p class="column">One Twelve</p>   
  <p class="column">One Twelve</p>   
  <p class="column">One Twelve</p>   
  <p class="column">One Twelve</p>   
  <p class="column">One Twelve</p>   
  <p class="column">One Twelve</p>   
  <p class="column">One Twelve</p>   
  <p class="column">One Twelve</p>   
</section>  [object Object]

이 예에서는 flex-grow, flex-shrink 및 flex-basis의 세 가지 속성이 사용됩니다.

1. flex-grow: 필요에 따라 플렉스 항목의 확장 기능을 정의하는 데 사용됩니다. 단위가 없는 값을 비율로 받아들입니다. 확장 가능한 컨테이너의 남은 공간에 비례하여 얼마나 많은 공간을 확장해야 하는지 결정하는 데 주로 사용됩니다.

모든 플렉스 항목의 "flex-grow"가 "1"로 설정되면 각 플렉스 항목은 동일한 크기의 남은 공간으로 설정됩니다. Flex 항목 중 하나에 대해 "flex-grow" 값을 "2"로 설정하면 이 Flex 항목이 차지하는 남은 공간은 다른 Flex 항목이 차지하는 남은 공간의 두 배가 됩니다. 음수 값은 유효하지 않습니다.
2. flex-shrink: 필요에 따라 플렉스 항목을 축소하는 기능을 정의하는 데 사용됩니다. 음수 값도 유효하지 않습니다.
3. flex-basis: 스케일링 기준값을 설정하는 데 사용됩니다. 음수 값은 지원되지 않습니다. 0으로 설정하면 콘텐츠 주변의 추가 공간이 고려되지 않습니다. auto로 설정하면 flex-grow 값에 따라 추가 공간이 할당됩니다.

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

.row237 .column:first-of-type {   
  flex-grow: 2;   
  flex-basis: 5px;   
}   
.row237 .column:nth-of-type(2) {   
  flex-grow: 3;   
  flex-basis: 18px;   
}   
.row237 .column:nth-of-type(3) {   
  flex-grow: 7;   
  flex-basis: 70.5px;   
}   
<section class="row row237">   
  <p class="column">One Half</p>   
  <p class="column">One Third</p>   
  <p class="column">One Seventh</p>   
</section>

여기에 flex-basis 값을 계산하는 공식이 있어야 합니다. 이 공식이 있으면 전처리 언어를 사용하세요. Sass 등 다중 열 적응형 레이아웃을 구현하는 것이 편리할 것입니다.

위 내용은 이 글의 전체 내용입니다. 모든 분들의 학습에 도움이 되었으면 좋겠습니다. 더 많은 관련 내용은 PHP 중국어 홈페이지를 주목해주세요!

CSS3 Flexbox 주사위 레이아웃 구현 및 분석

관련 기사