Question

我有一个包装器/父div，然后是另外2个div。

我希望第二个div移到父div的右侧，而第一个子div延伸到所有剩余空间。

我正在尝试：

#wrapper {
  display: flex;
  justify-content: flex-start;
}

#wrapper .one {
  flex: 3;
  border: 1px solid red;
}

#wrapper .two {
  flex: 1;
  border: 1px solid red;
}

<div id="wrapper">
  <div class="one">Should stretch</div>
  <div class="two">Should float to the right</div>
</div>

但是。一个没有伸展，它们又是另一个。我需要它们全部内联。

我做错了什么？

Answer 1

我将width中的%用于孩子。

在chrome上运行，希望也能在您的浏览器上运行。

#wrapper {
  display: flex;
}

#wrapper .one {
  display: flex;
  border: 1px solid red;
  width:75%;
}

#wrapper .two {
  display: flex;
  border: 1px solid red;
  width:25%;
}

<!DOCTYPE html>
<html>
<body>
<div id="wrapper">
  <div class="one">Should stretch</div>
  <div class="two">Should float to the right</div>
</div>

</body>
</html>

Flexbox第一div不拉伸也不内联

1 个答案: