checkbox inside css3 flex box

Question

This css is trying to have a check box to the left of the label and make both clickable. The element is inside a flex container as in the code but what I am getting is a check box and a label under it not to the left of it. How can I fix this? Thanks.

.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>

Please post enough code to reproduce the problem. http://stackoverflow.com/help/mcve — Michael Benjamin, May 21 '16 at 12:46
In a brief review of your code, one thing stands out: `.flex-column-item { padding: 0.3em 2%; }` ... The flexbox specification advises against using percentage margin and padding on flex items: http://stackoverflow.com/a/36783414/3597276 — Michael Benjamin, May 21 '16 at 12:48

zer00ne · Accepted Answer · 2016-05-21T19:23:11.793

A flexbox container (the element with display: flex) can only influence it's children (direct descendants not the descendants of descendants like grandchildren). So in your case, it's the label of the checkbox that you need to worry about because the checkbox is a grandchild of .flex-container. The class .left should be on the label but that's just half of the problem. The property of .left is align-self: flex-start and that property only applies to flex-items (children of a flex-container) that reside within a flex-container that's flex-direction: column and has align-items as well. So it's easier in your situation to just change .flex-container to .flex-column-container and move the .left class to the label.

The following is the markup that was previously mentioned:

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

In the Snippet, the CSS was cleaned up by removing the prefixes since they are no longer needed for modern browsers.

SNIPPET

<!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>

checkbox inside css3 flex box

1 Answers1

SNIPPET