firefox - ウィジェットをフローパネルに垂直に追加する

Question

フローパネルにウィジェットを追加したいのですが、垂直に追加します。display:block css を flowpanel に指定し、子ウィジェットには display:inline:block を指定しました。それらは垂直に配置されますが、1 列に配置されます。水平方向の流れのような垂直方向の流れが必要です (まず、フローパネルの幅に達するまで最初の行をいっぱいにして次の行に移動します)。フローパネルの高さに達するまでウィジェットを配置し、到達したら最初の行の次の列にウィジェットを配置したいと考えています。誰かが私がこれから抜け出すのを手伝ってくれる？

Answer 1

2 つの方法でそれを行うことができます。

コードですべての計算を行うことができます。つまり、親コンテナーを測定し、高さを超えるまで子を追加するなどです。これは最適な解決策ではありませんが、古いブラウザーでも機能します。

より良い解決策は、最新のすべてのブラウザーでサポートされているFlexbox レイアウト モデルを使用することです。親を次のように設定します。

display: flex;
flex-direction: column;
flex-wrap: wrap;

次に、子供を追加します。子をそのままにしておきdisplay:blockます。いくつかのルールを追加して、列の空白スペースをどう処理するかをブラウザーに指示することもできます。