web-dev-qa-db-de.com

CSS Flex Box Layout: Zeile und Spalten in voller Breite

Hallo Programmierer!

Ich habe ein einfaches Box-Layout, das ich gerne mit Flexbox erreichen würde, aber ich kann es einfach nicht verstehen. Es sollte so aussehen wie dieses Bild.

enter image description here

Also im Grunde eine Reihe und zwei Spalten, wobei die Reihe auf fest eingestellt ist, sagen wir 100px in der Höhe, aber alle in einem Container. Mein Code ist bisher:

#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>

Ich weiß, dass dies auf viele Arten erreicht werden kann, aber ich würde CSS Flex am liebsten verwenden.

26
Androvich

Du hast es fast geschafft. Wenn Sie jedoch die Deklaration flex: 0 0 <basis> auf die Spalten setzen, können sie nicht wachsen/schrumpfen. Der Parameter <basis> würde die Spaltenbreite definieren.

Außerdem können Sie CSS3 calc() expression verwenden, um die height von Spalten in Bezug auf die Kopfhöhe anzugeben.

#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>

(Herstellerpräfixe wurden aus Gründen der Kürze weggelassen)


Wenn Sie Ihre Markierung ändern möchten, z. Wenn Sie die Spalten mit einem zusätzlichen <div>-Element umschließen, können Sie calc() wie folgt verwenden:

<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>

(Herstellerpräfixe wurden aus Gründen der Kürze weggelassen)

46
Hashem Qolami

Dies wird von oben kopiert, jedoch leicht verdichtet und semantisch neu geschrieben. Hinweis: #Container hat display: flex; und flex-direction: column;, während die Spalten flex: 3; und flex: 2; (wobei "Ein Wert, unitless number" die flex-grow-Eigenschaft bestimmt) pro MDN flexdocs enthalten. 

#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

Verwenden Sie einfach einen anderen Container, um die letzten beiden Divisionen einzuwickeln. __ Vergessen Sie nicht, CSS-Präfixe zu verwenden.

#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>

0
waLL e