CSS Flex Box Layout: строка и столбцы полной ширины

Привет, коллеги-программисты!

У меня есть простой макет, который я бы хотел использовать с помощью flexbox, но я просто не могу понять это. Он должен выглядеть как этот образ.

Итак, в основном строка и два столбца, причем фиксированная строка имеет длину 100 пикселей в высоту, но все в одном контейнере. До сих пор мой код:

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

Ответ 1

Ты почти сделал это. Однако установка flex: 0 0 <basis> декларации в столбцы помешала бы им увеличиваться/сокращаться; Параметр <basis> будет определять ширину столбцов.

Кроме того, вы можете использовать выражение CSS3 calc(), чтобы указать столбцы 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>

Ответ 2

Это скопировано сверху, но слегка сжато и переписано в семантических терминах. Примечание: #Container имеет display: flex; и flex-direction: column;, а столбцы имеют flex: 3; и flex: 2; (где "Одно значение, единичное число" определяет свойство flex-grow) на MDN flex docs.

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