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;
}
Related
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>
i want the items in flexbox not to come out of flexbox when the div's width next to flexbox is increased.
consider i have a flexbox container which has items such as svg, input field and div with simple text. Next to this flexbox container i have one side panel. This side panel can be resized..meaning when user drags the side panel sideways its width either increases or decreases. In doing so, the flexbox container is shrunk and hence the items in flexbox come out of it...how can i avoid it? how can i make sure that even when the sidepanel is dragged the flexbox items should stay intact?
.wrapper {
display: flex;
flex-grow: 1;
}
.items_container {
position: relative;
width: 40px;
height: 40px;
top: 16px;
margin-left: 16px;
padding-left: 5px;
display: flex;
align-items: center;
justify-content: space-evenly;}}
.items_container.expanded .search_input_field {
display: flex;
align-items: center;
}
<div class="wrapper">
<div class="items_container expanded">
<div class="search_input_field">
<Svgsearch/><input type=text/>
</div>
</div>
<div>dropdown to be added</div>
</div>
Could someone help me with it? thanks.
You can use flex-wrap to make the items drop down to another row if they are larger than their container:
display: flex;
flex-wrap: wrap;
Documentation: https://developer.mozilla.org/en-US/docs/Web/CSS/flex-wrap
If you want the items to remain on one line then i would give them percentage widths.
I have three elements I'm trying to align in my layout.
First, I have a div for feedback, and then a search input, and then a div element for suggestions.
I want the first and last element to have a width of 20%, and the search input to have a width of 60%. Using Flexbox I achieve what I want.
But there's a feature that grows all the divs to the highest element. This means that when search results pop up, the feedback and suggestion elements grow in height with the search div resulting in a messed up layout.
Is there a trick to not grow the divs with the highest element? Just make the divs (#feedback and #suggestions) have the height of the content in them?
#container_add_movies {
display: flex;
}
#container_add_movies #feedback {
width: 20%;
background-color: green;
}
#container_add_movies #search {
width: 60%;
background-color: red;
}
#container_add_movies #suggestions {
width: 20%;
background-color: yellow;
}
<div id='container_add_movies'>
<div id='feedback'>
Feedback
</div>
<div id='search'>
Search
<br>Search
<br>Search
<br>Search
<br>Search
<br>Search
<br>Search
<br>Search
<br>Search
<br>Search
<br>
</div>
<div id='suggestions'>
Suggestions
</div>
</div>
http://codepen.io/alucardu/pen/PPjRzY
You're encountering the flex equal height columns feature.
An initial setting of a flex container is align-items: stretch.
This means that flex items automatically expand the full length of the cross axis of the container. In a row-direction container, the cross axis is vertical (height).
The tallest item sets the height for all siblings. As the tallest item expands, its siblings follow along. Hence, equal height for all items.
To override this default setting, add align-items: flex-start to the flex container:
#container_add_movies {
display: flex;
align-items: flex-start;
}
#container_add_movies {
display: flex;
align-items: flex-start; /* NEW */
}
#container_add_movies #feedback {
width: 20%;
background-color: green;
display: block;
}
#container_add_movies #search {
width: 60%;
background-color: red;
}
#container_add_movies #suggestions {
width: 20%;
background-color: yellow;
}
<div id='container_add_movies'>
<div id='feedback'>Feedback</div>
<div id='search'>
Search<br>Search<br>Search<br>Search<br>Search<br> Search
<br>Search<br>Search<br>Search<br>Search<br>
</div>
<div id='suggestions'>Suggestions</div>
</div>
... or align-self: flex-start to the flex items:
#feedback {
align-self: flex-start;
width: 20%;
background-color: green;
}
#suggestions {
align-self: flex-start;
width: 20%;
background-color: yellow;
}
#container_add_movies {
display: flex;
}
#container_add_movies #search {
width: 60%;
background-color: red;
}
#feedback {
align-self: flex-start; /* NEW */
width: 20%;
background-color: green;
}
#suggestions {
align-self: flex-start; /* NEW */
width: 20%;
background-color: yellow;
}
<div id='container_add_movies'>
<div id='feedback'>Feedback</div>
<div id='search'>
Search<br>Search<br>Search<br>Search<br>Search<br> Search
<br>Search<br>Search<br>Search<br>Search<br>
</div>
<div id='suggestions'>Suggestions</div>
</div>
align-items sets the default value of align-self. With align-self you can override the default on individual items.
More details in the spec:
8.3. Cross-axis Alignment: the align-items and align-self
properties
Flex items can be aligned in the cross axis of the current line of the
flex container, similar to justify-content but in the perpendicular
direction.
align-items sets the default alignment for all of the flex
container’s items, including anonymous flex items.
align-self allows this default alignment to be overridden for
individual flex items.
A bit of history
Since the beginnings of CSS, there have been two layout challenges that have regularly frustrated, perplexed, and annoyed front-end developers:
How to center things, especially vertically, and
How to create equal height columns (tables aside)
Today, with the advent of flexbox, these problems are over.
Centering things has never been easier:
#container {
display: flex;
justify-content: center; /* center flex items along the main axis */
align-items: center; /* center flex items along the cross axis */
}
Simple. Easy. Efficient. The craziness is over.
In terms of equal height columns, flexbox also excels: It does this by default.
#container {
display: flex;
flex-direction: row; /* not even necessary; default rule */
align-items: stretch; /* not even necessary; default rule */
}
The align-items: stretch rule tells flex items to expand along the cross-axis as much as possible. Hence, in a row-direction container all items can be equal height. More craziness tamed by flexbox.
From one popular answer for equal height columns:
Give overflow: hidden to the container and large (and equal)
negative margin and positive padding to columns. Note that this
method has some problems, e.g. anchor links won't work within your
layout.
Now that's a hack!
The pendulum is now beginning to swing the other way: Designers are asking how to TURN OFF equal height columns.
You can add align-items: flex-start to your #container_add_movies. Here's an example
to have the unequal columns in bootstrap 4, first of all it needs to know how it is making it equal heights of the columns,so the reason is the
align-items: stretch
to remove this property it need to add align-items: flex-start so for this I have added the class="align-items-start" and the issue is fixed,
Setting the child element that was causing the problem to flex:none did the trick for me.
I have three elements I'm trying to align in my layout.
First, I have a div for feedback, and then a search input, and then a div element for suggestions.
I want the first and last element to have a width of 20%, and the search input to have a width of 60%. Using Flexbox I achieve what I want.
But there's a feature that grows all the divs to the highest element. This means that when search results pop up, the feedback and suggestion elements grow in height with the search div resulting in a messed up layout.
Is there a trick to not grow the divs with the highest element? Just make the divs (#feedback and #suggestions) have the height of the content in them?
#container_add_movies {
display: flex;
}
#container_add_movies #feedback {
width: 20%;
background-color: green;
}
#container_add_movies #search {
width: 60%;
background-color: red;
}
#container_add_movies #suggestions {
width: 20%;
background-color: yellow;
}
<div id='container_add_movies'>
<div id='feedback'>
Feedback
</div>
<div id='search'>
Search
<br>Search
<br>Search
<br>Search
<br>Search
<br>Search
<br>Search
<br>Search
<br>Search
<br>Search
<br>
</div>
<div id='suggestions'>
Suggestions
</div>
</div>
http://codepen.io/alucardu/pen/PPjRzY
You're encountering the flex equal height columns feature.
An initial setting of a flex container is align-items: stretch.
This means that flex items automatically expand the full length of the cross axis of the container. In a row-direction container, the cross axis is vertical (height).
The tallest item sets the height for all siblings. As the tallest item expands, its siblings follow along. Hence, equal height for all items.
To override this default setting, add align-items: flex-start to the flex container:
#container_add_movies {
display: flex;
align-items: flex-start;
}
#container_add_movies {
display: flex;
align-items: flex-start; /* NEW */
}
#container_add_movies #feedback {
width: 20%;
background-color: green;
display: block;
}
#container_add_movies #search {
width: 60%;
background-color: red;
}
#container_add_movies #suggestions {
width: 20%;
background-color: yellow;
}
<div id='container_add_movies'>
<div id='feedback'>Feedback</div>
<div id='search'>
Search<br>Search<br>Search<br>Search<br>Search<br> Search
<br>Search<br>Search<br>Search<br>Search<br>
</div>
<div id='suggestions'>Suggestions</div>
</div>
... or align-self: flex-start to the flex items:
#feedback {
align-self: flex-start;
width: 20%;
background-color: green;
}
#suggestions {
align-self: flex-start;
width: 20%;
background-color: yellow;
}
#container_add_movies {
display: flex;
}
#container_add_movies #search {
width: 60%;
background-color: red;
}
#feedback {
align-self: flex-start; /* NEW */
width: 20%;
background-color: green;
}
#suggestions {
align-self: flex-start; /* NEW */
width: 20%;
background-color: yellow;
}
<div id='container_add_movies'>
<div id='feedback'>Feedback</div>
<div id='search'>
Search<br>Search<br>Search<br>Search<br>Search<br> Search
<br>Search<br>Search<br>Search<br>Search<br>
</div>
<div id='suggestions'>Suggestions</div>
</div>
align-items sets the default value of align-self. With align-self you can override the default on individual items.
More details in the spec:
8.3. Cross-axis Alignment: the align-items and align-self
properties
Flex items can be aligned in the cross axis of the current line of the
flex container, similar to justify-content but in the perpendicular
direction.
align-items sets the default alignment for all of the flex
container’s items, including anonymous flex items.
align-self allows this default alignment to be overridden for
individual flex items.
A bit of history
Since the beginnings of CSS, there have been two layout challenges that have regularly frustrated, perplexed, and annoyed front-end developers:
How to center things, especially vertically, and
How to create equal height columns (tables aside)
Today, with the advent of flexbox, these problems are over.
Centering things has never been easier:
#container {
display: flex;
justify-content: center; /* center flex items along the main axis */
align-items: center; /* center flex items along the cross axis */
}
Simple. Easy. Efficient. The craziness is over.
In terms of equal height columns, flexbox also excels: It does this by default.
#container {
display: flex;
flex-direction: row; /* not even necessary; default rule */
align-items: stretch; /* not even necessary; default rule */
}
The align-items: stretch rule tells flex items to expand along the cross-axis as much as possible. Hence, in a row-direction container all items can be equal height. More craziness tamed by flexbox.
From one popular answer for equal height columns:
Give overflow: hidden to the container and large (and equal)
negative margin and positive padding to columns. Note that this
method has some problems, e.g. anchor links won't work within your
layout.
Now that's a hack!
The pendulum is now beginning to swing the other way: Designers are asking how to TURN OFF equal height columns.
You can add align-items: flex-start to your #container_add_movies. Here's an example
to have the unequal columns in bootstrap 4, first of all it needs to know how it is making it equal heights of the columns,so the reason is the
align-items: stretch
to remove this property it need to add align-items: flex-start so for this I have added the class="align-items-start" and the issue is fixed,
Setting the child element that was causing the problem to flex:none did the trick for me.
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>