2

So I have a container with label text and checkboxes, now this is what I currently have 

body {
  display: flex;
  justify-content: center;
}

.container {
  background-color: yellow;
  display: flex;
  width: 200px;
  height: fit-content;
  margin: 0 10px;
  justify-content: space-around;
}

.container.firstCheck{
  flex-grow: 1;
}
.container.secondCheck{
  flex-grow: 1;
}
<div class="container">
  <div class="checkboxes">
    <div class="firstCheck">
      <label for="check1">this is 1</label>
      <input name="check1" type="checkbox"/>
    </div>
    <div class="SecondCheck">
      <label for="check2">this is 2</label>
      <input name="check2" type="checkbox"/>
    </div>
  </div>
</div>

now I want the label to be at the far left of the container and the checkbox to be at the far right of the container using flexbox. This illustrates my goal imgur.

PS: I also want to be able to reduce html tags if possible.

mplungjan
  • 169,008
  • 28
  • 173
  • 236

7 Answers7

3

Use justify-content: space-between to place the items on the left and right of the container. Also, you need to correct the SecondCheck name in CSS. In the HTML structure, it has capital 'S' while in CSS it has small 's'. I have corrected it in my answer. Hope this helps, Thanks!!

body {
  display: flex;
  justify-content: center;
}
.container {
    background-color: #fff;
    display: flex;
    width: 200px;
    height: fit-content;
    margin: 0 10px;
    justify-content: space-around;
    border:2px solid #000;
 }

.container.firstCheck{
  flex-grow: 1;
}

.container.SecondCheck{
  flex-grow: 1;
}

.firstCheck{
    margin-bottom: 20px;
}

.checkboxes{
    width: 100%;
    display: inline-block;
    padding: 20px;
}
.firstCheck, .SecondCheck{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
<div class="container">
  <div class="checkboxes">
    <div class="firstCheck">
      <label for="check1">this is 1</label>
      <input name="check1" type="checkbox"/>
    </div>
    <div class="SecondCheck">
      <label for="check2">this is 2</label>
      <input name="check2" type="checkbox"/>
    </div>
  </div>
</div>
Viral
  • 935
  • 1
  • 9
  • 22
Twinkle Sharma
  • 365
  • 2
  • 9
2

Use flex on .firstCheck, and .SecondCheck then set margin-left: auto on input. I removed some useless codes, check it out below:

body {
  display: flex;
  justify-content: center;
}

.container {
  background-color: yellow;
  width: 200px;
  height: 150px;
  margin: 0 10px;
  align-items: center;
  justify-content: center;
  display: flex;
}

.checkboxes {
    width: 100%;
    padding: 10px;
}

.firstCheck input, .SecondCheck input {
    margin-left: auto;
}

.firstCheck, .SecondCheck {
    display: flex;
}
<div class="container">
  <div class="checkboxes">
    <div class="firstCheck">
      <label for="check1">this is 1</label>
      <input name="check1" type="checkbox" />
    </div>
    <div class="SecondCheck">
      <label for="check2">this is 2</label>
      <input name="check2" type="checkbox" />
    </div>
  </div>
</div>
Pedram
  • 15,766
  • 10
  • 44
  • 73
2

This can be done as follows:

body {
  display: flex;
  justify-content: center;
}

.container {
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  width: 200px;
  height: 140px;  
  border: solid 2px #ccc;
}

.divcheck {
  display: flex;
  justify-content: space-between;
  margin: 0px 20px 0px 20px;
}
<div class="container">
    <div class="divcheck">
      <label for="check1">this is 1</label>
      <input name="check1" type="checkbox"/>
    </div>
    <div class="divcheck">
      <label for="check2">this is 2</label>
      <input name="check2" type="checkbox"/>
    </div>
</div>
uminder
  • 23,831
  • 5
  • 37
  • 72
2

You need to apply flex properties to the elements that you want to position, like this:

body {
  display: flex;
  justify-content: center;
  width: 100%;
}

.container {
  background-color: yellow;
  display: flex;
  width: 200px;
  height: fit-content;
  margin: 0 10px;
  /*       justify-content: space-around; */
}

.checkboxes {
  width: 100%;
}

.firstCheck {
  display: flex;
  flex-direction: row;
  flex-grow: 1;
  justify-content: space-between;
  width: 100%;
}

.secondCheck{
  display: flex;
  flex-direction: row;
  flex-grow: 1;
  justify-content: space-between;
  width: 100%;
}

.firstLabel {
  display: flex;
  flex-direction: row;
}

.secondLabel {
  display: flex;
  flex-direction: row;
}
<div class="container">
  <div class="checkboxes">
    <div class="firstCheck">
      <label class="firstLabel" for="check1">this is 1</label>
      <input class="firstInput" name="check1" type="checkbox"/>
    </div>
    <div class="secondCheck">
      <label class="secondLabel" for="check2">this is 2</label>
      <input class="secondInput" name="check2" type="checkbox"/>
    </div>
  </div>
</div>
Alberto Perez
  • 2,561
  • 1
  • 14
  • 21
1

minimal solution

body {
  display: flex;
  justify-content: center;
}

.container {
  background-color: yellow;
  width: 200px;
  border: 2px solid black;
  padding: 10px;
}

.checkbox {
  display: flex;
  justify-content: space-around;
  padding: 5px;
}
<div class="container">
  <div class="checkbox">
    <label for="check1">this is 1</label>
    <input name="check1" type="checkbox" />
  </div>
  <div class="checkbox">
    <label for="check2">this is 2</label>
    <input name="check2" type="checkbox" />
  </div>
</div>
DohaHelmy
  • 770
  • 1
  • 7
  • 19
0

Firstly, the container has some padding from your space-around applied css that you have to remove in order to create some space for the first&second check divs. You don't actually need the display flex for container div.

You should actually set both checks position: relative; and move your checkbox to right using position: absolute; and right: 0px;

You can reduce the number of classes by replacing the firstCheck and secondCheck with a simple .check class or whatever you want it to be. You can style them individually using the :nth-of-type(n) without having to assign a class or id to each of them.

HTML

<div class="container">
  <div class="checkboxes">
    <div class="check">
      <label for="check1">this is the first and longer label spread on 2 rows</label>
      <input name="check1" type="checkbox"/>
    </div>
    <div class="check">
      <label for="check2">this is 2</label>
      <input name="check2" type="checkbox"/>
    </div>
  </div>
</div>

CSS

body {
  display: flex;
  justify-content: center;
}

.container {
  background-color: yellow;
  width: 200px;
  padding: 10px 60px 10px 30px;
  margin: 0 10px;
}

.checkboxes { 
  width: 100%;
}
.checkboxes .check {
  position: relative;
}

.checkboxes .check input {
  position: absolute;
  top: 0px; /* the checkbox is normally positioned at the end of the last row of a label, this positions it in line with the first one */
  right: -30px; /* just to make sure the label wont be too close to the checkbox */

}

Here's a codePen for you to see how it works: https://codepen.io/ialexandru/pen/YzPvGPR

Alexandru Iancu
  • 71
  • 5
0

You can use grid if you want less divs

.parent {
  display: grid;
  width: 200px;
  grid-template-columns: 50% 50%;
  grid-auto-rows: 50px;
  align-items: center;
  justify-items: center;
}
.child {
  margin: 0 10px;
}
<div class="parent">
      <div class="child">label</div>
      <div class="child"><input type="checkbox" /></div>
      <div class="child">label</div>
      <div class="child"><input type="checkbox" /></div>
    </div>
Alonas
  • 453
  • 4
  • 12