Menu
Does someone know how to create this layout, using flexbox?
The text is going to be placed in the center, and the button is going to be placed between the text and bottom.
I have this now:
.aligner {
display: flex;
justify-content: center;
flex-direction: column;
align-items: center;
height: 100%;
}<div class="aligner">
<h3>SUPERMAN</h3>
<p>FTW</p>
<button>BUTTON</button>
</div>This aligns everything in the center, but I want only the text to be in center, and the button between center and the bottom.
989
Nested flex boxesIt's possible to create some pretty complex layouts with flexbox. It's perfectly OK to set a flex item to also be a flex container, so that its children are also laid out like flexible boxes.
To set space between the flexbox you can use the flexbox property justify-content you can also visit all the property in that link. We can use the justify-content property of a flex container to set space between the flexbox.
This works because when you give an element a fixed position and a left and right of 0 or a top and bottom of 0, the element is stretched to fill the space from left to right, or top to bottom. That in turn allows a flex-box to use the amount of space you would expect without position fixed. Save this answer.
You can try this layout:
flex: 1
flex: 1 and display: flex.The elements above and below the title will take available space left by titles in equal amounts. So the titles will become centered.
Those elements can also be flex containers, and you can align their contents inside them as desired.
html, body {height: 100% } * { margin: 0; }
.aligner, .below {
display: flex;
justify-content: center;
flex-direction: column;
align-items: center;
}
.aligner {
height: 100%;
}
.aligner::before { content: ''; }
.aligner::before, .below {
flex: 1;
}<div class="aligner">
<h3>SUPERMAN</h3>
<p>FTW</p>
<div class="below">
<button>BUTTON</button>
</div>
</div>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
