Html CSS Flexbox:将flex项与不同宽度对齐
我正在尝试将一些弹性项目与不同的宽度对齐。我打不到一些元素。 我无法将文本和彩色方块对齐,如图所示Html CSS Flexbox:将flex项与不同宽度对齐,html,css,flexbox,Html,Css,Flexbox,我正在尝试将一些弹性项目与不同的宽度对齐。我打不到一些元素。 我无法将文本和彩色方块对齐,如图所示 这是因为从这些行创建的行和单元格不知道其他行的尺寸-这就是为什么在最后一部分中,“VIII”比其他元素占用更多的宽度 一种解决方案是创建列而不是行,因为这样一来,flex容器的宽度将达到最宽的元素的宽度。我使用flex css重新编写了代码,并删除了一些不需要的样式。希望这能帮助你解决问题 HTML JS Fiddle Link:要获得准确的结果,您需要更改一点html结构。如果没有,我已经使用
这是因为从这些行创建的行和单元格不知道其他行的尺寸-这就是为什么在最后一部分中,“VIII”比其他元素占用更多的宽度
一种解决方案是创建列而不是行,因为这样一来,flex容器的宽度将达到最宽的元素的宽度。我使用flex css重新编写了代码,并删除了一些不需要的样式。希望这能帮助你解决问题 HTML
JS Fiddle Link:要获得准确的结果,您需要更改一点html结构。如果没有,我已经使用您当前的代码创建了类似的模式。请检查以下内容:
您可以将这些div用作外部容器,并根据需要将内容从这些div中取出。非常感谢,此解决方案非常完美!我有个小问题。我应该分开两个flex容器,以便在一个容器中有数字,在另一个容器中有按钮。这样,第二个的内容就不会与第一个对齐。有没有办法使两个容器的宽度相同?这是我的JS链接:谢谢!最简单的方法是给列一个宽度。这是对代码的又一次修改。希望能有帮助。你说得对,它解决了我的问题。最后一件事。为什么我看不到最后一列中的数字居中?你在说什么号码?我有个小问题。我应该分开两个flex容器,以便在一个容器中有数字,在另一个容器中有按钮。这样,第二个的内容就不会与第一个对齐。有没有办法使两个容器的宽度相同?这是我的JS-Fiiddle链接:jsiddle.net/sistel/m1vu9exf/7谢谢
.flex-container-4 {
display: flex;
height: 70px;
align-items: center;
background-color: Black;
justify-content: space-around;
position:relative;
}
.flex-container-4 > div {
background-color: BLACK;
width: 500px;
margin: 5px;
text-align: center;
line-height: 50px;
font-size: 40px;
color: white;
}
<div class="flex-container">
<div class="flex-column">
<div class="flex-row">
<div class="number">18</div>
<div class="number">18</div>
<div class="number">18</div>
</div>
<div class="flex-row">
<div class="roman-numeric">I</div>
<div class="roman-numeric">II</div>
<div class="roman-numeric">III</div>
</div>
<div class="flex-row">
<div class="number">18</div>
<div class="number">18</div>
<div class="number">18</div>
</div>
<div class="flex-row">
<div class="text">BALL</div>
</div>
<div class="flex-row">
<div class="green"></div>
<div class="green"></div>
<div class="green"></div>
</div>
</div>
<div class="seperator"></div>
<div class="flex-column">
<div class="flex-row">
<div class="number">18</div>
<div class="number">18</div>
<div class="number">18</div>
</div>
<div class="flex-row">
<div class="roman-numeric">IV</div>
<div class="roman-numeric">V</div>
<div class="roman-numeric">VI</div>
</div>
<div class="flex-row">
<div class="number">18</div>
<div class="number">18</div>
<div class="number">18</div>
</div>
<div class="flex-row">
<div class="text">STRIKE</div>
</div>
<div class="flex-row">
<div class="red"></div>
<div class="red"></div>
</div>
</div>
<div class="seperator"></div>
<div class="flex-column">
<div class="flex-row">
<div class="number">18</div>
<div class="number">18</div>
<div class="number">18</div>
</div>
<div class="flex-row">
<div class="roman-numeric">VII</div>
<div class="roman-numeric">VIII</div>
<div class="roman-numeric">IX</div>
</div>
<div class="flex-row">
<div class="number">18</div>
<div class="number">18</div>
<div class="number">18</div>
</div>
<div class="flex-row">
<div class="text">OUT</div>
</div>
<div class="flex-row">
<div class="orange"></div>
<div class="orange"></div>
</div>
</div>
</div>
.flex-container {
display: flex;
background-color: Black;
justify-content: start;
padding: 10px 10px;
width: fit-content;
}
.flex-column {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.flex-row {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
}
.flex-row>.number {
background-color: #444;
width: 100px;
margin: 5px;
text-align: center;
line-height: 75px;
font-size: 60px;
color: yellow;
}
.flex-row>.roman-numeric {
width: 100px;
margin: 5px;
text-align: center;
line-height: 45px;
font-size: 50px;
color: white;
}
.flex-row>.text {
background-color: BLACK;
margin: 5px;
text-align: center;
line-height: 50px;
font-size: 40px;
color: white;
}
.green {
background-color: green;
width: 40px;
height: 40px;
margin: 25px;
}
.red {
background-color: red;
width: 40px;
height: 40px;
margin: 25px;
}
.orange {
background-color: orange;
width: 40px;
height: 40px;
margin: 25px;
}
.seperator {
background: #a5a2a2;
width: 10px;
margin: 0px 15px;
}