The old centering method using a container div with a fixed width and margin: 0 auto;
How i can "converted" into a more "modern" way? Because when i use it it centers all elements inside the container not only the container itself, and don't apply the flex-direction property.
EX:
<head>
<style>
.container {
max-width: 1000px;
margin: 0 auto;
}
section {
display: flex;
flex-direction: row;
}
</style>
</head>
<body>
<section>
<div class="container">
</div>
</section
</body>
Just update the styles for section and .container like so:
section {
display: flex;
justify-content: center;
}
.container {
max-width: 1000px;
}
justify-content has a few really useful settings. In your case center does the trick. You had flex-direction: row; which is fine, but that is the default value for flex direction so you can omit that rule.
A max-width on the .container so it is not as wide as the flex section will now produce the centering effect, just remove the margin: 0 auto rule.
Related
I'd like to understand how Angular interprets my HTML and CSS code. Layouts that I've been using without Angular seem to break down.
Simple Example: I am trying to create a fixed height header div followed by a body div that fills the remaining space.
It works in vanilla HTML/CSS: https://jsfiddle.net/d4Lmbk2q/1/
HTML:
<div id='mainCont'></div>
<div id='bodyCont'></div>
CSS:
html,
body {
height: 100%;
width: 100%;
margin: 0;
}
body {
display: flex;
flex-flow: column;
align-items: stretch;
}
#mainCont {
background-color: blue;
flex: 0 0 1.8cm;
min-width: 970px;
}
#bodyCont {
background-color: green;
flex: 1 1 auto;
}
In Angular, nothing shows up (presumably because Angular inserts the empty app-root component wrapper element between the flex container and the flex items?): https://codesandbox.io/s/beautiful-pike-u7hbl?file=/src/app/app.component.css
Yes, the display:flex applies to the direct children of body element which in this case are not your divs but app-root tag
I fixed mine by adding a display of flex to the Angular element that's the direct child of the parent that was flexed. In your case it's app-root.
Here is what it will look like:
body {
display: flex;
flex-flow: column;
align-items: stretch;
}
app-root {
display: flex;
}
Given the following example, both will fill out the center to consume the remaining space in the page, given the page is using flex. I am leaning towards using the css property flex vs height in the body. Is there a difference that needs to be considered when applying one over the other?
CSS
.page {
display: flex;
flex-direction: column;
}
.header {
height: 100px;
}
.body {
flex: 1; // vs height: 100%;
}
.footer {
height: 40px;
}
HTML
<div class="page">
<div class="header">Sample Header</div>
<div class="body">Sample Body</div>
<div class="footer">Sample Footer</div>
</div>
When you set an element to flex: 1, that breaks down to:
flex-grow: 1
flex-shrink: 1
flex-basis: 0
In a column-direction container (like you have), the flex properties above apply vertically. This means that flex-basis and height are equivalent properties.
flex-basis = height (in a column-direction container)
There is an obvious difference between flex-basis: 0 and height: 100%. It's the same difference as height: 0 and height: 100%.
In your situation, where there is a .header and a .footer consuming 140px of vertical space, setting the middle item (.body) to height: 100% would normally cause an overflow.
But since an initial value of a flex container is flex-shrink: 1, flex items are permitted to shrink, and this wouldn't happen. However, it's still sloppy and imprecise coding, in my view.
By setting .body to flex: 1, you're setting the height to 0, but also allowing it to consume free height with flex-grow: 1. I would say, in this case, that this solution is more efficient.
More details:
What are the differences between flex-basis and width?
ยง 7.1.1. Basic Values of flex
There is a huge difference between flex and height.
First to answer your question.
Height 100% doesn't use the remaining space. It will use all the spaces of parent, in your case if page dom is height 200px; then body will also be height: 200px;.
Flex will be correct solution here to fill up the space (flex: 1).
Flex is more than filling the space, its more of a layout and it has influences on its child, how they position and align.
Try below code
.page {
display: flex;
flex-direction: column;
height: 100%;
}
.header {
height: 100px;
display: flex;
align-items: center;
justify-content: center;
}
.body {
display: flex;
flex-direction: column;
height: 80vh;
align-items: center;
justify-content: center;
}
.footer {
height: 40px;
display: flex;
align-items: center;
justify-content: center;
}
<div class="page">
<div class="header">Sample Header</div>
<div class="body">Sample Body</div>
<div class="footer">Sample Footer</div>
</div>
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>
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/
I'm trying to center a div on a webpage using flexbox. I'm setting the following CSS properties. I see that it's being centered horizontally, but not vertically.
.flex-container {
display: flex;
align-items: center;
justify-content: center;
}
Here's the fiddle: JSFIDDLE
Can you explain what I'm doing wrong?
A <div> element without an explicit height defaults to the height of it's contents, as all block elements do. You'd probably want to set it to 100% of it's parent, the <body>, but that's not enough, since that is also a block element. So again, you need to set that to 100% height, to match it's parent, the <html>. And yet again, 100% is still required.
But once all that is done, you get that annoying vertical scroll bar. That's a result of the default margin the body has, and the way the box model is defined. You have several ways you can combat that, but the easiest is to set your margins to 0.
See corrected fiddle.
html, body {
height: 100%;
margin: 0px;
}
.flex-container {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
}
.item {
background-color: blue;
height: 50px;
width: 50px;
}
<div class="flex-container">
<div class="item">
</div>
</div>
You just need to set html, body, and your flex container to height: 100%. The reason it wasn't working is that your flex container didn't have an explicit height set, so it defaulted to the height of its contents.
Live Demo:
html, body {
height: 100%;
}
.flex-container {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
}
.item {
background-color: blue;
height: 50px;
width: 50px;
}
<div class="flex-container">
<div class="item">
</div>
</div>
JSFiddle Version: http://jsfiddle.net/d4vkq3s7/3/