CSS3 Flexbox ダイス レイアウトの実装と分析

この記事では、CSS3 での Flexbox ダイス レイアウトの実装と分析を主に紹介します。これには、必要な友人が参照できるように共有します。片面に配置できるサイコロの数は最大 9 個で、各面に配置される点の数はまさにレイアウトのモデル図です。ここでは、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 番目の面

.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. 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">   
  <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-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">   
  <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 の 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">   
  <p class="column">One Half</p>   
  <p class="column">One Third</p>   
  <p class="column">One Seventh</p>   
</section>

ここにフレックスベースの値を計算する式があるはずです。この式がある場合は、前処理を使用します。 Sass などの言語でマルチカラムアダプティブレイアウトを実装すると便利です。

上記がこの記事の全内容です。その他の関連コンテンツについては、PHP 中国語 Web サイトをご覧ください。

関連する推奨事項:

CSS を使用して DIV レイヤーの表示と非表示を制御する方法

アイコンを使用する CSS による画像処理を支援するフォント

css flex について 柔軟なレイアウト

以上がCSS3 Flexbox ダイス レイアウトの実装と分析の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。