时间戳

首页 > 解决方案 > Flexbox 容器不包括 margin-bottom

css - Flexbox 容器不包括 margin-bottom

问题描述

我刚刚开始学习 flexbox 布局并实现了一个示例，但是当我将 margin 20px 设置为我的 flexbox 容器时卡住了。顶部、左侧和右侧边距按预期工作，但我不知道底部边距没有意外设置。

我已将容器的高度设置为 100%，它采用父级（主体元素）的高度，这也是 100%。

虽然当我将填充设置为 20px 到我的身体并从容器中删除 20px 边距时它工作正常。

只是想知道这种行为。

为什么边距在这里不起作用而不是填充？

*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html,
body {
  background: #011627;
  height: 100%;
}

.container {
  margin: 20px;
  border: solid 2px #f9f871;
}

.container > div:nth-child(odd) {
  padding: 10px;
  background: #ff6a67;
}

.container > div:nth-child(even) {
  padding: 10px;
  background: #007277;
  color: azure;
}

/* overwrite css */
.container {
  display: flex;
  height: 100%;
  align-items: center;
  justify-content: center;
}
 <div class="container">
    <div class="home">Home</div>
    <div class="search">Search</div>
    <div class="view">View</div>
    <div class="logout">Logout</div>
  </div>

标签： cssflexbox

解决方案

box-sizing 属性不包括计算边距：

https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing

box-sizing CSS 属性设置如何计算元素的总宽度和高度。

您可以将边距变成父级的填充

*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html,
body {
  background: #011627;
  height: 100%;
}

body {
  padding: 20px;
}

.container {
  /* margin: 20px; */
  border: solid 2px #f9f871;
}

.container>div:nth-child(odd) {
  padding: 10px;
  background: #ff6a67;
}

.container>div:nth-child(even) {
  padding: 10px;
  background: #007277;
  color: azure;
}


/* overwrite css */

.container {
  display: flex;
  height: 100%;
  align-items: center;
  justify-content: center;
}
<div class="container">
  <div class="home">Home</div>
  <div class="search">Search</div>
  <div class="view">View</div>
  <div class="logout">Logout</div>
</div>

或将其从父级的高度中删除calc()

https://developer.mozilla.org/en-US/docs/Web/CSS/calc()

calc()CSS 函数允许您在指定 CSS 属性值时执行计算。它可以在任何地方使用<length>, <frequency>, <angle>, <time>, <percentage>, <number>，或被<integer>允许。

*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html,
body {
  background: #011627;
  height: 100%;
}

body {
  height:calc( 100% - 40px );
}

.container {
  margin: 20px;
  border: solid 2px #f9f871;
}

.container>div:nth-child(odd) {
  padding: 10px;
  background: #ff6a67;
}

.container>div:nth-child(even) {
  padding: 10px;
  background: #007277;
  color: azure;
}


/* overwrite css */

.container {
  display: flex;
  height: 100%;
  align-items: center;
  justify-content: center;
}
<div class="container">
  <div class="home">Home</div>
  <div class="search">Search</div>
  <div class="view">View</div>
  <div class="logout">Logout</div>
</div>

由于height:100%两者都设置了bodyand html，您将看不到下面的空白区域。你可以给一个高度，body只允许html滚动。

*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html,
body {
  background: #011627;
}

body {
  height:100vh;
}

.container {
  margin: 20px;
  border: solid 2px #f9f871;
}

.container>div:nth-child(odd) {
  padding: 10px;
  background: #ff6a67;
}

.container>div:nth-child(even) {
  padding: 10px;
  background: #007277;
  color: azure;
}


/* overwrite css */

.container {
  display: flex;
  height: 100%;
  align-items: center;
  justify-content: center;
}
<div class="container">
  <div class="home">Home</div>
  <div class="search">Search</div>
  <div class="view">View</div>
  <div class="logout">Logout</div>
</div>

推荐阅读