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

好吧，我在玩flex box，我已经创建了这个简单的div布局，但是我显然格式化错误了。 我已经把一个div放在100%的顶部，这样你就可以比较div的结束位置

有没有办法将div对齐以适合页面

我认为简单地添加一些%宽度的语句就可以很容易地填充页面，但是因为我在div中使用了边距，所以它没有加起来。请参阅下面的示例和代码片段：

.container{
显示器：flex；
弯曲方向：行；
柔性包装：包装；
}
.我的盒子{
边框：0.5px纯黑；
保证金：5px；
填充：10px；
}
.海德特尔{
宽度：100%；
}
.左下角{
宽度：29%；
}
.右下角{
宽度：100%；
}
.wrapBottomRight{
宽度：37%；
显示器：flex；
弯曲方向：行；
柔性包装：包装；
}

你好
标题
一些狗屎

标题
一些狗屎

标题
一些狗屎

标题
一些狗屎

希望这有帮助

.container{
显示器：flex；
弯曲方向：行；
柔性包装：包装；
}
.我的盒子{
边框：0.5px纯黑；
保证金：5px；
填充：10px；
宽度：50%
}
.海德特尔{
宽度：100%；
}
.左下角{
宽度：20%；
}
.右下角{
宽度：20%；
}
.wrapBottomRight{
显示器：flex；
弯曲方向：行；
柔性包装：包装；
宽度：20%；
}

你好
标题
一些狗屎

标题
一些狗屎

标题
一些狗屎

标题
一些狗屎

使用包装flexbox时，必须考虑与flexbox相关的所有影响flexbox项目宽度的因素，因此必须考虑边距和边框：

• 删除默认的

  body

  margin
• 使用

  边框框

  在

  宽度

• 对

  mybox

  和

  wrapBottomRight

  元素使用

  width:calc（33.33%-10px）

请参见下面的演示：

正文{
保证金：0；
}
* {
框大小：边框框；
}
.集装箱{
显示器：flex；
弯曲方向：行；
柔性包装：包装；
}
.我的盒子{
宽度：计算（33.33%-10px）；/*增加*/
边框：0.5px纯黑；
保证金：5px；
填充：10px；
}
.海德特尔{
宽度：100%；
}
.左下角{
/*宽度：29%*/
}
.右下角{
宽度：100%；
}
.wrapBottomRight{
宽度：计算（33.33%-10px）；/*增加*/
显示器：flex；
弯曲方向：行；
柔性包装：包装；
}

你好
标题
一些狗屎

标题
一些狗屎

标题
一些狗屎

标题
一些狗屎

因此，您可能希望调整不同div的宽度和高度，但使用flexbox和

调整内容：间距。为了实现这一点，我需要再添加一个包装器
.bottomContainer
，并删除
flex wrap:wrap。查看
flex-direction:列：
，其中需要框垂直流动

每个人最喜爱的flexbox资源：


*{
框大小：边框框；
}
.集装箱{
显示器：flex；
弯曲方向：立柱；
保证金：5px；
}
.底部容器{
显示器：flex；
证明内容：之间的空间；
}
.我的盒子{
边框：1px纯黑；
填充：10px；
}
.海德特尔{
边缘底部：10px；
}
.左下角{
宽度：30%；
}
.右下角{
身高：48%；
}
.wrapBottomRight{
宽度：37%；
显示器：flex；
弯曲方向：立柱；
证明内容：之间的空间；
}

你好
标题
一些狗屎

标题
一些狗屎

标题
一些狗屎

标题
一些狗屎