Question

我试图制作2个全宽的div和2个半宽的布局（最后2个div应该在一行中）。

HTML如下所示：

<div class="container">
    <div class="box--full">1</div>
    <div class="box--full">2</div>
    <div class="box--half">3</div>
    <div class="box--half">4</div>
</div>

CSS：

* {
    box-sizing: border-box;
}

.container {
    display: flex;
    width: 200px;
    flex-flow: row wrap;
}

[class*="box--"] {
    display: flex;
    margin: .25rem;
    height: 2rem;
    padding: .25rem;
    color: white;
}

.box--full {
    background: red;
    flex: 1 1 100%;
}

.box--half {    
    background: blue;
    flex: 1 1 50%;
}

我想知道为什么最后两个div没有可用宽度的一半，为什么它们不在一行中。我想避免为最后2个div添加一个包装器。

我发现添加flex: 0 1 50%会将所需的宽度应用于最后2个div，但它们仍然不是内联的。

是否可以在不制作额外包装的情况下使它们内联？

这是指向codepen的链接：http://codepen.io/sunpietro/pen/Mepmam

Answer 1

它们不在同一行，因为它们确实有margin，margins占用一点空间，所以你必须减少百分比：

＆＃13;

* {
    box-sizing: border-box;
}

.container {
    display: flex;
    width: 200px;
    flex-flow: row wrap;
}

[class*="box--"] {
    display: flex;
    margin: .25rem;
    height: 2rem;
    padding: .25rem;
    color: white;
}

.box--full {
    background: red;
    flex: 1 1 100%;
}

.box--half {    
    background: blue;
    flex: 1 1 30%;
}

＆＃13;

<div class="container">
    <div class="box--full">1</div>
    <div class="box--full">2</div>
    <div class="box--half">3</div>
    <div class="box--half">4</div>
</div>

＆＃13;

Answer 2

这是因为每个.25rem都有.box页边距，所以您可以使用的calc(50% - .50rem)等于50% - margin on both sides of box

* {
  box-sizing: border-box;
}
.container {
  display: flex;
  width: 200px;
  flex-flow: row wrap;
}
[class*="box--"] {
  display: flex;
  margin: .25rem;
  height: 2rem;
  padding: .25rem;
  color: white;
}
.box--full {
  background: red;
  flex: 1 1 100%;
}
.box--half {
  background: blue;
  flex: 1 1 calc(50% - .50rem);
}

<div class="container">
  <div class="box--full">1</div>
  <div class="box--full">2</div>
  <div class="box--half">3</div>
  <div class="box--half">4</div>
</div>

注意：box-sizing: border-box将填充和边框保持在元素的宽度内，而不是边距。

此外，如果您希望box--half保持50%而不是拉伸到最大宽度，则可以使用flex: 0 0 calc(50% - .50rem)。

* {
  box-sizing: border-box;
}
.container {
  display: flex;
  width: 200px;
  flex-flow: row wrap;
}
[class*="box--"] {
  display: flex;
  margin: .25rem;
  height: 2rem;
  padding: .25rem;
  color: white;
}
.box--full {
  background: red;
  flex: 1 1 100%;
}
.box--half {
  background: blue;
  flex: 0 0 calc(50% - .50rem);
}

<div class="container">
  <div class="box--full">1</div>
  <div class="box--full">2</div>
  <div class="box--half">3</div>
  <div class="box--half">4</div>
  <div class="box--half">4</div>
</div>

Answer 3

<div class="container">
<div class="box full">1</div>
<div class="box full">2</div>
<div class="box half">3</div>
<div class="box half">4</div>

* {
    box-sizing: border-box;
}

.container {
    display: flex;
    width: 200px;
    flex-flow: row wrap;
}

.box {
    display: flex;
    margin: .25rem;
    height: 2rem;
    padding: .25rem;
    color: white;
}

.full {
    background: red;
    flex: 2 100%;
}

.half {    
    background: blue;
    flex: 1;
}

它有效，并且还使用两个类使您的代码看起来更清晰

使用flexbox对齐div。 2 divs全宽和2 divs内联宽度的一半

3 个答案: