我刚开始使用 Flexbox,在弄清楚如何做我想做的事情时遇到了一些麻烦。最终,我正在尝试构建一个漂亮的“控制面板”/HUD。这是我到目前为止所拥有的https://jsfiddle.net/1req8u25/ .
转载于此
#sliders-container {
position: absolute;
top: 0;
right: 0;
margin: 20px;
padding: 5px;
background-color: #333333;
display: flex;
flex-flow: column wrap;
justify-content: space-around;
align-items: flex-start;
}
.slider-container {
margin: 2px;
padding: 2px;
flex: 0 0 100%;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
}
.slider-label {
margin: 2px;
padding: 2px;
font-family: "Trebuchet MS", Verdana, sans-serif;
font-size: small;
color: white;
flex: 0 0 40%;
}
.slider {
margin: 2px;
padding: 2px;
flex: 0 0 50%;
}
.slider-value {
margin: 2px;
padding: 2px;
font-family: "Trebuchet MS", Verdana, sans-serif;
font-size: small;
color: white;
flex: 0 0 10%;
}
<div id="sliders-container">
<div class="slider-container">
<p class="slider-label">foo</p>
<input class="slider" min="0" max="100" type="range">
<p class="slider-value">10</p>
</div>
<div class="slider-container">
<p class="slider-label">foo-bar-baz</p>
<input class="slider" min="0" max="100" type="range">
<p class="slider-value">0</p>
</div>
<div class="slider-container">
<p class="slider-label">quuuuuuuuuuuuux</p>
<input class="slider" min="0" max="100" type="range">
<p class="slider-value">0.0000001</p>
</div>
</div>
这产生
这显然看起来很糟糕。我想要的是每一行占据所有必要的空间,以便将所有内容放入其中,每个左标签大小相同,每个 slider 宽度相同,每个右标签是大小相同。
这可能吗?
最佳答案
你可以为此使用 css 网格。
.slider-container {
margin: 2px;
padding: 2px;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
/* flex: 0 0 100%;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center; */
}
为
替换 flex 内容 display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-columns 表示每列的大小,在本例中 1fr 表示当前空间的 1 部分。
为了在右边对齐最后的标签,你可以使用来自 flexbox 的相同标签, 在 .slider-value 里面放:
justify-self: end;
它将在右侧对齐文本。
关于html - 如何对齐我的 flexbox 元素并使它们大小相同?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54857038/