web-dev-qa-db-ja.com

CSS Flex Box Layout：全幅の行と列

仲間のプログラマーの皆さん、こんにちは！

Flexboxを使用して達成したいシンプルなボックスレイアウトがありますが、それを理解することはできません。この画像のように見えるはずです。

enter image description here

したがって、基本的に1行と2列で、行の高さは100pxに固定されていますが、すべて1つのコンテナに収まっています。これまでの私のコードは次のとおりです。

#productShowcaseContainer {
  display: inline-flex;
  flex-flow: row wrap;
  height: 600px;
  width: 580px;
  background-color: rgb(240, 240, 240);
}

#productShowcaseTitle {
  display: inline-block;
  height: 100px;
  width: 100%;
  background-color: rgb(200, 200, 200);
}

#productShowcaseDetail {
  flex: 3;
  background-color: red;
}

#productShowcaseThumbnailContainer {
  flex: 2;
  background-color: blue;
}
<div id="productShowcaseContainer">
  <div id="productShowcaseTitle"></div>
  <div id="productShowcaseDetail"></div>
  <div id="productShowcaseThumbnailContainer"></div>
</div>

これはさまざまな方法で実現できることはわかっていますが、CSS Flexを使用することを本当に望んでいます。

csslayoutflexbox
36
Androvich

ほぼ完了しました。ただし、 flex: 0 0 <basis> 宣言を列に設定すると、列の成長/縮小が防止されます。そして、 <basis> パラメーターは列の幅を定義します。

さらに、CSS3 calc() expressionを使用して、ヘッダーの高さに関して列のheightを指定できます。

#productShowcaseTitle {
  flex: 0 0 100%; /* Let it fill the entire space horizontally */
  height: 100px;
}

#productShowcaseDetail,
#productShowcaseThumbnailContainer {
  height: calc(100% - 100px); /* excluding the height of the header */
}

#productShowcaseContainer {
  display: flex;
  flex-flow: row wrap;

  height: 600px;
  width: 580px;
}

#productShowcaseTitle {
  flex: 0 0 100%; /* Let it fill the entire space horizontally */
  height: 100px;
  background-color: silver;
}

#productShowcaseDetail {
  flex: 0 0 66%; /* ~ 2 * 33.33% */
  height: calc(100% - 100px); /* excluding the height of the header */
  background-color: lightgray;
}

#productShowcaseThumbnailContainer {
  flex: 0 0 34%;  /* ~ 33.33% */
  height: calc(100% - 100px); /* excluding the height of the header */
  background-color: black;
}
<div id="productShowcaseContainer">
  <div id="productShowcaseTitle"></div>
  <div id="productShowcaseDetail"></div>
  <div id="productShowcaseThumbnailContainer"></div>
</div>

（簡潔にするためにベンダーのプレフィックスは省略されています）

または、マークアップを変更できる場合は、追加の<div>要素で列をラップすると、次のようにcalc()を使用せずに達成できます。

<div class="contentContainer"> <!-- Added wrapper -->
    <div id="productShowcaseDetail"></div>
    <div id="productShowcaseThumbnailContainer"></div>
</div>

#productShowcaseContainer {
  display: flex;
  flex-direction: column;
  height: 600px; width: 580px;
}

.contentContainer { display: flex; flex: 1; }
#productShowcaseDetail { flex: 3; }
#productShowcaseThumbnailContainer { flex: 2; }

#productShowcaseContainer {
  display: flex;
  flex-direction: column;

  height: 600px;
  width: 580px;
}

.contentContainer {
  display: flex;
  flex: 1;
}

#productShowcaseTitle {
  height: 100px;
  background-color: silver;
}

#productShowcaseDetail {
  flex: 3;
  background-color: lightgray;
}

#productShowcaseThumbnailContainer {
  flex: 2;
  background-color: black;
}
<div id="productShowcaseContainer">
  <div id="productShowcaseTitle"></div>

  <div class="contentContainer"> <!-- Added wrapper -->
    <div id="productShowcaseDetail"></div>
    <div id="productShowcaseThumbnailContainer"></div>
  </div>
</div>

（簡潔にするためにベンダーのプレフィックスは省略されています）

56
Hashem Qolami

別のコンテナを使用して、最後の2つのdivをラップするだけです。 CSSプレフィックスを使用することを忘れないでください。

#productShowcaseContainer {
   display: flex;
   flex-direction: column;
   height: 600px;
   width: 580px;
   background-color: rgb(240, 240, 240);
}

#productShowcaseTitle {
   height: 100px;
   background-color: rgb(200, 200, 200);
}

#anotherContainer{
   display: flex;
   height: 100%;
}

#productShowcaseDetail {
   background-color: red;
   flex: 4;
}

#productShowcaseThumbnailContainer {
   background-color: blue;
   flex: 1;
}
<div id="productShowcaseContainer">
   <div id="productShowcaseTitle">1</div>
   <div id="anotherContainer">
      <div id="productShowcaseDetail">2</div>
      <div id="productShowcaseThumbnailContainer">3</div>
   </div>
</div>
1
waLL e

これは上からコピーされますが、わずかに凝縮され、セマンティック用語で書き直されます。注：#Containerにはdisplay: flex;およびflex-direction: column;がありますが、列にはflex: 3;およびflex: 2;（「1つの値、単位のない数値」がflex-growプロパティを決定します）ごとにflexdocs があります。

#Container {
  display: flex;
  flex-direction: column;
  height: 600px;
  width: 580px;
}

.Content {
  display: flex;
  flex: 1;
}

#Detail {
  flex: 3;
  background-color: Lime;
}

#ThumbnailContainer {
  flex: 2;
  background-color: black;
}
<div id="Container">
  <div class="Content">
    <div id="Detail"></div>
    <div id="ThumbnailContainer"></div>
  </div>
</div>
0
DeBraid