Question

我应该如何使用flexbox样式化以获得这样的布局？我很犹豫是否使用网格，因为它对IE11的支持有限。我很想能够添加更多或更少的小div，而不是为小div添加更多容器

布局的HTML看起来像这样：Desired Layout image

"System.Data.SqlClient.SqlClientFactory, System.Data, Version=4.0.0.0, Culture=neutral, PublicKeyToken=b77a5c561934e089”

.container {
  display: flex;
}

.large {
  height: 200px width: 150px;
  border: 1px solid black;
}

.small {
  height: 100px;
  width: 150px;
  border: 1px solid black;
}

Answer 1

我为.small的div添加了一个父div，并使用了margin和flex-wrap。但是我建议为您使用网格。

.container {
  display: flex;
}

.large {
  height: 220px;
  width: 150px;
  border: 1px solid black;
  box-sizing:border-box;
  margin:10px;
}

.small_cont {
  width:340px;
  display:flex;
  height:200px;
  flex-wrap:wrap;
}

.small {
  height: 100px;
  width: 150px;
  border: 1px solid black;
  box-sizing:border-box;
  margin:10px;
}

<div class="container">
  <div class="large">1</div>
  <div class="small_cont">
    <div class="small">2</div>
    <div class="small">3</div>
    <div class="small">4</div>
    <div class="small">5</div>
  </div>
</div>

Answer 2

我会在flexbox上使用css-grid，这是一个示例：

指南here，当前规范here

.container {
  display: grid;
  grid-template-columns: 60px 60px 60px 60px 60px;
  grid-template-rows: 30px 30px;
  grid-auto-flow: column;
}
.container div {
  border:1px solid gold;
}
.item-a {
  grid-column: 1;
  grid-row: 1 / 3;
}

<section class="container">
  <div class="item-a">item-a</div>
  <div class="item-b">item-b</div>
  <div class="item-c">item-c</div>
  <div class="item-d">item-d</div>
  <div class="item-e">item-e</div>
</section>

Flexbox的样式布局

2 个答案: