フレックスレイアウトを使用して、最初に垂直に、次に水平方向にブックマークの均等な分布を実現する方法は？

フレックスレイアウトとCSSセレクターを巧みに使用して、最初に垂直に、次に水平方向にブックマークの分布を実現します

ブックマーク管理拡張機能を開発する際には、多数のブックマークを効率的に配置する方法は一般的な課題です。この記事では、フレックスレイアウトとCSSセレクターan b使用する巧妙な方法を紹介し、最初に垂直に、次に水平方向にブックマークの均一な分布を実現し、有限数の列の下で不均一な配置の問題を回避します。

質問：複数のブックマークがあるとします。最初に垂直に、垂直にいっぱいに、次に水平方向に配置する必要があり、最後に均等に配置する必要があります。たとえば、6つのブックマークと5つの列が表示されます。理想的な結果：

<code>一二三四五① ③ ④ ⑤ ⑥ ②</code>

しかし、実際の効果は次のとおりです。

<code>一二三四五① ③ ⑤ ② ④ ⑥</code>

最後のいくつかの列が空白に見えます。既存のレイアウトは、コンテナの高さを調整することで行数を制御するフレックスレイアウト（ flex-direction: column ）を採用し、ブックマークの追加と削除およびショートカットキー操作をサポートします。

解決策：複雑なアルゴリズムは必要ありません。CSSセレクターan bを活用するだけです。ブックマークと列の総数を計算することにより、適切なaとb値を決定し、このセレクターを使用して特定のブックマーク（例： margin-bottom: 1px; ）に底部のマージンを追加します。この方法はシンプルで効率的であり、ショートカットキーの操作に影響し、追加と削除をブックマークします。この方法により、ブックマークの均等な分布を垂直に登録し、次に水平方向に分配し、空白の列を回避できます。

以上がフレックスレイアウトを使用して、最初に垂直に、次に水平方向にブックマークの均等な分布を実現する方法は？の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。