Question

此css正在尝试在标签左侧显示一个复选框，并使其都可单击。该元素在代码中位于Flex容器内，但我得到的是一个复选框，其下方的标签不在其左侧。我怎样才能解决这个问题？感谢。

.flex-column-item {
    padding: 0.3em 2%;
}

.flex-column-container {
    margin: 1em 0;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-flow: column ;
    -ms-flex-flow: column ;
    flex-flow: column ;
}

.flex-container {
    margin: 1em 0;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
}
.left {
    -webkit-align-self: flex-start;
    align-self: flex-start;
}

<template name="content">
  {{#if Template.subscriptionsReady}}
    <form class="flex-column-container">
      {{#each this.items}}
        <div class="flex-column-item">
          {{> checkbox}}
        </div>
      {{/each}}
    </form>
  {{/if}}
</template>


<template name="checkbox">
  <div class="flex-container">
    <label>
      <input class="left" type="checkbox" name={{name}} data-name="{{name}}">{{label}}
    </label>
  </div>
</template>

Answer 1

一个flexbox容器（带有display: flex的元素）只能影响它的孩子（直接后代不是像孙子孙女一样的后代的后代）。因此，在您的情况下，它是您需要担心的复选框的标签，因为复选框是.flex-container的孙子。班级.left应该在标签上，但这只是问题的一半。 .left的属性为align-self: flex-start，该属性仅适用于flex-container（flex-container的子代），该flex-items位于flex-direction: column的{-0}}的flex容器中align-items也是如此。因此，只需将.flex-container更改为.flex-column-container并将.left类移至标签即可。

以下是前面提到的标记：

    <div class="flex-column-container">
      <label class="left">
        <input type="checkbox" name={{name}} data-name="{{name}}">{{label}}
      </label>
    </div>

在Snippet中，通过删除前缀来清理CSS，因为现代浏览器不再需要它们。

段

＆＃13;

<!doctype html>
<html>

<head>
  <meta charset="utf-8">
  <title>flexDemo</title>
  <style>
    .flex-column-item {
      padding: 1em;
    }
    .flex-column-container {
      margin: 1em 0;
      display: flex;
      /* flex-flow requires 2 values row/column and wrap/nowrap */
      flex-flow: column wrap;
      /* Added align-items to show how align-self works */
      align-items: space-around;
    }
    .flex-container {
      margin: 1em 0;
      display: flex;
    }
    .left {
      align-self: flex-start;
    }
    /* Added borders to show where the elements are in relation to each other */
    div {
      border: 2px dotted blue;
    }
    section {
      border: 3px dashed brown;
    }
    form {
      border: 2px solid green;
    }
    input {
      border: 1px solid red;
    }
  </style>
</head>

<body>

  <!-- Changed the templates into sections so elements will be visible -->
  <section name="content">
    {{#if Template.subscriptionsReady}}
    <form class="flex-column-container">
      {{#each this.items}}
      <div class="flex-column-item">
        {{> checkbox}}
      </div>
      {{/each}}
    </form>
    {{/if}}
  </section>


  <section name="checkbox">
    <div class="flex-coloumn-container">
      <label class="left">
        <input type="checkbox" name={{name}} data-name="{{name}}">{{label}}
      </label>
    </div>
  </section>
</body>

</html>

＆＃13;

css3 flex box

1 个答案:

段