对齐框内的元素

Question

我正在尝试将div中的项目对齐，我已经阅读了一些问题，但仍有疑问。

我现在有什么：

代码是

.wrapper {
  border: 1px solid black;
  width: 50%;
  display: flex;
  align-items: center;
}
.image {
  border: 1px solid green;
}
.title {
  border: 1px solid blue;
  margin-left: 1%;
}
p {
  border: 1px solid red;
  float: right; /* Does not work */
}

<div class="wrapper">
  <span class="image">
    <img src="http://opae.a-superlab.com/forum/styles/art_air/imageset/forum_read.png">
  </span>
  <span class="title">Category Title</span>
  <p>Category description</p>
</div>

类别描述的float: right不起作用:(我希望它位于块的最右侧。

将margin-left设置为显式长度不是一种选择，因为“类别描述”的内容是可变的。

Answer 1

那是因为您使用的是flexbox，因此会忽略float，如规范中所述：

• 在Overview中：

    

  Flex布局在表面上类似于块布局。它缺乏很多   可以使用的更复杂的以文本或文档为中心的属性   在块布局中，例如floats和columns。

• 在Flex Containers

  中

    

  float和clear对flex item没有任何影响   不要把它带走。但是，float属性可以   通过影响display仍影响盒子生成   财产的计算值。

• 在Flex Items

  中的示例中

  <div style="display:flex">
      <!-- flex item: floated element; floating is ignored -->
      <div id="item2" style="float: left;">float</div>
  </div>
  

但是，正如Right-aligning flex item?中所述，在flexbox中，您可以使用margin-left: auto将弹性项目推向右侧：

.wrapper {
  border: 1px solid black;
  width: 50%;
  display: flex;
  align-items: center;
}
.image {
  border: 1px solid green;
}
.title {
  border: 1px solid blue;
  margin-left: 1%;
}
p {
  border: 1px solid red;
  margin-left: auto;
}

<div class="wrapper">
  <span class="image">
    <img src="http://opae.a-superlab.com/forum/styles/art_air/imageset/forum_read.png">
  </span>
  <span class="title">Category Title</span>
  <p>Category description</p>
</div>