web-dev-qa-db-fra.com

Disposition des boîtes flexibles CSS: rangée et colonnes pleine largeur

Bonjour chers programmeurs!

J'ai une mise en page de boîte simple que j'aimerais beaucoup utiliser avec flexbox, mais je ne peux tout simplement pas le comprendre. Cela devrait ressembler à cette image.

enter image description here

Donc, fondamentalement, une ligne et deux colonnes, la ligne étant fixée à 100px en hauteur, mais le tout dans un conteneur. Mon code jusqu'ici est:

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

Je sais que cela peut être réalisé à bien des égards, mais je préférerais vraiment utiliser CSS Flex.

csslayoutflexbox
26
Androvich

Vous avez presque fini. Cependant, définir flex: 0 0 <basis> déclaration sur les colonnes les empêcherait de croître/réduire; Et le paramètre <basis> définirait la largeur des colonnes.

De plus, vous pouvez utiliser CSS3 calc() expression pour spécifier la height des colonnes en respectant la hauteur de l’en-tête.

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

(Préfixes de fournisseurs omis en raison de la brièveté)

Sinon, si vous pouviez changer votre marge, par exemple En enveloppant les colonnes avec un élément <div> supplémentaire, cela serait réalisé sans utiliser calc() comme suit:

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

(Préfixes de fournisseurs omis en raison de la brièveté)

46
Hashem Qolami

Ceci est copié d’en haut, mais légèrement condensé et réécrit en termes sémantiques. Remarque: #Container a display: flex; et flex-direction: column;, tandis que les colonnes ont flex: 3; et flex: 2; (où "Une valeur, nombre sans unité" détermine la propriété flex-grow) par MDN 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

Utilisez simplement un autre conteneur pour envelopper les deux derniers divs . N'oubliez pas d'utiliser les préfixes 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>

0
waLL e