Aligning a single child to the bottom of a flex container [duplicate] - css

This question already has answers here:
Center and bottom-align flex items
(3 answers)
Closed 3 years ago.
I'm building a static page with a large intro section, that has a title, a caption, and a button. I want the title and caption to be left aligned horizontally, and center aligned vertically but the button needs to be center aligned horizontally and at the bottom of the container.
I'm using flexbox here, the parent is the flexbox with flex-direction set to column and justify-content: center. Then I gave the button a align-self: center which worked for the horizontally centered alignment. Then I gave the button a margin-top: auto, hoping it would move to the bottom of the parent, but while that happened, it also pushed the title and caption to the very top of the container, which is not what I want.
See the code below.
.section__intro {
display: flex;
justify-content: center;
flex-direction: column;
align-items: flex-start;
&__button {
align-self: center;
margin-top: auto;
}
}
<section class="section__intro">
<div class="section__intro__title">
This is
<span class="section__intro__title--big">
The Title of the page
</span>
</div>
<a href="#" class=" section__intro__button">Join Us Now</a
href="#">
<button class="section__intro__scroll"></button>
</section>
I want the button at the bottom of the container with class section__intro__scroll to be at the bottom.
Also, I do not want to use position: absolute for this.

If I understand it correctly you are trying something like this using the same markup?
body {
margin: 0;
}
.section__intro {
display: flex;
justify-content: center;
flex-direction: column;
height: 100vh;
&__button {
align-self: left;
margin-bottom: auto;
}
&__scroll {
margin: 0 auto;
}
&__title {
margin-top: auto;
}
}
view in codepen

As stated in the comments, is not possible to do it with your current markup (it is in fact possible, as seen in the Yor's answer), one way to achieve what you want using only flexbox is split the problem in two.
You have to group in two boxes the items: the first box for the title and the caption, the second box for the button. With these two boxes, you can set the first box to grow and it will push the second box to the bottom.
Then you can center vertically the content of the first box usign the same technique you are using now.
.section__intro {
display: flex;
flex-direction: column;
/*
Force to make it tall
*/
height: 80vh;
}
.section__intro__title {
flex-grow: 1;
display: flex;
justify-content: center;
flex-direction: column;
}
.section__intro__caption {
display: block;
}
.section__intro__scroll {
align-self: center;
justify-self: end;
}
<section class="section__intro">
<div class="section__intro__title">
<span class="section__intro__title--big">
The Title of the page
</span>
Join Us Now
</div>
<button class="section__intro__scroll">Button</button>
</section>

Related

Angular css style flex item vertically top

I am not expert in css styling. Can anyone help with the following to vertically align a text top.
I have the following in my angular template:
<div class="validation-error-section">
<i class="icon-md error-rd"></i>
<t-error [Text]="ERROR_MSG_UPLOAD_FAILED"></t-error>
</div>
and the style
.validation-error-section {
display:flex;
flex-direction: row;
align-items: flex-start;
}
I want the text in to display vertically top to align with the image. but it looks like below:
Can anyone help how to align the text 'The import of your file has faile...' vertically align to top ?
Just align your items in the center of your message.
.message {
display: flex;
flex-flow: row nowrap;
align-items: center;
}
.icon {
width: 10px;
height: 10px;
background: #a33;
border-radius: 50%;
}
<div class='message'>
<div class='icon'></div>
<div class='text'>The import of your file has failed. Please try again.</div>
</div>
Switch from align-items: flex-start; to align-items: start;
If that is not enough then add also align-self: start;'
Check Flex alignment documentation. You are interested on alignment for Cross Axis

I try using floats to position some text but it is not even moving

I am trying to move the "A short summary of Erik Spikemann" along with the under it. I want to place it next to the large photo of him as seen on the left side. I've tried doing a float left but for some reason that isn't working at all. I've attached my code.Full photo of the page
Use Flexbox or Grid. I'll give you an example for Flexbox that you can reflect on your own case and you can search for the other.
.container {
display:flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
img {
width: 400px;
height: 400px;
margin-right: 10px;
}
<div class = "container">
<img src = "https://www.w3schools.com/howto/img_avatar.png" alt = "Image" />
<p>Some text</p>
</div>
The idea here is you need to wrap your image and text with a parent div and make it a Flexbox.
flex-direction: row; => Place the items side by side
justify-content: center; => Center the items horizontally
align-items: center; => Center the items vertically
I encourage you to checkout this guide about Flexbox

flexbox align image to end of div [duplicate]

This question already has answers here:
How to align groups of buttons on single row with Flex only?
(2 answers)
How to Center and Right-align on a row with CSS Flex only
(3 answers)
Closed 5 years ago.
I have a codepen of my header. How can I align the image to the right of my div?
I have tried justify-content: flex-end and align-items: flex-end
With the given code sample, and to right align the image in its parent, the align-items: flex-end is a flex container property and won't have any effect in the right rule.
The appropriate property for a flex item would be align-self, though as the direction is row, this will still not work since align-* properties affect the cross axis (vertically).
A simple solution is to remove align-items: flex-end from the right rule and instead make the div-container--right a flex container, use justify-content: flex-end to push its child, the image, to the right. That will work with the rest of the rules, and your original layout kept.
Stack snippet
.main-container{
background-color: white;
flex: 1;
display: flex;
flex-direction: row;
}
.left{
flex: 2;
background-color:white;
}
.right {
flex: 2;
/*align-items: flex-end; removed */
}
.div-container {
background-color: #90C3D4;
height: 100px;
}
.div-container--left {
border-bottom-left-radius: 10px;
padding-left: 10px;
margin-left: 10px;
}
.div-container--right {
border-bottom-right-radius: 10px;
padding-right: 10px;
margin-right: 10px;
display: flex; /* added */
justify-content: flex-end; /* changed */
align-items: flex-start; /* added, to avoid image to stretch */
}
<div class='main-container'>
<div class="left">
<div class='div-container div-container--left'>
<img src="http://www.mharrisweb.co.uk/images/calendarIcon.png" width="100" />
</div>
<div class='picker-container'>
</div>
</div>
<div class="right">
<div class='div-container div-container--right'>
<img src="http://www.mharrisweb.co.uk/images/logoGreen.png" width="100" />
</div>
<div class='picker-container'>
image above align right
</div>
</div>
</div>
Besides the above, here is a few more ways to align flex items:
How to align groups of buttons on single row with Flex only?
How to Center and Right-align on a row with CSS Flex only
Center and right align flexbox elements
Right align out the Float Property
The way I see it you have 2 options.
remove flex:2 from the .right class and add margin-left:auto;
to the .right class add display: flex, align-items: flex-end; flex-direction: column (you also have that text that would need to be moved inside a class wrapper as the immediate child of the .right class.
I prefer option 1.
An additional option to the good answer from Sten is to use absolute position. Example:
.right{
position:absolute;
right:0;
}

Horizontally Center Title Over Unknown Number of Items that Wrap [duplicate]

This question already has answers here:
How to adapt div's width to content with flexbox
(4 answers)
How to change flexbox wrap?
(2 answers)
Targeting flex items on the last or specific row
(10 answers)
Closed 5 years ago.
I have what seems like a simple CSS question but has been rather vexing for me as a styles newbie. Any help is really appreciated. I tried to find another example on Stack Overflow and couldn't which surprised me, so if this is a dupe pls point me in the right direction.
I have a container element that contains some text and a list of elements with fixed dimensions.
<div class='container'>
<p> Title </p>
<div class='item'>1</div>
<div class='item'>2</div>
<div class='item'>3</div>
<div class='item'>4</div>
</div>
I don't know how many items I will actually have - it might be 3 - 9. I want the container to be centered on the page and the heading to be centered above the items, but I want the items to be added left to right. I want the items to align left so that they appear centered under the heading and on the page when the row is full, but should appear from left to right if a row is not full. So if the screen can fit three and there are four, the fourth should align with the first element and not be in the middle.
.container {
margin: 0 auto;
display: inline-flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: flex-start;
}
p {
margin: 0 auto;
text-align: center;
justify-content: center;
align-self: center;
display: block;
}
.item {
flex: none;
width: 200px;
height: 100px;
background-color: red;
margin: 20px;
}
The issue I'm having is that I can center the text, but because the width of the parent is not based on the width of the children, it always appears slightly off center. So, I read that I can force the parent's width to be based on the children's width by setting display: inline-flex on the parent. This accomplishes that, but unfortunately that then forces the heading to be in-line with the items, which defeats the purpose. The only reason I need the width of the parent to be calculated based on children's width is so that the text will know how to center itself inside the parent.
Any help would be really appreciated. I don't need to use flexbox - any other approach that works would be great...this is just the latest in a series of different things I've tried.
If i understood the question correctly, you were on the right track, setting display:block on the p was a good idea, but you also need to set width:100% so it won't stay inline with the other items.
See below or jsFiddle
.container {
margin: 0 auto;
display: inline-flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: flex-start;
}
p {
width: 100%;
margin: 0 auto;
text-align: center;
justify-content: center;
align-self: center;
display: block;
}
.item {
flex: none;
width: 200px;
height: 100px;
background-color: red;
margin: 20px;
}
<div class='container'>
<p> Title </p>
<div class='item'>1</div>
<div class='item'>2</div>
<div class='item'>3</div>
<div class='item'>4</div>
</div>

Centered flex box with display=none element causing unreadable overflow off screen

I have three columns within the flex box container, two visible and one hidden. The first two have very little content; the third one has several pages of content. I want all three to be initially vertically centered, but since the third one will overflow off the page, I want it (when made visible) to end up filling to the top of the page and then scrolling down. How can I have centred items in the flex box that overflow naturally in this way?
What's happening now in my code below is that when the third column is made visible, it overflows off the top and bottom of the page, without scroll, so that its impossible to read the first part of the content.
HTML:
<div class="flex-container">
<div class="column column-left">
column one
</div>
<div class="column column-right">
column two
</div>
<div class="column-hidden column" data-id="1">
column three
</div>
</div>
CSS:
body{
margin:0;
}
html, body{
height: 100%;
}
.flex-container{
height: 100%;
display: -webkit-flex;
display: flex;
-webkit-flex-direction: row;
flex-direction: row;
-webkit-align-items: center;
align-items: center;
-webkit-justify-content: center;
justify-content: center;
}
.column{
padding: 0 1em 0 1em;
}
.column-left{
display: visible;
}
.column-right{
display: visible;
border: none;
text-align: left;
}
.column-hidden{
display: none;
}
Javascript:
//clicking on button does the following to show hidden column
$('.column-left').removeClass('column-left').addClass('column-hidden');
$('.column-right').removeClass('column-right').addClass('column-left');
$(".column[data-id='" + id + "']").addClass('column-right').removeClass('column-hidden');
Played a bit with your code. I rearranged align-items from .flex-container to .column, which is also display: flex;. For scrolling I think you should have additional absolutely positioned container for the content.. I used P.
Sample here http://codepen.io/vkjgr/pen/gpqLLZ
p.s. Some hints about your code. flex-direction's initial value is row, so you don't have to write it. And visible is not a property of display ;)

Resources