This question already has answers here:
How can I position my div at the bottom of its container?
(25 answers)
Closed last month.
I have this rather simple setup, and would just like to move the outer div (neumorphic-input) to the bottom of my page. How can I do this using the current CSS I have.
I am currently using the CSS to align the two elements in the dive side by side and horizontally centred on my page.
HTML:
<body class="body">
<div class="neumorphic-input">
<textarea class="text-input" id="text-input" placeholder="Enter your message"></textarea>
<button class="send-button">Send</button>
</div>
</body>
CSS:
.neumorphic-input {
display: flex;
flex-direction: row;
justify-content: center;
}
You can use min-height: 100vh; and some flexbox to position it at the bottom of the screen:
.neumorphic-input {
display: flex;
flex-direction: row;
justify-content: center;
}
body {
display: flex;
flex-direction: column;
justify-content: flex-end;
min-height: 100vh;
}
<body class="body">
<div class="neumorphic-input">
<textarea class="text-input" id="text-input" placeholder="Enter your message"></textarea>
<button class="send-button">Send</button>
</div>
</body>
Related
This question already has answers here:
In CSS Flexbox, why are there no "justify-items" and "justify-self" properties?
(6 answers)
Closed 1 year ago.
I don't understand Why justify-content:center not working?
I think it's a inputs width issue i already tried give width to input fields but still not working.
Here is my code:
.container {
width: 100vw;
}
.container form {
width: 100%;
display: flex;
flex-direction: column;
justify-content: center;
}
.container form input {
width: 80%;
}
<div class="container">
<form action="" method="post" novalidate>
<div>
<label for="my_username">Username:</label>
<input type="text" name="username" class="inputs" autofocus required id="my_username">
</div>
<div>
<label for="my_email">Email:</label>
<input type="email" name="email" maxlength="254" id="my_email">
</div>
<div>
<label for="my_password1">Password1:</label>
<input type="password" name="password1" class="inputs" required id="my_password1">
</div>
<div>
<label for="my_password2">Confirm Password:</label>
<input type="password" name="password2" class="inputs" required id="my_password2">
</div>
</form>
</div>
justify-content defines the alignment along the main axis (in your case column. So you are centering the content within its row.
It also works only for the direct decendents of the flex container (in this case the div elements that are direct children of the form. If you change justify-content to align-items (which works for the cross-axis) then this should center the div elements horizontally, and then you can add the css to align the label and input elements within those divs.
There's a really good guide available for the properties of flex-box and what they affect here.
.container {
width: 100vw;
}
.container form {
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
}
.container form input {
width: 80%;
}
It can be solved if you use align-items instead of justify-content. It's because of justify-content works in main axis and align-items in cross-axis, perpendicular to the main axis.
.container form {
display: flex;
flex-direction: column;
align-items: center;
}
This question already has answers here:
Make flex items take content width, not width of parent container
(3 answers)
Closed 1 year ago.
How do I avoid items in flex column stretching to full width? I want it to be original size as created.
.myForm {
display: flex;
flex-direction: column;
}
<form class="myForm">
<input type="text" />
<input type="text" />
<button>Test</button>
</form>
In CSS the default value for the flex property align-items is stretch which as you would guess stretches the children of the flex parent to full width. You can change it something else to fix that. For instance
.myForm {
display: flex;
flex-direction: column;
align-items: flex-start;
}
<form class="myForm">
<input type="text" />
<input type="text" />
<button>Test</button>
</form>
Read more about this property here https://developer.mozilla.org/en-US/docs/Web/CSS/align-items
Use max-width: max-content;, or width: max-content; on child element.
.myForm {
display: flex;
flex-direction: column;
}
/* below will be select any first level children under .myForm */
.myForm > * {
max-width: max-content;
}
<form class="myForm">
<input type="text" />
<input type="text" />
<button>Test</button>
</form>
You mentioned display:flex; so your elements size is also flexed to column size.
You can provide css property for your first level child individually like
.myForm > * {
width: fit-content;
}
.myForm {
display: flex;
flex-direction: column;
}
/* below will be select any first level children under .myForm */
.myForm > * {
width: fit-content;
}
<form class="myForm">
<input type="text" />
<input type="text" />
<button>Test</button>
</form>
This question already has answers here:
Center one and right/left align other flexbox element
(11 answers)
Closed 2 years ago.
The header is aligning to the center, and the checkbox-div to the next line, what css should i use to align the checbox-div to the right end on the same line as the header!
Here is the sample code!
<div class="header-wrapper">
<h2 class="header">Header</h2>
<div class="checkbox-div">
<input type="checkbox" class="checkbox" value="Some Value" id="checkbox">
<label for="sub-folder-checkbox">Some Name</label>
</div>
</div>
Currently the css am using is,
.header {
text-align: center;
}
Thanks in advance!
Here is a flexbox Example using an empty div as a "spacer" Element. I left comments in the code that explain what the code below them does. I added colors to some elements so you can see what happens to them.
.header {
text-align: center;
}
.header-wrapper {
display: flex;
/*We want 1 row and we dont want items to wrap into other rows*/
flex-flow: row nowrap;
width: 100%;
background-color: green;
/*Positions elements to the start, end and whatever is between while keeping some space between them */
justify-content: space-between;
/*You can add this if you also want to horizontally align items*/
align-items: center;
}
/*gives all divs (the spacer and the checbox-div) inside of the header-wrapper the same size and leaves the rest of space for the header, with this the header is centered and looks better*/
.header-wrapper div {
width: 33%;
}
.checkbox-div {
background-color: red;
}
<div class="header-wrapper">
<!--Add an empty container to fill in the place on the left-->
<div class="empty-div"></div>
<h2 class="header">Header</h2>
<div class="checkbox-div">
<input type="checkbox" class="checkbox" value="Some Value" id="checkbox">
<label for="sub-folder-checkbox">Some Name</label>
</div>
</div>
Here is a second snippet with a different solution, code is commented for explanation again.
.header-wrapper {
/*make the container a flex item and make it relative*/
display: flex;
position: relative;
width: 100%;
background-color: green;
/*Center the header*/
justify-content: center;
/*if horizontal centering is required add this*/
align-items: center;
}
.checkbox-div {
/*give the div an absolute position inside the parent container all the way on the right*/
position: absolute;
right: 0;
background-color: red;
}
<div class="header-wrapper">
<h2 class="header">Header</h2>
<div class="checkbox-div">
<input type="checkbox" class="checkbox" value="Some Value" id="checkbox">
<label for="sub-folder-checkbox">Some Name</label>
</div>
</div>
I recommend using CSS grid (Basic Concepts of grid layout (on MDN)).
We make the wrapper a grid with three columns. The first column is ignored, the header goes into the second one and the checkbox div in the last one.
Then we align (vertical) and justify (horizontal) the grid items (i.e. the header and the div).
Note that I added borders to help see the boxes.
Also note that in your example code, the id of the checkbox doesn't match the for attribute on the label.
Here's the code:
.header-wrapper {
display: grid;
/* Creates three equally sized columns. */
grid-template-columns: 1fr 1fr 1fr;
align-items: center;
/* Centering is done with this.
* Also centers the div. */
justify-items: center;
}
.header {
grid-column: 2;
border: 1px blue solid;
}
.checkbox-div {
grid-column: 3;
border: 1px red solid;
/* If you don't want to center the checkbox div: */
justify-self: end;
}
<div class="header-wrapper">
<h2 class="header">Header</h2>
<div class="checkbox-div">
<input type="checkbox" class="checkbox" value="Some Value" id="sub-folder-checkbox" />
<label for="sub-folder-checkbox">Some Name</label>
</div>
</div>
This question already has answers here:
Flexbox: center horizontally and vertically
(14 answers)
In CSS Flexbox, why are there no "justify-items" and "justify-self" properties?
(6 answers)
Closed 2 years ago.
Hi so I just need some help on flexbox, ive looked at other people and even copied there code to test but for some reason it isnt working. I'm trying to get a div with content aligned in the center top of a website. Here is my current code,
index.html
<div class="header">
<div class="headerContent">
<h1>TEST<h1>
</div>
</div
style.css
html {
display: flex;
}
.header {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
.headerContent {
background-color: #2C374C;
width: 100%;
justify-content: center;
}
when you use flex-direction: column;, to center horizontally use align-items: center; instead of justify-content: center;
You also have set a height property.
Example:
.header{
display: flex;
height: 300px;
justify-content: center;
align-items: center;
background: red
}
<header class="header">
<div>centered</div>
</header>
it seems you are doing the right thing but on the wrong element. Your are treating the .header id as the parent container when it is the child.
In this case the container hierarchy is the following html -> header -> .headerContent
So to center header you need to act on its parent. Imagine it as a parent giving order to its child (literally).
html {
display: flex;
justify-content: center;
}
by doing this the parent component is justifying its content (children)
I would also recommend instead of using html to create another div container to be the parent of your header div like so
.headerContainer {
display: flex;
justify-content: center;
background-color: red
}
.header {
display: flex;
}
.headerContent {
background-color: #2C374C;
width: 100%;
}
<div class="headerContainer">
<div class="header">
<div class="headerContent">
<h1>TEST<h1>
</div>
</div>
</div>
I think just like this
.header {
width: 100%;
}
.headerContent {
background-color: #2c374c;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
<html>
<link rel="stylesheet" href="style.css" />
<div class="header">
<div class="headerContent">
<h1>Test</h1>
</div>
</div>
</html>
I'm sure this is a duplicate question but I've eliminated almost everything from my code and still can't get it to work. I am new to Flexbox and tried to follow the code at https://philipwalton.github.io/solved-by-flexbox/demos/vertical-centering/ (as an aside, even that code doesn't work!). I am using Safari 11.1.1 and Chrome 67.0.3396.87 so it's not that they're old browsers.
I'm trying to center a <div> horizontally and vertically on the screen. The div contains a form which contains a couple of inputs and a button. I'm trying to center each of this horizontally and the group should be entered vertically within the <div>.
In Safari,nothing is centred. In Chrome, the div is centred horizontally but not vertically, but the inputs/button are not centred either horizontally and vertically.
body {
background: grey;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
#holder {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 300px;
height: 300px;
background: white;
}
<div id="holder">
<form action="">
<input type="text" placeholder="something">
<input type="text" placeholder="something else">
<button>An Action</button>
</form>
</div>
What am I missing? As said, even the sample code from the site mentioned above didn't work correctly, so I'm quite stumped.
You need to set height:100vh in body, or set height:100% on html,body
And center items in forms, use flexbox properties in form instead of #holder
body {
margin: 0;
height: 100vh;
background: grey;
display: flex;
justify-content: center;
align-items: center;
}
#holder {
width: 300px;
height: 300px;
background: white;
}
form {
display: flex;
height: 100%;
flex-direction: column;
justify-content: center;
align-items: center;
}
form>* {
margin-bottom: 20px
}
<div id="holder">
<form action="">
<input type="text" placeholder="something">
<input type="text" placeholder="something else">
<button>An Action</button>
</form>
</div>