为什么 div 的宽度不占总宽度的 90%？答案

【问题标题】：why div not taking width of 90% of the total width?为什么 div 的宽度不占总宽度的 90%？
【发布时间】：2020-02-07 12:01:00
【问题描述】：

你能告诉我为什么 div 的宽度不占总宽度的 90% 吗？当我这样写的时候

  width: 90%;
  margin: 0 auto;

它需要宽度，但是当我这样写时它不会

display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;

这是我的代码

https://codesandbox.io/s/bitter-dawn-o6rx2

const Wrapper = styled.div`
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  width: "90%";
  /* // width: 90%;
  margin: 0 auto; */
`;

如何使表格垂直和水平居中

【问题讨论】：

它需要 90% 的宽度，你需要先检查 div 的样式。
我认为您的包含 div 应该首先具有定义的宽度，然后其中的包装器将占用该父 div 的 90% 的宽度。所以尝试先定义容器的宽度，然后再定义它的子容器（ Wrapper ）
你可以像style={{Width: "90%", display: "flex",justifyContent: "center",alignItems: "center", height: "100vh" }}这样使用内联CSS作为对象
如何center form vertically and horizontally
"90%" 应该是 90%

标签： javascript css reactjs flexbox styled-components

【解决方案1】：

你需要把width: "90%";改成width: 90%;

【讨论】：

【解决方案2】：

.testingWidth{
  display:flex;
  flex-basis:100%;
  width:90%;
  max-width:90%;
  min-width:90%;
  margin:0 auto;
  background-color:#CCAACC;
  min-height:10vh;
  padding:0.125em;
}

<div class="testingWidth">
styling with class.

</div>


<div style="display:flex;flex-basis:100%;width:90%;max-width:90%;min-width:90%;margin:0 auto;background-color:#CCC;min-height:10vh;padding:0.125em;">
styling without class.

<p>Do add flex-basis to your styling and check again.</p>
</div>

【讨论】：

【解决方案3】：

样式化 Wrapper 组件的 CSS 应该类似于下面的示例。请注意，在您的示例中，您有大约 90% 的双引号，这是一个无效的 CSS 值。它必须是 90% 没有双引号，因为样式化组件使用常规 CSS 语法。

const Wrapper = styled.div`
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  width: 90%; //<=== here
  margin: 0 auto;
`;

如果您希望表单使用 100% 的包装器，则需要为表单提供 100% 的宽度

const StyledForm = styled.form`
width: 100%;
`

【讨论】：

【解决方案4】：

除了一行之外，您所做的一切都是正确的：

改变这一行

width: "90%";

到这个

width: 90%;

所以你最终的 CSS 将是

const Wrapper = styled.div`
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  width: 90%;
  margin: 0 auto; */
`;

【讨论】：