Html Flexbox和CSS问题：未按预期显示
我的flex-container1和2按照我的意愿工作，并且布局正确。。。。 但是对于flex-container3，它并没有像我所希望的那样显示出来 这就是我想要的： 但是如果你运行我的代码，它就不能正确显示Html Flexbox和CSS问题：未按预期显示,html,css,flexbox,Html,Css,Flexbox,我的flex-container1和2按照我的意愿工作，并且布局正确。。。。 但是对于flex-container3，它并没有像我所希望的那样显示出来 这就是我想要的： 但是如果你运行我的代码，它就不能正确显示 body， html{ 显示器：flex； 高度：100vh； 最小高度：100vh； 弯曲方向：立柱； //溢出：隐藏； 保证金：0； 填充：0； } img{ 右边距：10px； 边缘底部：5px； } .noDisplay{ //显示：无； } .flex-container1{
body，
html{
显示器：flex；
高度：100vh；
最小高度：100vh；
弯曲方向：立柱；
//溢出：隐藏；
保证金：0；
填充：0；
}
img{
右边距：10px；
边缘底部：5px；
}
.noDisplay{
//显示：无；
}
.flex-container1{
显示器：flex；
最小高度：5vh；
高度：自动；
}
.flex-container2{
显示器：flex；
高度：自动；
最小高度：70vh；
}
//集装箱3信息
.flex-container3{
显示器：flex；
高度：自动；
最小高度：23vh；
}
#次激励按钮{
自对准：居中；
}
#说书人形象选择{
自对准：居中；
}
#播放按钮{
自对准：居中；
}
#卡德尚{
显示器：flex；
高度：自动；
弹性：5；
证明内容：中心；
边框：纯红；
}
#显示卡Severyone{
显示：无；
高度：自动；
弹性：5；
边框：纯蓝色；
}
#记分牌{
显示器：flex；
弯曲方向：立柱；
弹性：1；
}
#分数头衔{
显示器：flex；
证明内容：中心；
对齐项目：居中；
弹性：1；
}
#得分{
弹性：6；
边框：黑色；
}
.带边框{
边框样式：实心；
边框颜色：红色；
}
.橘子{
边框样式：实心；
边框颜色：橙色；
}
.黑色{
边框样式：实心；
边框颜色：黑色；
}
#网站名称{
显示器：flex；
弹性系数：0.5；
对齐项目：居中；
证明内容：中心；
}
#游戏名称{
显示器：flex；
弹性：1；
对齐项目：居中；
证明内容：中心；
}
#特殊信息{
显示器：flex；
弹性：5；
对齐项目：居中；
证明内容：中心；
}
#出口按钮{
显示器：flex；
弹性：1；
对齐项目：居中；
证明内容：中心；
}
#游戏说明按钮{
显示器：flex；
弹性：1；
对齐项目：居中；
证明内容：中心；
}
#视频聊天{
弹性：5；
}
#聊天{
显示器：flex；
弯曲方向：立柱；
弹性：1；
}
#聊天窗口{
弹性：7；
溢出：自动；
}
#输入区{
显示器：flex；
弹性系数：0.7；
}
#聊天输入{
弹性：1；
}
#chatSubmitButton{}
;
你好塔尔！
聊天！
你好
那里
这是一个很好的起点
您需要稍微更改一下布局
.wrapper{
显示：网格；
栅隙：10px；
网格模板列：[col1 start]200px[col2 start]100px[col2 end]；
网格模板行：[row1开始]自动[row2开始]自动[row2结束]；
背景色：#fff；
颜色：#444；
}
.盒子{
背景色：#444；
颜色：#fff；
边界半径：5px；
填充：20px；
字体大小：150%；
}
.a{
网格列：col1 start/col2 start；
网格行：行1开始；
}
.b{
网格列：col2 start；
网格行：行1开始/行2结束；
}
c{
网格列：col1 start/col2 start；
网格行：第2行开始/第2行结束；
}
A.
B
C
您可以设置flex控件对齐，例如
- 对齐内容-控制主轴上所有项目的对齐
- 对齐项目-控制横轴上所有项目的对齐
- 对齐自我控制面板上单个弹性项目的对齐
横轴
- 对齐内容-规范中描述的“包装柔性线”；
控制横轴上的柔性线之间的间距
你的解决方案是
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<style>
#container{
background: #555;
display: flex;
flex-wrap: wrap;
/* Align Item Horizontal */
justify-content: space-evenly;
/* Align Item Vertical (must be 'height' property) */
height: 600px;
align-items: baseline;
/* Align item vertical where extra space */
align-content: space-between;
}
.item{
background: #f4f4f4;
border: 1px solid #ccc;
text-align: center;
padding: 1rem;
margin: 0.5rem;
/* Same thing " width = flex-basis " */
/* width: 300px; */
flex-basis: 300px;
}
.item-1{
order: 3;
}
.item-2{
/* Align single item vertical */
align-self: center;
order: 2;
}
.item-3{
order: 1;
}
</style>
<title>Document</title>
</head>
<body>
<div id="container">
<div class="item item-1"><h3>Item 1</h3></div>
<div class="item item-2"><h3>Item 2</h3></div>
<div class="item item-3"><h3>Item 3</h3></div>
</div>
</body>
</html>
#容器{
背景:#555；
显示器：flex；
柔性包装：包装；
/*将项目水平对齐*/
对正内容：空间均匀；
/*垂直对齐项目（必须是“高度”属性）*/
高度：600px；
调整项目：基线；
/*在有多余空间的位置将项目垂直对齐*/
对齐内容：之间的空间；
}
.项目{
背景#f4；
边框：1px实心#ccc；
文本对齐：居中；
填充：1rem；
保证金：0.5雷姆；
/*同样的“宽度=弹性基础”*/
/*宽度：300px*/
弹性基准：300px；
}
.项目-1{
顺序：3；
}
.项目-2{
/*将单个项目垂直对齐*/
自对准：居中；
顺序：2；
}
.项目-3{
顺序：1；
}
文件
项目1
项目2
项目3
您可能需要立即更正的一件事是您的注释：如果您没有使用SASS/SCSS，则“/”将不适用于注释。普通的CSS只接受/*我的注释/i.e.“/”标记注释的开始，“*/”标记注释的结束东西。没有flex:5
flex速记是：flex:grow-shrink base
soflex:1 0 auto
表示flexbox增长以适应可用空间，而不是收缩，auto-baseflex:0 0 auto
是默认的内联块元素。它必须是flexbox吗？这些天来，我们越来越倾向于使用浮动回退的css网格。@LongHike非常感谢！是的，很明显，奇怪的评论把事情搞砸了……@admcfajn，谢谢你提供的信息！我认为flex:number应该定义div在flexbox div中的宽度。我对CSS/html非常缺乏经验，只是用它来制作一个非常简单的前端，但我听说网格在所有浏览器中都不可靠？我认为这不是使用flex的正确方法。你可以像那样使用order
。至于