Space-between elements in container [duplicate] - html

Question

This question already has answers here:
In CSS Flexbox, why are there no "justify-items" and "justify-self" properties?
(6 answers)
Closed 3 years ago.
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
.
PS: I also want to be able to reduce html tags if possible.

Answer 1

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>

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

Answer 3

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>

Answer 4

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>

Answer 5

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>

Answer 6

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>

Answer 7

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