如何使用flexbox对齐第2列中的内容？
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了如何使用flexbox对齐第2列中的内容？相关的知识，希望对你有一定的参考价值。
我想将第二列中的内容对齐如下：
目前，它看起来像这样：
我相信它与我的柔性增长，柔性收缩和柔性基础有关。但我不确定。这是JSFiddle。 https://jsfiddle.net/onestaryx/c70yg2t9/2/
.work-meta-row{
display: flex;
flex-direction: row;
align-items: flex-start;
align-self: flex-start;
justify-content: flex-start;
line-height: 22px;
flex-wrap: nowrap;
.work-meta-label{
font-weight: bold;
flex-basis: 200px;
}
.work-meta-value{
flex-grow:1;
}
}
答案
这样就可以了：
.work-meta-row{
display: flex;
flex-direction: row;
align-items: flex-start;
align-self: flex-start;
justify-content: flex-start;
line-height: 22px;
flex-wrap: nowrap;
.work-meta-label{
font-weight: bold;
flex: 0 0 200px;
}
}
另一答案
flex-basis属性指定在根据弹性因子分配任何可用空间之前弹性项的初始大小。
还有其他因素，默认情况下flex-grow: 0和flex-shrink: 1，这意味着它仍然可以仅应用flex-basis值收缩。
在你的情况下，你应该设置flex-shrink: 0和flex-basis: 200px，或flex: 0 0 200px的简写方式。您还可以应用min-width和max-width，这些可以为flex项目添加额外的限制。
以下是简化示例：
.work-meta-row {
display: flex;
}
.work-meta-label {
font-weight: bold;
flex: 0 0 200px;
}
.work-meta-value {
flex: 1;
}<div class="work-meta-row">
<div class="work-meta-label">
Platform
</div>
<div class="work-meta-value">
ios, android
</div>
</div>
<div class="work-meta-row">
<div class="work-meta-label">
Year
</div>
<div class="work-meta-value">
2017
</div>
</div>
<div class="work-meta-row">
<div class="work-meta-label">
Role
</div>
<div class="work-meta-value">
Lead Designer. User Research, Prototyping, Wireframing, User Testing, User Interface Design, Product Strategy, Product Management, Lorem Ipsum 1, Lorem Ipsum 2
</div>
</div>另一答案
弹性增长和弹性收缩是ON，即默认为1。您需要禁用它以匹配您需要的UI。这是你如何做到的：
`.work-meta-row {
display: flex;
line-height: 22px;
.work-meta-label {
font-weight: bold;
flex-grow: 0;
flex-shrink: 0;
flex-basis: 100px;
}
}`
或者使用flex缩写，如：
`.work-meta-row {
display: flex;
line-height: 22px;
.work-meta-label {
font-weight: bold;
flex: 0 0 100px;
}
}`
以上是关于如何使用flexbox对齐第2列中的内容？的主要内容，如果未能解决你的问题，请参考以下文章