flex模型：第二行，第一行元素的宽度

Question

我完全不了解flex模型。在此示例中，第一行（第一行和第二行）的元素应显示在一行中：第一个元素200px和第二个元素应具有剩余空间。

	.wrapper {
	  display: flex;
          width: 100%;
	}
	.first {
	  width: 200px;
	  background: red;
	}
	.second {
	  flex: 1;
	  background: blue;
	}
	

<div class="wrapper">
  <div class="first">first left</div>
  <div class="second">first right</div>
</div>

现在我想添加第三个元素，它应该放在第二个元素的正下方，宽度和第二个元素相同。所以它不应该有完整页面的100％，而只能显示在第二个元素下面。

<div class="wrapper">
    <div class="first">first left</div>
    <div class="second">first right</div>
    <div class="third">second</div>
</div>

Answer 1

您可以使用calc功能以这种方式执行此操作。

＆＃13;

＆＃13;

.wrapper {
  display: flex;
  display: -webkit-flex;
  width: 100%;
  flex-flow: row wrap;
  -webkit-flex-flow: row wrap;
  justify-content: flex-end;
}

.first {
  width: 200px;
  background: red;
}

.second {
  width: calc(100% - 200px);
  background: blue;
}

.third {
  background: yellow;
  width: calc(100% - 200px);
}

＆＃13;

<div class="wrapper">
  <div class="first">first left</div>
  <div class="second">first right</div>
  <div class="third">second right</div>
</div>

＆＃13;

＆＃13;

＆＃13;