Css 如何调整此长方体元素的宽度？_Css

Css 如何调整此长方体元素的宽度？

css

Css 如何调整此长方体元素的宽度？,css,Css,我使用许多框来显示信息，它们当前的样式如下： .box { display: flex; align-items: center; background: #ffffff; padding: 1rem; border-radius: 4px; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "F

我使用许多框来显示信息，它们当前的样式如下：

.box {
  display: flex;
  align-items: center;
  background: #ffffff;
  padding: 1rem;
  border-radius: 4px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
    Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
  color: #616161;
  border-style: solid;
  border-width: 1px;
}

这会将长方体延伸到整个视口，这很好，因为它通常包含一个长句子。但现在我正在使用以下内容：

<div class="box functions"><span class="material-icons green">emoji_people</span><span>Remember including:
<li>Your name.</li>
<li>Your nationality.</li>
<li>Your place of residence.</li>
<li>Your profession.</li>
<li>Your phone number.</li>
<li>Your email.</li>
</span></div>

emoji\u人们记得包括：
你的名字
你的国籍
你的居住地
你的职业
你的电话号码
你的电子邮件

如果我理解正确，您不希望

.box

flex容器像当前一样占据100%的可用宽度。确保

.box

的宽度适应元素内容的一种方法是使用

注意：

fit content

在Internet Explorer中不受支持，因此使用下面不使用fit content的方法可以确保更好的支持

确保内容在页面上垂直和水平居中。您可以将

主体

（或另一个父容器）设置为flexbox，并指定

最小高度：100vh

，这样内容将以至少100%的视口高度填充，并与

对齐项目：中心

一起沿页面中心的横轴垂直对齐子

.box

容器。要确保

.box

沿主轴水平居中，可以使用

对齐内容：居中

或

边距：0自动

来利用自动边距

.parent{
显示器：flex；
对齐项目：居中；
证明内容：中心；
最小高度：100vh；
}
.盒子{
显示器：flex；
对齐项目：居中；
背景：#ffffff；
/*宽度：适合内容；主体（或父项）为柔性容器时不需要*/
填充：1rem；
边界半径：4px；
字体系列：-苹果系统、BlinkMacSystemFont、“Segoe UI”、机器人、氧气、Ubuntu、Cantarell、“Fira Sans”、“Droid Sans”、“Helvetica Neue”、无衬线；
颜色：#6161；
边框样式：实心；
边框宽度：1px；
}


表情符号人们记得包括：

你的名字
你的国籍
你的居住地
你的职业
你的电话号码
你的电子邮件