CSS3でのFlexboxダイスレイアウトの実装と問題点の解説

この記事は、基本的な属性の使用法に慣れ、サイコロのセットの各面の作成を完了することだけを目的としています。次のコンテンツでは、古いバージョンの構文、ベンダー プレフィックス、ブラウザの癖など、フレックスボックスに関するいくつかの難しい問題については説明しません。

1. 最初の面
サイコロには 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 を参照してください。フレックスボックスを使用すると、2 行の属性を垂直方向に中央揃えすることができます。 2. 2 番目の面

.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-self 属性。この属性を使用すると、軸を横切る方向に沿ってフレックス項目をより簡単に制御し、さまざまなレイアウトを設定できます。 align-self の使用方法については、こちらの align-self を参照してください。

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

この顔は 2 番目の顔と同じ属性を使用するため、再度説明しません。

4. 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">   
  <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-direction が使用されており、文字通りの意味から、フレックスの方向、つまり列または行のレイアウトを制御するために使用されていることがわかります。この属性のより詳細な使用法は、flex-direction の背後にある第 5 面と第 6 面を参照できます

。前のレイアウトのアイデアによれば、それは非常に簡単なので、詳細は説明しません。

これを書いて考えてみると、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">   
  <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-grow、flex-shrink、および flex-basis の 3 つの属性が使用されます。

1. flex-grow: 必要に応じて flex アイテムの拡張機能を定義するために使用されます。単位のない値を比率として受け入れます。これは主に、スケーラブル コンテナーの残りのスペースに比例して拡張するスペースの量を決定するために使用されます。

すべてのフレックス項目の「flex-grow」が「1」に設定されている場合、各フレックス項目は同じサイズの残りのスペースに設定されます。いずれかのフレックス項目の「flex-grow」値を「2」に設定すると、このフレックス項目が占める残りのスペースは、他のフレックス項目が占める残りのスペースの 2 倍になります。負の値は無効です。
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">   
  <div class="column">One Half</div>   
  <div class="column">One Third</div>   
  <div class="column">One Seventh</div>   
</section>

ここにフレックスベースの値を計算する式があるはずです。この式があれば、事前に実装できます。 Sass などの処理言語ではカラムアダプティブレイアウトが便利です。

CSS3 Flexbox サイコロ レイアウトの実装と問題の説明に関連するその他の記事については、PHP 中国語 Web サイトに注目してください。