I want to create a website, part of which has two elements in a container: title text and a button. I want to place them in the center of the main axis (the container), with some space between them. I don't like the justify-content: space-around option because it leaves too much space in the middle. So to do this, I would use left/right margins for each of the elements. But I also want to use flex-wrap: wrap;, meaning that if the screen size is too small to fit both of the elements, css would transfer the button to the next line. Every time this happens however, the margin-left still remains on the button, so it looks off-centered (see image).
Any ideas? Thanks.
EDIT: Using media queries messes things up, so my new question is this: Is there a way to make the space between two centered elements hold constant to all screen sizes without margins?
You can set the margin only for bigger screen sizes using CSS media queries
You're probably looking for justify-content: space-evenly in combination with text-align: center, align-items: center, and flex-wrap: wrap. This will separate the content out evenly, whilst simultaneously allowing it to wrap around without any margins when the viewport isn't wide enough to contain both elements.
.container {
display: flex;
align-items: center;
justify-content: space-evenly;
text-align: center;
flex-wrap: wrap;
border: 1px solid black;
height: 100px;
/*max-width: 80px;*/ /* Turn on to see the wrap */
}
.content {
flex: 1;
}
<div class="container">
<div class="content">content</div>
<div class="content">content</div>
</div>
Related
I have a split screen, with a fixed right side. Left hand side will be a markdown editor, but with different configurations and styles to add to the output text.
Whereas the right hand side will basically be a preview. Left hand side is scrollable, and right hand side isn't.
After completing the form, users will be able to print out whatever they create basically. So to preview this, I created a content div (that will be printed out) with 210mm x 297mm dimensions to mimic A4 format.
What I want to do is to shrink it down using scale, to show the entire preview of the page to the user, but I want to have it vertically centered.
Here is the sandbox for it:
https://codesandbox.io/s/silly-cloud-cgsnd0?file=/index.html
And to see the actual issue, just uncomment width, height and scale, within content class.
I agree with Paulie_D.
Always give direct code snippets, in this case scale doesn't matter for you, flexbox is a responsive tool, and question is actually just how do you center that div in your setup.
To give others context this is the setup:
<div class="main-col second">
<header>...</header>
<main>
<div class="content">...</div>
</main>
<footer>...</footer>
</div>
.main-col.second {
display: flex;
align-items: center;
flex-direction: column;
background-color: #cccccc;
height: 100vh;
position: fixed;
right: 0;
top: 0;
}
.main-col.second main {
flex-grow: 1;
}
You have two options:
Apply flex-box to the main element inside the .second div.
.main-col.second main {
flex-grow: 1;
display: flex;
flex-direction: column;
justify-content: center;
}
Or remove the entire styling for the selector .main-col.second main and add justify-content: space-between to your .main-col.second selector.
so for responsiveness, I have created a flexbox and placed some images inside but for some reason, I am not able to place all the images in the same line. written below is my CSS code. the container-project is the class for the div in which I am placing all the images and the project-img class is the class for every image placed inside the div.
.container-projects{
display: flex;
flex-wrap: wrap;
justify-content: space-around;
}
.project-img{
width: 25%;
height: auto;
border-radius: 30px;
padding: 20px;
}
I see two issues.
One is that you've set flex-wrap to wrap which means that flex items will wrap onto multiple lines, from top to bottom. Try setting it to nowrap instead.
The second depends on how many images you're trying to put in the line. If it's 4 then you're fine, otherwise you want to change the width: 25%; to a different value as at the moment it will be dividing the width of the containing area in to 4. You might want to look into the flex-basis property instead. It defines the default size of an element before the remaining space is distributed.
Add align-items: center;
.container-projects{
display: flex;
flex-wrap: wrap;
justify-content: space-around;
align-items: center;
}
First Edit: if i use align-items: stretch; I am able to stretch my flex items, I don't know what to make of it, but I was playing around with it, and thought I should add this info as edit as well, align-items: stretch value, stretching the flex items.
Second edit : Ok may be i am not clear, i am not looking for solution, i just want to know why it's not streching with justify-content, that's it, i can solve this problem my self, by editing the code, but i want to know the reason, why it is acting the way its acting.
I already read this answer Flex item not filling screen height with "align-items: stretch"
But my problem is different, as soon as I add align-items, flex-items stop stretching, before adding this property they work fine, I know I can solve this problem by adding height to 100%, but I am not interested in that, I want to know why it's behaving this way.
Note: I am using chrome
My code please read the comment, in the code
.container {
font-size: 36px;
height: 800px;
border: 1px solid black;
display: flex;
flex-wrap: wrap;
align-items: center;
/* as soon as i add this align-items property or my items
stop streching, i don't get it, if use value stretch it streches
the my items, please read the note first edit in the question,
it is at the top */
align-content: stretch;
}
.box {
width: 400px;
color: #fff;
}
.box1 {
background: blue;
}
.box2 {
background: red
}
.box3 {
background: yellow
}
.box4 {
background: black
}
<div class="container">
<div class="box box1">Home</div>
<div class="box box2">Menu</div>
<div class="box box3">About Us</div>
<div class="box box4">Contact Us</div>
</div>
Your box items can't both stretch and center at the same time.
Combining align-items and align-content won't make that happen as align-items applies on flex items on a single row and align-content when they wrap.
Note, you don't need to add align-items/content and set their value to stretch, it is their default
As for a solution, setting the box to height: 100% will make them look stretched, though will give a completely different result compared to make use of the align-items/content's stretch value.
With a fixed height they will be that set height, no matter if there will be 2 or more rows, with stretch whey will adjust their height to fit their parent. Simply put, 2 rows will make them 50% high, 3 rows 33.33% high and so on.
Assuming it is the text in the box you want centered, along with the box to stretch, simply make the box a flex container too.
Add display: flex; align-items: center to the box and it likely will layout the way you want.
If you want the text to also center horizontally, I here added justify-content: center;, which you can either keep or remove.
.container {
font-size: 36px;
height: 800px;
border: 1px solid black;
display: flex;
flex-wrap: wrap;
}
.box {
width: 400px;
color: #fff;
display: flex;
align-items: center; /* vertically center */
justify-content: center; /* horizontally center */
}
.box1 {
background: blue;
}
.box2 {
background: red
}
.box3 {
background: yellow
}
.box4 {
background: black
}
<div class="container">
<div class="box box1">Home</div>
<div class="box box2">Menu</div>
<div class="box box3">About Us</div>
<div class="box box4">Contact Us</div>
</div>
add flex-grow to the columns, they will auto stretch.
Dont include a height or a width.
You need to use stretch value for align-items property if you want to stretch the items, not center value. So if you just change align-items:center; to align-items:stretch; it will solve your problem.
https://codepen.io/julysfx/pen/weVvpp
I'm not sure if you are trying to align the boxes to the center and stretch? You should try adding justify-content:center to the .container:
justify-content: center;
Working pen with markup and css you added: https://codepen.io/anon/pen/dRxyVG
align-items will align your boxes up along the cross axis, whereas justify-content will align them along the main axis.
align-content is more like adjusting the rows or columns in relation to the flex container. The vertical direction if flex-direction is row, and horizontal if flex-direction is column. Using align-items is adjusting the row's items on the main axis, you might be able to see how they interact a little better if you make the content random sizes: https://codepen.io/anon/pen/weVBBE
When you're setting align-items:center; you're telling the items to align to the center, and they aren't going to stretch.
If you're trying to get the text in the middle of the boxes and have them stretch, you need to apply that to the children ie .box of the .container:
https://codepen.io/anon/pen/LLwEGW
Remove height and width from your code. If you want to use the stretch value in the align-items property of display flex you must need to assure that you had not given pre-defined value. In that case it will neglect the values given in align items and run the code.
I was wondering how to justify how much space is allowed in justify-content: space-between for flexbox.
Currently, my items are spaced but they have way too much space between them I want just a little space between them so they can settle somewhere in the middle in a row.
The snippet below will hopefully clarify what I'm struggling with.
Let me know if you need me to clarify further. Thanks!
#qwrapper {
display: flex;
height: 100%;
width: 100%;
align-items: center;
justify-content: center;
}
.row {
flex: 0 auto;
height: 100px;
margin: 0;
}
#lighticon {
padding-bottom: 30px;
}
#media (max-width: 800px) {
#qwrapper {
flex-direction: column;
align-items: center;
}
}
#media screen and (max-width: 480px) {
#qwrapper {
flex-wrap: wrap;
}
.row {}
}
#media only screen and (min-width: 760px) {
#qwrapper {
justify-content: space-between;
margin: 10px;
}
#lighticon {
position: relative;
margin-left: 100px;
}
}
<div id="qwrapper">
<h3 id="michelle" class="row">"She always thinks of her clients."
<br>
</h3>
<img src="https://cdn4.iconfinder.com/data/icons/black-icon-social-media/512/099310-feedburner-logo.png" class="row" alt="" id="lighticon" />
<h3 id="jerry" class="row">"Very smart, creative person, problem solver."
<br>
</h3>
</div>
The justify-content property uses the available space on the line to position flex items.
With justify-content: space-between, all available space is placed between the first and last items, pushing both items to opposite edges of the container.
You wrote:
I was wondering how to justify how much space is allowed in justify-content: space-between for flexbox.
With space-between in row-direction, you would have to control the width of the flex container. So if you want there to be less space between flex items, then you would need to shorten the width of the container.
Or you could use justify-content: space-around.
However, these solutions are suboptimal.
The right way to go about this would be to use margins.
You wrote:
Currently, my items are spaced but they have way too much space between them I want just a little space between them so they can settle somewhere in the middle in a row.
Use justify-content: center then use margins to space them apart.
My solution was :
put dummy empty divs in between with a max-height specified
change space-between to flex-start
set the content blocks to nogrow
set the dummy divs to grow
Then the spaces grow up to a max specified.
The approach with using margins is not a universal solution if you want space-between, because it would set a margin on all the flex-elements, also on the first and last elements on a line or column. Using :first-child / :last-child/ :nth-child() selector doesn't help when flex-wrap: wrap is set, because you can never tell which elements will be first and last on a wrapped line or column.
A selector like :wrapped would be helpful, but sadly it doesn't exist.
So my conclusion is that when you really want to unleash the flexibility and responsiveness of the flexbox, you can't control the margins… Missed opportunity of the spec I'd say.
I find myself adding right margin to all the boxes (in this case three)
.three {
margin-right: 2%
}
and then getting rid of it so the last box aligns right
.three:nth-child(3) {
margin-right: 0%;
}
but every time I do this I think "there has to be a better way, something baked into flex-box...this works but it seems like a workaround?
I have a div that is display: flex with an unknown number of flex items. I want to use justify-content: space-between, but the problem is that when there is one item, it goes to the left side, whereas I want it to go to the center. Is there a CSS only solution to this?
#container {
display: flex;
justify-content: space-between;
}
<div id="container">
<div class='flex-item'></div>
...n flex-items...
</div>
Then I put some block elements in there (class-name - .flex-items) and due to justify-content: space-between, it makes the space go between the divs evenly so that the left-most div touches the left border and the right-most div touches the right border. It's responsive. My problem is that the default behavior when there is only one flex-item is that it is left aligned but I want it to be center aligned. What is a purely CSS solution?
Here's how you do it:
#container {
display: flex;
justify-content: space-between;
}
.flexItem:nth-child(1):nth-last-child(1) {
margin: 0 auto;
}