Flexbox 定位和背景答案

【问题标题】：Flexbox positioning and backgroundFlexbox 定位和背景
【发布时间】：2021-04-18 03:09:19
【问题描述】：

我刚刚开始使用 flexbox，我尝试将具有背景的 span 元素水平和垂直居中，唯一的问题是当我给 span 一个 display: flex;和高度：100%，背景遍布整个网站，看起来像这样。

是否可以去掉覆盖整个网站的绿色背景，只在使用 flexbox 时让它覆盖文本？提前致谢

.box {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    background: green;
}

html, body {
    height: 100%;
    margin: 0;
}

<!DOCTYPE html>
<html>
<head>
     <meta charset="utf-8">
     <title>Title</title>
     <link rel="stylesheet" href="normalize.css">
     <link rel="stylesheet" href="styles.css">
     <meta name ="viewport" content="width=device-width, initial-scale=1">
</head>

<span class="box">
    TEST
</span>

【问题讨论】：

如果你只想覆盖文本，我建议你使用 inline-block（如果你想添加填充，改变宽度）或者只是 inline 而不是 flex

标签： html css flexbox

【解决方案1】：

您的代码的问题在于您为span 标记设置了基本的flex 规则。这是不对的！我建议您将span 包装在一个额外的容器中，并将此容器设置为从span 传输所有flex 规则。但是要离开span 只剩下background: green。

如果您有任何问题，请告诉我。我会很高兴地回答你。

html, body {
    height: 100%;
    margin: 0;
}

.main {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;   
}

.box {
    background: green;
}

<!DOCTYPE html>
<html>
<head>
     <meta charset="utf-8">
     <title>Title</title>
     <link rel="stylesheet" href="normalize.css">
     <link rel="stylesheet" href="styles.css">
     <meta name ="viewport" content="width=device-width, initial-scale=1">
</head>

<div class="main">
  <span class="box">
      TEST
  </span>
</div>

【讨论】：

【解决方案2】：

你的身体有height: 100%;，这就是为什么你的flexbox容器.box也得到这个高度，因为你再次将.box高度设置为100%。所以你的.box flex 容器在设置height 100% 时采用它的父母height，即body。

.box {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%; /* This height is w.r.t parent which is body */
    background: green;
}

.box {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 50%; /* You need to set this as per your requirement */
    background: green;
}

html, body {
    height: 100%;
    margin: 0;
}

<!DOCTYPE html>
<html>
<head>
     <meta charset="utf-8">
     <title>Title</title>
     <link rel="stylesheet" href="normalize.css">
     <link rel="stylesheet" href="styles.css">
     <meta name ="viewport" content="width=device-width, initial-scale=1">
</head>

<span class="box">
    TEST
</span>

【讨论】：