Html 如何开始使用flex？

我希望我的“p”与中心对齐，“#fname label”得到空间的1/3，“#fname input”得到空间的2/3 下一行也是一样

现在所有的东西都在同一排

我和我的代码：

body，
html{
身高：100%；
保证金：0；
}
/*使边框不占用额外空间的样式*/
* {
-moz框大小：边框框；
-webkit框大小：边框框；
框大小：边框框；
}
html{
溢出y：滚动；
/*修复滚动条推送问题*/
宽度：100%；
身高：100%；
}
身体{
宽度：100%；
身高：100%；
}
/*重新设置浏览器样式，使它们都能很好地发挥作用*/
html，
身体，
分区，
跨度
对象
iframe，
h1，
h2，
h3，
h4，
h5，
h6，
P
块引用，
之前，
缩写，
地址:，
引用，
代码，
德尔，
dfn，
相对长度单位，
img，
ins，
kbd，
Q
桑普，
小的
坚强的
附属的，
啜饮，
var，
B
我
dl，
dt，
dd，
ol,，
ul，
锂，
字段集，
形式，
标签，
传奇
桌子
说明文字
t身体，
特富特，
thead，
tr，
th，
运输署，
时间
做记号
音频
录像带{
字体大小：100%；
保证金：0；
填充：0；
大纲：0无；
垂直对齐：基线；
}
/*现在我们开始编写代码*/
身体{
背景色：#F7FBCC；
}
#头衔{
文本对齐：居中；
字号：40pt；
颜色：#1A1A；
字体系列：“Chivo”，无衬线；
边缘顶端：40px；
边缘底部：40px；
}
.集装箱{
背景色：#fff；
显示器：flex；
柔性流：行换行；
弹性边界半径：8px；
盒影：0px2px8pxRGBA（29,31,32,0.2）；
}
#描述{
颜色：#1A1A；
弹性：1；
证明内容：中心；
填充顶部：16px；
边缘底部：40px；
}
#fname{
显示器：flex；
柔性流：行换行；
边缘顶端：40px；
左边距：40px；
}
#fname标签{
弹性：1；
}
#fname输入{
弹性：2；
}
#邮寄{
显示器：flex；
柔性流：行换行；
边缘顶端：40px；
左边距：40px；
}
#邮件标签{
弹性：1；
}
#电子邮件输入{
弹性：2；
}

音乐调查表格
让我们知道你喜欢哪种音乐

全名：
电邮地址：
-->

首先，似乎您的容器可以是基于列的flex布局，因为您希望所有内容都堆叠起来。将并排出现的唯一项目是标签和输入对，因此您可以调整它们。标记保持原样，您可以对CSS进行以下调整：

.container {
  background-color: #fff;
  display: flex;
  flex-direction: column;
  box-shadow: 0px 2px 8px rgba(29, 31, 32, 0.2);
}

#title {
  text-align: center;
  font-size: 40pt;
  color: #1A1A1A;
  font-family: 'Chivo', sans-serif;
  margin-top: 40px;
  margin-bottom: 40px;
}

#description {
  text-align: center;
  color: #1a1a1a;
  padding-top: 16px;
  margin-bottom: 40px;
}

#fname,
#mail {
  display: flex;
  margin-top: 40px;
  margin-left: 40px; 
 }

#fname label,
#mail label {
  width: 33%;
}

#fname input,
#mail input {
  width: 100%;
}

编辑：添加基于百分比的宽度的替代方案。我之所以选择使用基于百分比的宽度，是因为您要求列的宽度为1/3，而且通常是因为我认为它更具可读性。尽管flex和flex grow的组合效果一样好，但总的来说，我觉得百分比更具可读性和可预测性

#fname label,
#mail label {
  flex: 1;
}

#fname input,
#mail input {
  flex-grow: 2;
}

---

CodePen Fork:

以下是重构后的代码

body {
  background-color: #F7FBCC;
  }


#title {
  text-align: center;
  font-size: 40pt;
  color: #1A1A1A;
  font-family: 'Chivo', sans-serif;
  margin-top: 40px;
  margin-bottom: 40px;
 }

.container {
  width: 100%;
  padding-right: 30px;
  padding-left: 30px;
  margin-right: auto;
  margin-left: auto;
  max-width: 660px;
}


#description {
  color: #1a1a1a;
  padding-top: 16px;
  margin-bottom: 40px;
  text-align: center;
}

#fname, #mail {
  width: 100%;
  margin: 0 auto;
  display: flex;
  margin-bottom: 20px;
}
label {
width:30%;
}
input {
  width: 70%;
}

---

你可以在这里找到解决方案

这是为回答我问题的你们两位准备的。。。非常感谢。我现在明白了如何使这段代码更好。但有一点我不明白，为什么使用宽度：30%而不是flex:1？尽管我两个都试过了，你的方式更好谢谢你接受答案！我在回答的底部添加了一个编辑，以提供我的推理以及使用flexbox属性的替代方案。