This question already has answers here:
How can I horizontally center an element?
(133 answers)
Closed 3 years ago.
I want to have a max 1100px div with spacebetween items but if i center .menu, space between isnt work...
What i can do? (or margin auto?)
.navbar {
display: flex;
justify-content: center;
}
.menu {
max-width: 1100px;
background: red;
display: flex;
justify-content: space-between;
}
<div class="navbar">
<div class="menu">
<img src="https://www.colacao.es/img/logo.png" width="56px" height="50px">
<div>
Services
Pricing
Blog
Contacts
</div>
Log In
</div>
</div>
Since .menu is a block-level element, it is naturally going to take up the maximum width of the row (100%). Therefore, you can set max-width on the element, to limit this behavior and stop at 1100px, or 100%, whichever comes first. As Temani mentioned above, you can center the enter element using margin: auto. I wrote out the margins longhand, since you are concerned with adding auto to only the left and right margins (no need to set top and bottom).
.menu {
display: flex;
max-width: 1100px;
background: red;
display: flex;
justify-content: space-between;
margin-left: auto;
margin-right: auto;
}
<div class="navbar">
<div class="menu">
<img src="https://www.colacao.es/img/logo.png" width="56px" height="50px">
<div>
Services
Pricing
Blog
Contacts
</div>
Log In
</div>
</div>
Related
This question already has answers here:
Flexbox: center horizontally and vertically
(14 answers)
How can I vertically align elements in a div?
(28 answers)
How can I center text (horizontally and vertically) inside a div block?
(27 answers)
In CSS Flexbox, why are there no "justify-items" and "justify-self" properties?
(6 answers)
Closed 2 years ago.
In a header top banner:
#header { background-color: #eaeaea; }
#header a { display: inline-block; margin-right: 1.5em; }
.logo { margin-right: 6em; }
<div id="header">
<img src="https://via.placeholder.com/150x120" class="logo">
Lorem
Ipsum
Contact
</div>
what are the main methods used nowadays to center the 3 right links vertically inside the banner?
I know how to do it with position: relative; top:-...px or similar methods or even <table>, but what would be considered nowadays as the most appropriate methods, especially for responsive design?
Would you use flex features for this? If so, how?
I also want stick the group of 3 links to the right border of the screen, such that, if we resize the browser width, it always stays floating along the right border. I was about to use float: right but there's probably a better solution than mixing flex and float?
PS: These last details are not in the linked questions Flexbox: center horizontally and vertically and How to Vertical align elements in a div?, thus it's not a duplicate.
Personnaly i would use flex with align-items:center for responsive design.
See the code below:
#header{
background-color: #eaeaea;
display:flex;
align-items:center;
justify-content:space-between;
}
#header a{
display: inline-block;
margin-right: 1.5em;
}
.logo{
margin-right: 6em;
}
<div id="header">
<img src="https://via.placeholder.com/150x120" class="logo">
<div id="links">
Lorem
Ipsum
Contact
</div>
</div>
When it comes to vertical centering of text and items, this trick comes in handy:
#header {
display: flex;
align-items: center;
}
A more reliable (albiet complicated) method is to use a grid wrapper
.center {
display: grid;
grid-template-areas: 'a b c';
grid-template-rows: 1fr max-content 1fr;
}
.center > * {
grid-area: b
}
<div id="header">
<img src="https://via.placeholder.com/150x120" class="logo">
<a class="center" href=""><span>Lorem</span></a>
<a class="center" href=""><span>Ipsum</span></a>
<a class="center" href=""><span>Contact</span></a>
</div>
If you don't care about old browsers (IE), you can use place-items, instead of align-items.
#header{
background-color: #eaeaea;
display: flex;
place-items: center;
}
#header a{
display: inline-block;
margin-right: 1.5em;
}
.logo{
margin-right: 6em;
}
<div id="header">
<img src="https://via.placeholder.com/150x120" class="logo">
Lorem
Ipsum
Contact
</div>
Quoting from https://developer.mozilla.org/en-US/docs/Web/CSS/place-items:
The CSS place-items shorthand property allows you to align items along both the block and inline directions at once (i.e. the align-items and justify-items properties) in a relevant layout system such as Grid or Flexbox. If the second value is not set, the first value is also used for it.
I have a full viewport width, full viewport height "hero image" on a homepage. I've made this a Flex container. Inside the flex container is one child div (containing a heading). This flex item should be aligned to the bottom of the flex container. It has a max-width and should be horizontally centered inside the parent.
However, the max-width is being ignored. The div is taking the width of its content - the heading. Please see JS Fiddle: https://jsfiddle.net/4h7q6d5x/
As you can see the .main div inside the hero image is taking the width of its content - unlike the .main div below the hero image.
I have looked at various questions, including this one max-width not working on flex item
But adding width:100% to the flex item doesn't work. At smaller viewport sizes the the width and padding don't play nicely and the heading is cropped off the right hand edge.
How do I get max-width to work with Flexbox?
.hero_image {
min-height: 100vh;
background-color:yellow;
display: flex;
flex-direction: column;
justify-content: flex-end;
}
.main {
max-width:500px;
margin:0 auto;
padding:0 50px;
background-color:pink;
}
<div class="hero_image">
<div class="main">
<h1>Heading <br>couple of words</h1>
</div>
</div>
<div class="main">
<p>Lots of content</p>
</div>
The default "width" (actually flex-basis) inside flex-containers is auto which makes it only as wide as it's content.
But adding width:100% to the flex item doesn't work. At smaller viewport sizes the the width and padding don't play nicely and the heading is cropped off the right hand edge.
Then I'd suggest a couple of changes. Don't use a flex-column but position your .main div using align-items:flex-end.
Then set the default "width" (actually flex-grow) with flex: 1.
.hero_image {
min-height: 50vh;
/* for example */
background-color: yellow;
display: flex;
align-items: flex-end;
justify-content: center;
}
.main {
flex: 1;
max-width: 50%;
/* for example */
margin: 0 auto;
padding: 0 50px;
background-color: pink;
}
<div class="hero_image">
<div class="main">
<h1>Heading <br>couple of words</h1>
</div>
</div>
<div class="main">
<p>Lots of text</p>
</div>
Why does the code below not stretch my 100px items?
The results are basically close to this:
[100px|100px|100px|.........]
That looks a lot like flex-start, not flex-stretch. Is this the intended behavior?
I'm looking for:
[...100px...100px...100px...]
.box {
display: flex;
justify-content: stretch;
width: 500px;
}
.item {
width: 100px;
}
<div class="box">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
</div>
Because - if you want the items to stretch in width - you have to allow the flex items to grow by adding flex-grow: 1;:
.box {
display: flex;
justify-content: stretch;
width: 500px;
border: 1px solid red;
}
.item {
width: 100px;
border: 1px solid green;
flex-grow: 1;
}
<div class="box">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
</div>
If you don't mean they should grow, but simply be distributed across the whole width of their container, use justify-content: space-between od ... space-around:
.box {
display: flex;
justify-content: space-around;
width: 500px;
border: 1px solid red;
}
.item {
width: 100px;
border: 1px solid green;
}
<div class="box">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
</div>
Why doesn't justify-content: stretch work?
Because in flexbox there is no such value with justify-content.
See MDN: stretch is not supported by flexible boxes (flexbox).
So your rule is invalid and the browser defaults to justify-content: flex-start, the initial setting.
Use the flex-grow property on flex items to achieve the desired effect.
Well, simply put, in order for flex-stretch to kick in, it requires combined item width to be equal or greater than the flex container. In other words, you can use 500px or even something as obscure as 10000px. And it will stretch proportionately. Usually, though... to battle this problem we use 100% on each item. This assumes 100% of the component, but again... if your container is 500px, that's what 100% will equal to. Use that or greater values.
When I was learning flex I found this simple flex generator invaluable, I think it covers the case you're talking about visually.
Yes, it is supposed to look like that for flex containers, flex-start is used instead of flex-stretch. Here is what W3C states about justify-content:stretch
The justify-content property applies along the main axis, but since
stretching in the main axis is controlled by flex, stretch behaves as
flex-start.
Also, I might be late in answering the question but MDN has also updated their page about justify-content. See the notes under stretch property MDN
An alternative way to space out items evenly is:
.class {
display: flex;
justify-content: space-between;
}
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;
}
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>