問題タブ [equal-heights]

長い投稿全体で、多数のサイドバー ブロックを均等に配置したいと考えています。

これを実現するために、サイドバー内で Flexbox を使用して、ブロックの間隔を均等に処理しています。これは完全に機能します。

コードペン: http://codepen.io/jameswilson/pen/yyOLaz?editors=110

更新: 有効な解決策が見つかりました。詳細については、以下の Slawa Eremkin の回答を参照してください。

作業コード ペン: http://codepen.io/jameswilson/pen/xbVVLL?editors=110

Flexbox で標準の Equal Height 列手順を使用して同じ列の高さを設定しようとすると、Chrome ではなく Firefox でのみ機能します。

Chrome で思いつく唯一の回避策は、同じ高さの JavaScript フォールバックを使用して、サイドバー コンテナーの高さをメイン列の高さに一致する固定ピクセルの高さに手動で設定することです。

Chromeでこれを機能させるために欠けている魔法はありますか?

注: HTML 構造を変更する余裕はないので、理想的な解決策は、Codepen で提供される構造に基づく CSS のみです。

HTML:

そしてSCSS：

display: table-cellCSS の「等高列」、「Holy Grail」レイアウト、巧妙な実装、そしてもちろんいくつかのおいしいdisplay: flexアイデアの例がたくさんあります。SO には特にそうです。

しかし、私は他のどこにも見つけることができず、むしろ避けたいJSに頼らなければ達成できなかったことを達成しようとしています。

カード間で高さを共有する子要素のセットを持つ、同じ高さの親コンテナーのセットを作成しようとしています。各カードは、ガターによって隣接する他のカードから分離されています。どうやら私は新人なので画像を投稿できないようですが、視覚的に説明する方がはるかに簡単です。無料の画像ホスティング サイトへのリンクは次のとおりです: http://postimg.org/image/ltcd8ns1l/

画像には、3 つのカード (1、2、3) があり、それぞれに 3 つのセクション (1a、1b、1c、2a、2b、2c、3a、3b、3c) があります。カード内の各セクションは、他のカードの同等のセクションと同じ高さです (つまり、1b = 2b = 3b、1c = 2c = 3c など)。同等の各セクション (例: 1b、2b & 3b) の高さは、それらのセクションの中で最も高いセクション (つまり、最も高い「b」) の高さによって決まります。最も高いセクションの高さは、このセクション内のコンテンツの量によって決まります。

カード間のガター用の個別の「テーブルセル」要素を含む方法を使用して、これを視覚的に達成できましたdisplay: tableが、残念ながら、マークアップは無秩序で意味がありません。次のようなものです。

...最悪。

だから私も何かを動かすことができましたdisplay: flex。CodePen の簡単なデモを次に示します: http://codepen.io/anon/pen/xbXWpQ

後世のために、HTML は次のとおりです。

そしてSCSS：

flex正しい順序であり、無意味な要素が含まれていないため、私は HTML を使用する方がはるかに好きです。

しかし、それだけでは十分ではありません。各カードを独自の要素内にラップできるようにしたいのです。<article>...</article>. 部分的にはカード全体をリンクにすることができますが、私の目には、これにより、より明確で適切に分離されたマークアップが提供されるからです。しかし、そうはいきflexませんので、大変です。

私は何年もの間いじりましたが、JS または厄介な HTML を使用せずにこれを行う方法がわかりません。どちらも私は避けたいと思います。

そのようなことを達成する方法についてのアイデアはありますか?

私はこのウェブからのものと同様の効果を達成しようとしています: http://planilandia.com/index(en).html

ビデオを見てください - それらは画面の 50% であり、それらの間に境界線、マージン、またはパディングはありません。私はそれを達成しようとしましたが、成功しませんでした。これは私のフィドルです：

http://jsfiddle.net/uceder23/3/

私は何を間違っていますか？

これはコードです：

そしてCSS：

ありがとう

たとえば、2 列のレイアウト (メイン コンテンツとサイド) がある場合、メインを左に、サイドを左/右にフロートさせてから、フレックスボックスを使用してサイドにメイン コンテンツと同じ高さを与えることはできますか?

ヘッダー、メイン コンテンツ、サイド、フッターを含めるために、コンテナー全体をフレックスボックスに表示する必要がありますか?それとも、フレックスボックスを使用する領域を 1 つだけ選択することはできますか?