Question

我需要将我的元素放在一行中，以高度为中心，并在有界块中进行右侧水平对齐。我尝试使用flexbox，一切只适用于一个行项目，否则溢出元素占用所有可用空间，并且看起来不对齐。

＆＃13;

.flex {
  width:80px;
  display: flex;
  align-items: center; 
  justify-content: flex-end;
}
span {  
  text-align:right;
}

＆＃13;

<div class="flex">
  <i>0</i>
  <span>
    good 
  </span>
</div><br>
<div class="flex">
  <i>0 </i>
  <span>
    Not that good
  </span>
</div>

＆＃13;

Answer 1

您需要将flex属性放在容器上，以便项目（您的div）对齐。在这里，您可以看到一个可行的解决方案：

Flexbox

您的容器将具有以下css属性，并且是一个简单的div。

.container {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: flex-end;
}

我非常喜欢您可以找到HERE的Flexbox指南。 IT帮助我理解了flexbox特定修饰符。

简单的CSS帮助

1 个答案: