Html 使用CSS flex将div一个放在另一个下面

我正在学习CSS flex。我的HTML代码如下所示

.box{
显示器：flex；
调整项目：灵活启动；
高度：200px；
}
.box>*：第一个孩子{
自我调整：伸展；
}
.box。已选定{
自对准：居中；
}

一个
两个
三
四

只需将您的

自对齐

设置为

柔性端

。这是使用flexbox可以做到的最好的方法，因为在这种情况下网格更好。您可能需要调整

.box

.box{
显示器：flex；
调整项目：灵活启动；
高度：120px；
}
.box>*{
填充：10px；
边框：2倍纯红；
}
.box>*：第一个孩子{
自我调整：伸展；
}
.box。已选定{
自对准：居中；
}
.box>*：最后一个孩子{
自对准：柔性端；
}

一个
两个
三
四

只需将您的

自对齐

设置为

柔性端

。这是使用flexbox可以做到的最好的方法，因为在这种情况下网格更好。您可能需要调整

.box

.box{
显示器：flex；
调整项目：灵活启动；
高度：120px；
}
.box>*{
填充：10px；
边框：2倍纯红；
}
.box>*：第一个孩子{
自我调整：伸展；
}
.box。已选定{
自对准：居中；
}
.box>*：最后一个孩子{
自对准：柔性端；
}

一个
两个
三
四

Flexbox可用于父容器和直接子容器。一旦超出直接子对象，就需要创建一个新的flexbox（即嵌套的flexbox）

要使此解决方案非常简单，只需将div 2、3、4放入一个div中。这样，父级（

.box

）将有两个直接子div并排排列。然后，新的右侧容器将有3个子div，它可以设置垂直堆叠的样式（使用flex）。（一个div可以同时是子flex容器和父flex容器——请参见div

.rside

，以及类为

centerVertHoriz

）的每个div）

.box{
显示器：flex；
宽度：300px；
最小高度：300px；
}
阿尔塞德先生{
显示器：flex；
弯曲方向：立柱；
}
/*仅用于外观*/
半导体激光器{
填充：10px；
最小高度：200px；
背景：小麦；
}
罗赛德分区{
填充：10px；
最小高度：90px；
边框：1px实心#ccc；
}
/*在每个div中居中显示文本*/
.centerVertHoriz{
显示器：flex；
对齐项目：居中；
证明内容：中心；
}

一个
两个
三
四

Flexbox可用于父容器和直接子容器。一旦超出直接子对象，就需要创建一个新的flexbox（即嵌套的flexbox）

要使此解决方案非常简单，只需将div 2、3、4放入一个div中。这样，父级（

.box

）将有两个直接子div并排排列。然后，新的右侧容器将有3个子div，它可以设置垂直堆叠的样式（使用flex）。（一个div可以同时是子flex容器和父flex容器——请参见div

.rside

，以及类为

centerVertHoriz

）的每个div）

.box{
显示器：flex；
宽度：300px；
最小高度：300px；
}
阿尔塞德先生{
显示器：flex；
弯曲方向：立柱；
}
/*仅用于外观*/
半导体激光器{
填充：10px；
最小高度：200px；
背景：小麦；
}
罗赛德分区{
填充：10px；
最小高度：90px；
边框：1px实心#ccc；
}
/*在每个div中居中显示文本*/
.centerVertHoriz{
显示器：flex；
对齐项目：居中；
证明内容：中心；
}

一个
两个
三
四

自对齐：结束

或

页边距顶部：自动

，应该这样做；）你需要使用flex吗？使用css gridThreak@arieljuod更容易实现。你能给我举几个例子吗？谢谢。我不知道这是你想要的（我想你有更多的要求）

align self:end

或

margin top:auto

，应该这样做；）你需要使用flex吗？使用css gridThreak@arieljuod更容易实现。你能给我举几个例子吗？谢谢。我不知道这是你想要的（我想你有更多的要求）谢谢@corn on the cob。你的解决方案不起作用。谢谢。第一个有效，但第二个不行。还在做那件事，你明白我的问题了吗<代码>一个和

两个

将并排放置<代码>三个将位于

两个

的正下方<代码>四个将在

三个

的下方。这就是我的帖子中发生的事情，不是吗？不。我需要将

三个

放在

二个

的下方<代码>四个在<代码>三个下。谢谢，谢谢。你的解决方案不起作用。谢谢。第一个有效，但第二个不行。还在做那件事，你明白我的问题了吗<代码>一个和

两个

将并排放置<代码>三个将位于

两个

的正下方<代码>四个将在

三个

的下方。这就是我的帖子中发生的事情，不是吗？不。我需要将

三个

放在

二个

的下方<代码>四个在<代码>三个下。谢谢