I have this on my codepen in which I was using flex to align items. What I want is to align items even with or without labels.
here is my html code:
<div class="parent-main">
<div class="child1">
<!--<label>checkbox</label> -->
<input type="text"/>
</div>
<div class="child2">
<label>checkbox</label>
<input type="checkbox"/>
</div>
<div class="child3">
<label>checkbox</label>
<input type="radio"/>
</div>
</div>
my css:
.parent-main {
display: flex;
justify-items: center;
border: solid 1px #ccc;
width: 55vh;
height: 25vh;
margin: 5px;
padding: 15px;
gap: 2px;
}
.child1 {
display: flex;
flex-direction: column;
/* position: relative;
top: 2px; */
}
.child2 {
display: flex;
flex-direction: column;
align-items: baseline;
}
.child3 {
display: flex;
flex-direction: column;
align-items: baseline;
}
Here is my codepen link: enter link description here
This is quite tricky on my side but I hope I can have your insights on this, been working this for 2 days now.
As you want to align the input of type "text" with the other div siblings but without it having any label element, we use a line break in order to mimic an empty blank space without any text element in it by using either <br> or
Tip:
Avoid duplication of codes in CSS properties, see the below snippet
.parent-main {
display: flex;
justify-items: center;
border: solid 1px #ccc;
width: 55vh;
height: 25vh;
margin: 5px;
padding: 15px;
gap: 2px;
}
.parent-main>div {
display: flex;
flex-direction: column;
}
.child2,
.child3 {
align-items: baseline;
}
<div class="parent-main">
<div class="child1">
<!--empty space -->
<br>
<!-- can also be used -->
<input type="text" />
</div>
<div class="child2">
<label>checkbox</label>
<input type="checkbox" />
</div>
<div class="child3">
<label>checkbox</label>
<input type="radio" />
</div>
</div>
Related
I'd like to achieve the look for my login area similar to this photo.
My current HTML and CSS are as follows:
HTML
<div className="loginArea">
<p>Account Login</p>
<div className="inputBoxes">
<div>
<input type="text" placeholder="Username" />
<input type="password" placeholder="Password" />
</div>
<div>
<p>Sign In</p>
</div>
</div>
</div>
CSS
.loginArea {
margin: auto;
padding-top: 8%;
display: flex;
flex-direction: column;
height: 100%;
max-width: 400px;
justify-content: center;
}
.inputBoxes {
display: flex;
flex-direction: column;
justify-content: center;
border-radius: 15px;
background-color: blue;
}
.inputBoxes div {
display: flex;
justify-content: center;
}
input {
flex-grow: 1;
border: none;
}
My goal is to achieve the styling of this input area with respect to the shape of the inputs/sign in button as what look like one rectangle with rounded corners.
The problems I'm running into are two fold:
I can't seem to restrict the size of the input areas to the parent container. They run outside the parent div.
I can't seem to get the input areas to accept the restricted border-radius of the parent container.
Do I have to style each element individually for the rounded borders and how do I restrict the username and password areas to the width of the parent div?
If there are "better" approaches, I'm open to suggestions.
Since you're already using flexbox, the input element sizes seem to correctly fit inside the confines of the parents without any issue.
With regards to your second issue, adding overflow: hidden to the element .inputBoxes will work.
See proof-of-concept below:
body {
background-color: #ccc;
}
.loginArea {
margin: auto;
padding-top: 8%;
display: flex;
flex-direction: column;
height: 100%;
max-width: 400px;
justify-content: center;
}
.inputBoxes {
display: flex;
flex-direction: column;
justify-content: center;
border-radius: 15px;
background-color: blue;
overflow: hidden;
}
.inputBoxes div {
display: flex;
justify-content: center;
}
input {
flex-grow: 1;
border: none;
height: 35px; /* Just for demo */
}
<div class="loginArea">
<p>Account Login</p>
<div class="inputBoxes">
<div>
<input type="text" placeholder="Username" />
<input type="password" placeholder="Password" />
</div>
<div>
<p>Sign In</p>
</div>
</div>
</div>
Is there a way to prevent stretching on both axis of CSS Flex? In the example below, I want the the option and box layers to adjust to the width and height of the children. Additionally, I want the box to be in the middle of the page.
I am aware of flex-grow and basis, but my understanding is it only manages the space of the main axis.
.container {
background-color: red;
display: flex;
justify-content: center;
}
.box {
display: flex;
flex-basis: 0;
background-color: green;
justify-content: center;
}
.option {
display: flex;
flex-direction: column;
align-items: center;
background-color: yellow;
}
.img-container {
background-color: blue;
}
.img-container img {
max-width: 100%;
}
<div class="container">
<div class="box">
<label class="option">
Option 1
<div class="img-container">
<img src="https://hips.hearstapps.com/hmg-prod.s3.amazonaws.com/images/dog-puppy-on-garden-royalty-free-image-1586966191.jpg?crop=0.752xw:1.00xh;0.175xw,0&resize=640:*" />
</div>
</label>
<label class="option">
Option 2
<div class="img-container">
<img src="https://hips.hearstapps.com/hmg-prod.s3.amazonaws.com/images/dog-puppy-on-garden-royalty-free-image-1586966191.jpg?crop=0.752xw:1.00xh;0.175xw,0&resize=640:*" />
</div>
</label>
</div>
</div>
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.
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>
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>
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>
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>
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>
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>
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
I am using flexbox to center a form vertically and horizontally. Inside this form I'd like to pin a button to the bottom right of the flexbox container. I am not sure how to get the button pinned to the bottom right though.
html,
body {
height: 100%;
}
.container {
height: 100%;
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
}
form {
border: 1px solid gray;
padding: 1em;
}
.form-button {
margin-top: 1em;
align-self: flex-end;
}
<div class="container">
<form>
<div class="form-input">
<label> Name <input type="text" /></label>
</div>
<div class="form-button">
<button type="submit">Submit</button>
</div>
</form>
</div>
You just need to make the form element a flex container, because flex properties only work between parent and child elements.
In other words, your align-self: flex-end on the .form-button is not working because the parent – form – does not have display: flex or display: inline-flex applied.
Here's a more complete explanation:
Proper use of flex properties when nesting flex containers
html, body {
height: 100%;
}
.container {
height: 100%;
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
}
form {
border: 1px solid gray;
padding: 1em;
/* NEW */
display: flex;
flex-direction: column;
}
.form-button {
margin-top: 1em;
align-self: flex-end;
}
<div class="container">
<form>
<div class="form-input">
<label> Name <input type="text" /></label>
</div>
<div class="form-button">
<button type="submit">Submit</button>
</div>
</form>
</div>
.form-button {
margin-top: 1em;
align-self: flex-end;
display: flex;
justify-content: flex-end;
}
Just insert float: right;
like this:
.form-button {
float: right;<-----------added
//more code...
}
html,
body {
height: 100%;
}
.container {
height: 100%;
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
}
form {
border: 1px solid gray;
padding: 1em;
}
.form-button {
margin-top: 1em;
float: right;
}
<div class="container">
<form>
<div class="form-input">
<label> Name <input type="text" /></label>
</div>
<div class="form-button">
<button type="submit">Submit</button>
</div>
</form>
</div>
I like the positioning of the two box class div's with justify-content: flex-end but I'd like to center the top img-container div vertically in the remaining space above but I'm not sure if this is possible, preferably without javascript.
The layout is for portrait orientation mobile devices. Maybe justifying the content isn't the best approach but I'd like a layout that places the form elements towards the bottom of the screen and spaces them well but responds to smaller devices by taking space from the logo area.
.flexcontainer {
display: -webkit-flex;
display: flex;
-webkit-flex-direction: column;
flex-direction: column;
-webkit-align-items: center;
align-items: center;
-webkit-justify-content: flex-end;
justify-content: flex-end;
/*iPhone 4*/
height: 480px;
width:320px;
/*iPhone 6*/
/*height: 667px;
width:375px;*/
background-color: blue;
border: 1px solid red;
}
.box {
text-align:center;
height: auto;
width: 100%;
background-color: green;
border: 1px solid pink;
margin: 3px;
padding-top:20px;
padding-bottom:20px;
margin-top:20px;
margin-bottom:20px;
}
.img-container{
text-align:center;
}
<div class="flexcontainer">
<div class="img-container">
<img src='https://wiki.maemo.org/images/thumb/d/de/Maemo.org_logo_contest_sample1_bundyo.png/300px-Maemo.org_logo_contest_sample1_bundyo.png' width='80%'/>
</div>
<div class="box">
<input type="text" placeholder="username">
<br>
<input type="password" placeholder="password">
<br>
<button>submit</button>
</div>
<div class="box">
<button>password reset</button>
<br>
<button>register</button>
</div>
</div>
You could change just a little bit of code and achieve what you want.
Fiddle: https://jsfiddle.net/gczcorn0/
I just modified your image container to be like this:
<div class="box clear img-container">
<img src='https://wiki.maemo.org/images/thumb/d/de/Maemo.org_logo_contest_sample1_bundyo.png/300px-Maemo.org_logo_contest_sample1_bundyo.png' width='80%'/>
</div>
So this takes the same properties as the boxes below. Then I assume you don't want the background-color and border on the image box so just clear the css attributes like this:
.box.clear {
background-color: transparent;
border: none;
}
I'm not sure what you meant by how you want it to behave in smaller devices since the width is set to 320px in the example.
EDIT based on comment:
This updated fiddle shows what you can do in a situation that you expressed in the comments: https://jsfiddle.net/gczcorn0/2/
You could use display: flex on the img-container as well.
.flexcontainer {
display: -webkit-flex;
display: flex;
-webkit-flex-direction: column;
flex-direction: column;
-webkit-align-items: center;
align-items: center;
-webkit-justify-content: flex-end;
justify-content: flex-end;
/*iPhone 4 */
height: 480px;
width:320px;
/*iPhone 6
height: 667px;
width:375px;*/
background-color: blue;
border: 1px solid red;
}
.box {
text-align:center;
height: auto;
width: 100%;
background-color: green;
border: 1px solid pink;
margin: 3px;
padding-top:20px;
padding-bottom:20px;
margin-top:20px;
margin-bottom:20px;
}
.img-container{
display: flex;
flex-flow: column nowrap;
justify-content: center;
flex: 1;
}
.img-container img {
margin: 0 auto;
}
<div class="flexcontainer">
<div class="img-container">
<img src='https://wiki.maemo.org/images/thumb/d/de/Maemo.org_logo_contest_sample1_bundyo.png/300px-Maemo.org_logo_contest_sample1_bundyo.png' width='80%'/>
</div>
<div class="box">
<input type="text" placeholder="username">
<br>
<input type="password" placeholder="password">
<br>
<button>submit</button>
</div>
<div class="box">
<button>password reset</button>
<br>
<button>register</button>
</div>
</div>