I am using a flexbox container that is using a row layout that wraps. Each of the items is exactly the same size (150x267 pixels). I have added a margin of 10px to each of the items to provide some space.
Flexbox does a great job of laying out the items but I am trying to get a layout so that whatever the viewport width, the spacing between each of the items is the same. Sometimes this occurs but at a width of about 1400px, there is noticeably a much larger gap between the images than the 10px margin on each end of the row.
My CSS is
div#imgcontainer {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-between;
font-size: 0;
}
div#imgcontainer img {
margin: 10px;
height: 150px;
}
You can see an example of the layout at 3-dot-timb-photos.appspot.com
Related
Sorry if this question is obvious and I am missing something. I am creating a site which has a flexbox container with elements inside it that wrap around. I want my items inside the container to stretch to the edge of the container to ensure there is the correct amount of whitespace. I can achieve this by using justify-content: space-between but when there is a row with more than one item and less than four they still must space themselves. How can I fix this problem? I don't want to use flex-start and adjust the margin between the items because that seems inaccurate and a problem for responsiveness. Below is my code for the flex container.
.clothingitems {
display: flex;
flex-flow: wrap;
justify-content: space-between;
width: 100%;
height: 100%;
background: white;
}
.clothingitem {
width: 265px;
height: 450px;
display: flex;
flex-flow: column;
}
There is a live website but beware the page I'm mentioning has not been made responsive. It can be found here: Site here
Thank you.
You could consider using a CSS grid for this, and using media breakpoints to make it responsive, instead of a horizontal flex with wrap. Here is an example of a grid with each column taking up 15% in width and 5% column-gap between them.
<div class="clothingitems">
<div class="clothingitem"></div>
<div class="clothingitem"></div>
...
</div>
.clothingitems {
display: grid;
grid-template-columns: 15% 15% 15% 15% 15%;
column-gap: 5%;
row-gap: 50px;
}
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>
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?
This question already has an answer here:
Remove space (gaps) between multiple lines of flex items when they wrap
(1 answer)
Closed 6 years ago.
I have a sidebar that is longer than the content (post previews with thumbnails).
I am using flexbox to build the layout and when the sidebar is longer than the previews, there is a huge gap in between.
I want each row to not have a gap in between as it would if the sidebar was nice and short.
I have thrown together a codepen.
//page wrapper for sidebar
.flexPageWrapper {
display:flex;
/* Centering the page */
max-width:1500px;
margin:0 auto;
}
//search results flexbox container
.searchContentWrap {
flex-grow: 1;
display: flex;
justify-content: flex-start;
flex-wrap: wrap;
margin-right: 1em;
flex-direction: row;
}
An initial setting of a flex container is align-content: stretch.
This means that multiple lines in a flex container will expand to cover the length (in this case, height) of the container.
The sidebar is increasing the height of the container, causing your thumbnail content to distribute over a taller space.
You can override this default behavior with align-content: flex-start.
.searchContentWrap {
flex-grow: 1;
display: flex;
justify-content: flex-start;
flex-wrap: wrap;
margin-right: 1em;
flex-direction: row;
align-content: flex-start; /* NEW */
}
Revised Codepen
The red borders are around flex items. They have
flex-grow: 1
These items are contained in a flex container:
width: 100%
display: flex
flex-direction: row
align-items: flex-end
As you can see the vertical alignment is working fine.
When I put the images in, the width of the images pushes the flex items to be bigger or smaller than they should be. The width of the images overrides the width of the flex items. What I want to say is something like:
Firstly make the flex items all the same size and then size the contained images (whatever their natural size) to be the size of their container (the flex item). I've tried width: 100% and width: auto on the images. Didn't help.
This image shows the equally spaced flex items (red borders). I want the images to fit into these boxes without causing the width of the box to change. This is the behaviour I get if I replace the flex items with table cells.
This Fiddle shows the 3 equal boxes: https://jsfiddle.net/justinwyllie/zdrd89gu/
.flex-container {
display: flex;
flex-direction: row;
align-items: flex-end;
}
.flex-boxes {
flex-grow: 1;
border: 2px solid red;
}
<div class="flex-container">
<div class="flex-boxes">A</div>
<div class="flex-boxes">B</div>
<div class="flex-boxes">C</div>
</div>
This one shows an image in the middle flex item. It has completely messed up the equal boxes. The question is what do I need to do to make the cat fit into the middle box? (Fit width-wise that is; i don't mind about height).
https://jsfiddle.net/justinwyllie/zdrd89gu/1/
.flex-container {
display: flex;
flex-direction: row;
align-items: flex-end;
}
.flex-boxes {
flex-grow: 1;
border: 2px solid red;
}
.cat {
width: auto;
}
<div class="flex-container">
<div class="flex-boxes">A</div>
<div class="flex-boxes">
<img class="cat" src="http://www.publicdomainpictures.net/pictures/30000/velka/annoyed-cat.jpg" />
</div>
<div class="flex-boxes">C</div>
</div>
The flex-grow property tells flex items how much available space in the container to consume.
In your second image, the empty items are all equal width because flex-grow: 1 tells them to distribute available space equally among themselves.
Any content you put in these items will impact flex-grow since, as mentioned, flex-grow is based on the free space in the container – and content consumes space.
If you want the items to maintain a fixed width, use flex-basis.
So instead of:
flex-grow: 1;
Try:
flex: 0 0 20%; /* don't grow, don't shrink, fixed width at 20% */
The 20% is just an example, if you wanted five items per row.
Here's your revised code:
jsFiddle
.flex-container {
display: flex;
flex-direction: row;
align-items: flex-end;
}
.flex-boxes {
/* flex-grow: 1; <-- REMOVE */
flex: 0 0 33.33%; /* NEW */
border: 2px solid red;
/* box-sizing: border-box; you may need to add this property if
you enable wrapping */
}
.cat {
width: auto;
/* vertical-align: bottom; add this property if you want to remove
the small gap of whitespace underneath images
https://stackoverflow.com/a/31445364/3597276 */
}
<div class="flex-container">
<div class="flex-boxes">A</div>
<div class="flex-boxes">
<img class="cat" src="http://www.publicdomainpictures.net/pictures/30000/velka/annoyed-cat.jpg" />
</div>
<div class="flex-boxes">C</div>
</div>
Learn more here:
flex-grow not sizing flex items as expected