如何正确对齐div以适合页面宽度而不会溢出？

Question

好的，所以我在玩flex box，我已经创建了这个简单的div布局，但是显然格式化它们是错误的。 我将div放在顶部的100％，以便您可以比较div的结束位置。

有没有一种方法可以使div对齐以适合页面？

我认为只需添加一些％宽度语句就可以轻松填充页面，但是由于我在div中使用了边距，因此不会累加。请参见下面的codepen here和代码段：

.container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.myBox {
  border: 0.5px solid black;
  margin: 5px;
  padding: 10px;
}

.headerTitle {
  width: 100%;
}

.bottomLeft {
  width: 29%;
}

.bottomRight {
  width: 100%;
}

.wrapBottomRight {
  width: 37%;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

<div class="container">
  <div class="myBox headerTitle">
    <h1> HELLO THERE </h1>
  </div>

  <div class="myBox bottomLeft">
    <h2> Title </h2>
    <p> Some shit </p>
  </div>
  <div class="myBox bottomLeft">
    <h2> Title </h2>
    <p> Some shit </p>
  </div>
  <div class="wrapBottomRight">
    <div class="myBox bottomRight">
      <h2> Title </h2>
      <p> Some shit </p>
    </div>
    <div class="myBox bottomRight">
      <h2> Title </h2>
      <p> Some shit </p>
    </div>
  </div>
</div>

Answer 1

在使用包装Flexbox 时，必须考虑所有与 flex项目相对于Flexbox的宽度有关的因素-因此必须考虑边距和边框：

• 删除默认的body边距
• 使用border-box将padding和border包含在width中
• 对width: calc(33.33% - 10px)和mybox元素使用wrapBottomRight

请参见下面的演示

body {
  margin: 0;
}

* {
  box-sizing: border-box;
}

.container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.myBox {
  width: calc(33.33% - 10px); /* added*/
  border: 0.5px solid black;
  margin: 5px;
  padding: 10px;
}

.headerTitle {
  width: 100%;
}

.bottomLeft {
  /* width: 29%; */
}

.bottomRight {
  width: 100%;
}

.wrapBottomRight {
  width: calc(33.33% - 10px); /* added */
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

<div class="container">
  <div class="myBox headerTitle">
    <h1> HELLO THERE </h1>
  </div>

  <div class="myBox bottomLeft">
    <h2> Title </h2>
    <p> Some shit </p>
  </div>
  <div class="myBox bottomLeft">
    <h2> Title </h2>
    <p> Some shit </p>
  </div>
  <div class="wrapBottomRight">
    <div class="myBox bottomRight">
      <h2> Title </h2>
      <p> Some shit </p>
    </div>
    <div class="myBox bottomRight">
      <h2> Title </h2>
      <p> Some shit </p>
    </div>
  </div>
</div>

Answer 2

因此，您可能需要调整不同div的宽度和高度，但是使用flexbox和justify-content: space-between;可以轻松实现所需的布局。为了实现这一点，我需要再添加一个包装器.bottomContainer并删除flex-wrap: wrap;。检出flex-direction: column:，您需要在其中垂直放置框。

每个人最喜欢的flexbox资源：https://css-tricks.com/snippets/css/a-guide-to-flexbox/

* {
  box-sizing: border-box;
}
.container {
  display: flex;
  flex-direction: column;
  margin: 5px;
}

.bottomContainer {
  display: flex;
  justify-content: space-between;
}

.myBox {
  border: 1px solid black;
  padding: 10px;
}

.headerTitle {
  margin-bottom: 10px;
}

.bottomLeft {
  width: 30%;
}

.bottomRight {
  height: 48%;
}

.wrapBottomRight {
  width: 37%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

<div class="container">
  <div class="myBox headerTitle">
    <h1> HELLO THERE </h1>
  </div>
  
  <div class="bottomContainer">
    <div class="myBox bottomLeft">
      <h2> Title </h2>
      <p> Some shit </p>
    </div>
    <div class="myBox bottomLeft">
      <h2> Title </h2>
      <p> Some shit </p>
    </div>
    <div class="wrapBottomRight">
      <div class="myBox bottomRight">
        <h2> Title </h2>
        <p> Some shit </p>
      </div>
      <div class="myBox bottomRight">
        <h2> Title </h2>
        <p> Some shit </p>
      </div>
    </div>
  </div>  
</div>

Answer 3

希望这会有所帮助！

options = [('grpc.max_reconnect_backoff_ms', 100)] # 100 milliseconds 
channel = grpc.insecure_channel('localhost:50051', options=options)

.container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.myBox {
  border: 0.5px solid black;
  margin: 5px;
  padding: 10px;
  width: 50%
}

.headerTitle {
  width: 100%;
}

.bottomLeft {
  width: 20%;
}

.bottomRight {
  width: 20%;
}

.wrapBottomRight {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  width: 20%;
}

快乐编码！