4x4 フレックスボックス グリッドを作成しようとしています。4 つのボックスのそれぞれの垂直方向の高さは同じにする必要がありますが、1 行につき 2 つを左から右に積み重ねます。これは可能ですか？
(ブラウザのサイズを 960 から 640 の間で変更して、私の試みを確認してください: http://www.joshuasortino.com/index-newまたは、どのように動作するかを確認してください: http://www.joshuasortino.com/index )
編集: この効果は、2 つのコンテナー (行ごとに 1 つ) を作成することで可能になりますが、1 つのラッパー/コンテナーのみを使用することをお勧めします。
問題を解決できる要素があるようです。残念ながら、現時点では広くサポートされていません。
-webkit-box-lines: multiple;
おそらく、フレックスボックス DIV が複数の行にまたがることを許可します。
あなたの箱に問題はありません。svg 画像が多くの余分な垂直スペースでレンダリングされているため、問題が発生しています。古いバージョンのように、高さ/幅のスタイルを追加するだけです。
これを変える：
<object data="public/images/charts/routine.svg" type="image/svg+xml" class="chart">
これに：
<object data="public/images/charts/routine.svg" type="image/svg+xml" class="chart" style="width: 482px; height: 265px;">
そしてこれを変更します：
<object data="public/images/charts/skills.svg" type="image/svg+xml" class="chart">
これに：
<object data="public/images/charts/skills.svg" type="image/svg+xml" class="chart" style="width: 482px; height: 265px;">
理想的には、スタイルと css を使用してこれらの属性を設定します。デモ用にインライン化しただけです。