I am trying to center a red box in the middle of the page.
I have set the flex container to 100% in height, and have also set the html,body to 100%, and it still does not align center.
Can anyone please help me understand why its not working? Thanks!
html, body {
height: 100%;
}
.flex-container {
display: flex;
flex-flow: column;
justify-content: center;
height: 100%;
}
.box {
flex: 0 0 100px;
background: red;
width: 100px;
}
<div class='flex-container'>
<div class='box'></div>
</div>
You use justify-content to align flex items on the main axis.
You use align-items to align flex items on the cross axis.
Since your flex container is flex-direction: column:
the main axis is vertical, and
the cross axis is horizontal.
justify-content: center is working fine.
You just need to add align-items: center.
html, body {
height: 100%;
}
.flex-container {
display: flex;
flex-flow: column;
justify-content: center; /* centers flex items vertically, in this case */
align-items: center; /* NEW */ /* centers flex items horizontally, in this case */
height: 100%
}
.box {
flex: 0 0 100px;
background: red;
width: 100px;
}
<div class='flex-container'>
<div class='box'></div>
</div>
Here's a more detailed explanation:
In CSS Flexbox, why are there no "justify-items" and "justify-self" properties?
You need to add align-items to .flex-container
align-items: center;
See here for an example https://jsfiddle.net/x9gyheo6/1/
Related
I'm trying to align the two buttons to be horizontally centered, and evenly distributed vertically on the browser window like the following photo:
#buttonArea {
display: flex;
flex-direction: column;
}
#addButton {
margin: auto;
display: block;
}
#eraseButton {
margin: auto;
display: block;
}
<div id="buttonArea">
<button id="addButton">ADD</button>
<button id="eraseButton">ERASE</button>
</div>
The buttons are horizontally centered, but I don't know how to vertically align them so they are evenly distributed. (e.g. ADD: 33.33%, ERASE: 66.66%)
How can I align the buttons like my photo?
Use justify-content: space-around to distribute equal vertical space around each button and align-items: center to horizontally align the elements.
Just a side note, justify-content applies to the main axis and align-items applies to cross axis. Normally, justify-content applies to the x-axis since the default value for flex-direction is row. However, since we used flex-direction: column, the main axis is now the y-axis.
#buttonArea {
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: center;
width: 100%;
height: 100vh;
border: 1px solid black;
}
<div id="buttonArea">
<button id="addButton">ADD</button>
<button id="eraseButton">ERASE</button>
</div>
HTML
<div id="Area">
<div class="container">
<button id="addButton">ADD</button>
<button id="eraseButton">ERASE</button>
</div>
</div>
CSS
#Area {
width: 100vw;
height: 100vh;
}
.container{
height: 100%;
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: center
}
addButton, eraseButton{
width: 50px;
display: inline-block,
}
What I am doing is
You need to set the width the height of the page so that you can set the items in place you want.
Then will set the container of button to height: 100% because u want to align horizontally centered, and evenly distributed vertically.
Next most important thing is justify-content: space-around; Since you are using flex I hope you know this
You need to add position:relative to the parent div and then for the buttons add position: absolute; and use the top: xx %; property to align it vertically at 33% and 66% of the height.
#buttonArea {
display: flex;
justify-content: center;
align-items: center;
height: -webkit-fill-available;
width: 100%
position:relative;
text-align:centre;
}
#addButton {
display: block;
top: 33.33%;
position:absolute;
}
#eraseButton {
top: 66.66%;
position:absolute;
display: block;
}
<div id="buttonArea">
<button id="addButton">ADD</button>
<button id="eraseButton">ERASE</button>
</div>
Hope this helps. Cheers!
Use position:relative and manage the coordinates accordingly
I'm getting some unexpected behavior with my margins using flex and I would like some help in understanding why.
I'v got some simple html like so:
<div className="dashboard">
<div className="dashboard__inner-container">Inner Container</div>
</div>
And my scss file looks like this:
.dashboard {
text-align: center;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
flex: 1 1 auto;
background-color: #f4f6f8;
}
.dashboard__inner-container {
display: flex;
flex-direction: column;
background-color: #ffffff;
flex: 1 1 auto;
width: 100%;
margin: 100px 50px;
}
What I am expecting is that the inner container will completely fill up the parent container, minus 100px on the top and bottom and 50px on the right and left. The vertical margin works as expected, but the horizontal margin actually extends out of the parent div, so that the inner container still appears to be taking up the entire width of the parent div.
I'm not sure if this is related to flexbox or not.
Here is an isolated CodePen https://codepen.io/MaxMillington2/pen/EQWZoj
When using align-items: center with column direction, the item will collapse to its content width, instead of with its default, stretch, which makes it fill its parent's width.
Additionally, when setting width: 100% to the inner, it will override the default stretch, which will make the item be 100% of parent's width + margin.
For the expected output, remove align-items: center on the outer and width: 100% on inner.
Stack snippet
html {
height: 100%;
overflow: auto;
}
.outer {
display: flex;
justify-content: center;
flex-direction: column;
background-color: #f4f6f8;
height: 100%;
}
.inner {
display: flex;
flex-direction: column;
background-color: #ffffff;
flex: 1 1 auto;
text-align: center;
margin: 100px 80px;
}
<div class='outer'>
outer
<div class='inner'>
inner
</div>
</div>
align-content and justify-content seem to do nothing when I run it on Chrome and Firefox.
I'm not sure what's wrong.
#container {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-content: center;
height: 90vh;
}
#header {
flex: 1 0 200px;
background-color: lightgreen;
height: 200px;
border-radius: 1rem;
}
#main {
flex: 1 0 200px;
background-color: coral;
height: 200px;
border-radius: 1rem;
}
#footer {
flex: 1 0 200px;
background-color: silver;
height: 200px;
border-radius: 1rem;
}
#media screen and (max-width: 915px) {
#container {
flex-flow: column wrap-reverse;
}
}
<div id="container">
<div id="header">Header</div>
<div id="main">Main</div>
<div id="footer">Footer</div>
</div>
They're doing exactly what you're asking them to do. What's wrong here is your flex definition.
If you want them to be 200px each, you shouldn't give it a flex-grow value of 1 which you're doing in your shorthand flex-grow: *1* 0 200px.
Instead, rewrite the flex properties as such:
#header {
flex: 0 0 200px;
...
}
Working JSFiddle
As for why align-content isn't working, you only have 1 line of items, so it has nothing to do.
align-content
This aligns a flex container's lines within when there is extra space in the cross-axis, similar to how justify-content aligns individual items within the main-axis.
Note: this property has no effect when there is only one line of flex items.
From: CSS-Tricks
I'm guessing what you want is to center vertically and horizontally, in which case you don't want align-content, you want align-items.
Try replacing align-content: center with align-items: center to get the vertical centering.
JSFiddle example of align-items
I have a dashboard I am setting up that has wrapper blocks with a sprite icon that should be centered vertically and horizontally inside its parent.
I got the blocks to be placed how I want and wrapping how I want using flexbox.
I also have the icon centered horizontally using the text-align property, but for some reason justify-content: center doesn't do anything when I add it to the .view or .sprite-icon elements; adding it to the .views element also doesn't center things how I want and it breaks the padding between the .view blocks.
See my JSFiddle I set up showing the issue here: https://jsfiddle.net/efarley/k0m4nxny/
.views {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-around;
}
.view {
height: 105px;
text-align: center;
width: 105px;
}
.sprite-icon {
background-image: url('http://67.media.tumblr.com/b2336d673e315081b6d657f8258c313d/tumblr_mv98xzSiJu1qhori9o1_500.jpg');
display: inline-block;
height: 35px;
width: 35px;
}
.sprite-icon.one {
background-position: 0 0;
}
.sprite-icon.two {
background-position: 0 35px;
}
.sprite-icon.three {
background-position: 0 70px;
}
<div class='views'>
<div class='view'>
<span class='sprite-icon one'></span>
</div>
<div class='view'>
<span class='sprite-icon two'></span>
</div>
<div class='view'>
<span class='sprite-icon three'></span>
</div>
</div>
You need to make your view a flex container, then add flex centering properties.
.view {
height: 105px;
text-align: center;
width: 105px;
display: flex; /* new */
align-items: center; /* new */
justify-content: center; /* new */
}
revised fiddle
Note that the justify-content property only applies to flex containers. In your question, you were applying it to a flex item. That's why it failed.
Learn more about flex centering:
How to Center Elements Vertically and Horizontally in Flexbox
Methods for Aligning Flex Items
Try these settings:
.sprite-icon {
display: block;
position: relative;
margin: 35px auto;
background-image: url('http://67.media.tumblr.com/b2336d673e315081b6d657f8258c313d/tumblr_mv98xzSiJu1qhori9o1_500.jpg');
height: 35px;
width: 35px;
}
margin 35px auto centers it horzontally (when position is relative) and moves it down 35px, which centers it vertically, but only since display is now block. I erased text-align: center in .view
Fiddle: https://jsfiddle.net/0t4vbzxb/1/
I have a container named #center in which I want to display canvas and a button inside it. I want the canvas object to take all the available space (respecting the button inside the container).
This is my code:
html, body {
width: 100%;
height: 100%;
}
#container {
display: flex;
height: 100%;
background-color: blue;
}
.block {
flex: 1;
}
#left {
background-color: green;
}
#center {
display: flex;
flex: 1;
flex-wrap: wrap;
align-content: flex-start;
}
#right {
background-color: orange;
}
#canvasObject {
display: block;
margin: 0 auto;
border: 1px solid;
background-color: yellow;
}
<div id="container">
<div id="left" class="block">Left</div>
<div id="center" class="block">
<canvas id="canvasObject">Your browser does not support Canvas.</canvas>
<button type="button">Click!</button>
</div>
<div id="right" class="block">Right</div>
</div>
If I do not have any button in my code, canvas occupy the full div but when I display the button, canvas does not seem to resize the desired height.
Example 1: Without button.
Example 2. With button.
How can I make that the canvas object will resize until the available height (also width but it is already doing it)?
Thanks in advance!
The problem is that you have align-content: flex-start on a row-direction flex container:
#center {
display: flex;
flex: 1;
flex-wrap: wrap;
align-content: flex-start; /* <-- source of the problem */
}
The align-content property controls the spacing between flex items in the cross-axis when there are multiple lines in the container.
When the button element is excluded, there is only one line in the flex container. In such a case, align-content has no effect (align-items would work).
But when you add the button, there are now two lines on wrap, and align-content takes over (align-items does not work).
Since align-content is set to flex-start in your code, both lines are packed to the top of the container. (For other options, try flex-end, center, space-between, space-around and stretch).
An efficient solution would be to use flex-direction: column and apply flex: 1 to the canvas.
#center {
display: flex;
flex-direction: column; /* new; stack flex items vertically */
flex: 1;
flex-wrap: wrap;
/* align-content: flex-start; <-- remove; not necessary */
}
#canvasObject {
flex: 1; /* new; consume all available free space */
/* display: block; <-- remove; not necessary */
/* margin: 0 auto; <-- remove; not necessary */
border: 1px solid;
background-color: yellow;
}
Revised Fiddle
W3C References:
8.4. Packing Flex Lines: the align-content property
8.3. Cross-axis Alignment: the align-items and align-self properties