在带有复选框的离子项目中，将其设置为环绕时，如何使复选框在顶部对齐？

Question

bounty到期在6天内。该问题的答案有资格获得+ 50声望赏金。Maria Miller想要引起更多关注对此问题。

我有一个ion-list，每个项目都有一个复选框和一个标签。有点像待办事项清单。问题是：我将label上的文本设置为自动换行（class="ion-text-wrap"），但是对齐方式不是我想要的方式：

我希望复选框在顶部而不是在中间对齐。有办法吗？

Answer 1

解决此问题的最简单方法是在input和label周围放置一个容器，然后使用flexbox布局模型。 Flexbox会自动将input和label都垂直对齐到容器的顶部，并且label的换行文本将保留在复选框内。

HTML：

<div class="container">
  <input type="checkbox" name="val1" value="something">
  <label for="vehicle1"> I have a really long label that sits next to this checkbox and wraps around and around and around the box. Watch me go... </label>
</div>

CSS：

/* Set container with flex */
/* Children will automatically be aligned in a row */
.container {
  display: flex;
  margin: 15px 30px;
  max-width: 500px;
}

label {
  padding-left: 7px;
}

Codepen上的演示：https://codepen.io/staypuftman/pen/mdJJWNq