フレックスボックスの新機能ですので、私にご負担ください。私のHTMLは：フレックスボックス：3桁、2桁
：
<div class="container">
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
</div>
フレキシボックスで、私は次のようなレイアウトを実現しようとしています。
コンテナの高さを設定せずにこれを実現できる最も簡単な方法はどれですか。？ .oneの高さが変わることが予想されます。
これは、flex-directionをcolumnに設定することで実現できます。
要求に応じて、2番目のdivの幅は静的です。他の2つのdivにはcalcを使用しています。
.container {
display: flex;
flex-wrap: wrap;
flex-direction: column;
height: 100px;
}
.one,
.three {
flex: 0 0 50%;
background: cyan;
width: calc(100% - 100px);
}
.two {
flex: 0 0 100%;
order: 1;
background: moccasin;
width: 100px;
}
.three {
background: tomato;
}<div class="container">
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
</div>EDIT ....後期答えは、IIはアプローチが、それは私はそれが非常に似て考えても、という他とは少し違って見えるので、それを残して..しかし、方法についてではない多くの選択肢フレックスが動作しています:)
heightを親コンテナと最初の列の子に設定する必要があります。 orderはコンテナの流れを整理する。
codepen to check behavior and how it breaks while windows is reduced or content increased
.one {
background: #A1EB88;
}
.two {
background: #E7AAF6
}
.three {
background: #F7F467
}
.container {
display: flex;
flex-direction: column;
flex-wrap: wrap;
height: 50vh;/* height is needed to force wrapping */
}
.one,
.three {
order: -1;/* bring them in front of other(s) */
height: 50%;/* share the height (if three of them, then put it down to 33.33% to share evenly height avalaible) */
}
.two {
flex: 1;/* equals height:100%; it will fill entire height */
width: 200px;/* here your fixed width */
}<h1>test it also in full page mode </h1>
<div class="container">
<div class="one">one</div>
<div class="two">two</div>
<div class="three">three</div>
</div>
コンテナの高さを設定せずにこれを実行することが可能ですか？ .oneと.threeの両方が高さが変わります。 – Leah