I'm using flex box to make a layout for my products list but when I try to set justify-content to be space-between it works well on 4 items scenario but for less items (2 or 3) the space between them grows so how I set the space between items to be the same regardless the number of items in the row?
.productsContainer {
background-color: $color_1;
display: inline-flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-between;
}
.product {
flex-basis: 23%;
border: 1px solid $color_2;
display: flex;
flex-direction: column;
padding: 10px 15px;
margin-bottom: 20px;
}
Screenshot
justify-content: space-between;
will divide the remaining container space into equal width chunks between your elements, you can not set the spacing.
I would recommend trying the grid layout for this kind of card placement.
Something like this should do it:
.productsContainer {
background-color: $color_1;
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: auto;
grid-gap: 15px;
}
Change to:
justify-content: center;
and add gap property:
gap: 10px;
and play with the gap.
Related
I have placed two divs in a flex-direction row with a gap of 70px as shown in the figure:
In the above picture, we could see the date to be 8/12/22 but when we change the date to 12/12/22 the gap between the divs(i.e date and step counts) slightly increases due to the extra digit added to the date. This gives a very bad user experience.
Here is the code:
JS
<div className="DataAreaParent">
<div className="DataParent">
<span id="XAxisData" className="SpanText"></span>
<b className="BoldText">{props.xAxis} </b>
</div>
<div className="DataParent">
<span id="YAxisData" className="SpanText"></span>
<b className="BoldText">{props.yAxis}</b>
</div>
</div>
CSS:
.DataAreaParent {
display: flex;
flex-direction: row;
gap: 70px;
margin: auto;
padding: 10px 30px 10px 30px;
}
.DataParent {
display: flex;
flex-direction: column;
}
.BoldText {
color: gray;
}
.SpanText {
font-size: 1.5rem;
font-weight: bolder;
}
Please guide me on how the gap will not change even though digits in the date increase or decrease.
.DataAreaParent{
display: flex;
flex-direction: row;
# You can this line to set the auto gap between flexed container.
justify-content: space-between;
gap: 70px;
margin: auto;
padding:10px 30px 10px 30px;
}
It happens because of the fixed gap and the width is not assigned to .DataAreaParent.
Remove the fixed gap and add the width in .DataAreaParent like,
.DataAreaParent {
display: flex;
flex-direction: row;
justify-content: space-between;
/* gap: 70px; */
width: 100px;
margin: auto;
padding: 10px 30px 10px 30px;
}
Also, add min-width to date and align it to the left of its container. It will solve your problem.
.DataParent {
display: flex;
flex-direction: column;
min-width: 58px;
align-items: flex-end;
}
This question already has answers here:
Centering in CSS Grid
(9 answers)
Closed 1 year ago.
How can I center a grid column? This is my current code
.example-grid {
display: grid;
justify-content: center;
align-items: center;
grid-template-columns: repeat(5, 1fr);
}
However, all the grid items are aligned to the left.
section {
width: 400px;
height: 400px;
border:1px solid #ccc;
display: grid;
justify-content: center;
align-content: center;
gap: 4px;
grid-auto-flow: column;
}
div{
background:#777;
color:#fff;
padding: 30px;
}
<section>
<div>1</div>
<div>2</div>
<div>3</div>
</section>
Instead of align-items: center;, you have to use align-content: center;.
Everything else looks fine :)
align-items property is a Flexbox property not a CSS-Grid property
Your display property must be inline-grid instead of grid.
I've made a table-like flex structure, that looks pretty nice and has adaptive number of cells, but when last row isn't full - it stretches remaining cells to full size, which looks unshapely.
https://jsfiddle.net/zzmaster/6uw4gm3t/3/
(you need to enlarge results area to maximum in order to see this)
Logically, justify-content: flex-start; should fix this, but it doesn't.
Is there any way to turn remained cells back to their's place?
You can fix with remove flex: 1 1 0px CSS style. Replace below code with your current code.
ul.text {
display: flex;
justify-content: flex-start;
flex-wrap: wrap;
}
ul.text li {
min-width: 300px;
display: inline-flex;
}
change your css like below!
ul.text {
display: flex;
justify-content: flex-start;
flex-wrap: wrap;
}
ul.text li {
min-width: 300px;
display: inline-flex;
flex: 1 1 0px;
justify-content: center;
align-items: center;
resize: both;
}
When I set flex-container height larger than what flex-items would occupy, items that wrap, have space between them. Mind you - justify-content and align-items are both set to flex-start. Here is snippet (click on full page after run)
.flex-container {
min-height: 100vh;
position: relative;
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: flex-start;
flex-wrap: wrap;
}
header,
main,
aside,
footer {
padding: 1rem;
background-color: tomato;
}
header,
footer {
width: 100%;
}
main {
width: 75%;
}
aside {
flex-grow: 1;
}
<div class="flex-container">
<header>Header Content</header>
<main>Main content here.</main>
<aside>Sidebar content</aside>
<footer>Footer Content</footer>
</div>
Here's the pen
This can be reproduced with flex-direction: column; if you reversed all the properties. Is this expected behavior? If so, why? Is there a way I came around this and get something like that:
with the flex-container height set to 100vh ?
The correct answer without adding extra markup, is align-content: flex-start; - default is stretch, that's why wrapping elements have extra space between them, when the flex-container's size exceeds the size of the elements in it.
If I good understand your question - you can add following div .wrappper inside flex-container
.wrapper {
position: relative;
display: flex;
justify-content: flex-start;
align-items: flex-start;
flex-wrap: wrap;
flex-basis: 100%;
}
body {margin: 0}
.wrapper {
position: relative;
display: flex;
justify-content: flex-start;
align-items: flex-start;
flex-wrap: wrap;
flex-basis: 100%;
}
.flex-container {
min-height: 100vh;
position: relative;
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: flex-start;
flex-wrap: wrap;
}
header,
main,
aside,
footer {
padding: 1rem;
background-color: tomato;
}
header,
footer {
width: 100%;
background-color: blue;
}
main {
flex-basis: 75%;
flex-grow: 1;
background-color: yellow;
}
aside {
flex-grow: 1;
}
<div class="flex-container">
<div class="wrapper">
<header>Header Content</header>
<main>Main content here.</main>
<aside>Sidebar content</aside>
<footer>Footer Content</footer>
</div>
</div>
Explanation what previous solution doesn't wokrs: because the height of your flex items was set to 1rem+font size, and the align-items: flex-start; was set so flex not change items height but put them on proper place (flex-start). But if you would use align-items: streth; then flex will stretch elements. Because you want to have 100vh for .flex-container, we need to use wrapper which was not stretched to full height of container because container has still align-items: flex-start;. And that wrapper height is sum of his chidren height without extra space.
This is a nicely centered grid, but I want the 4 columns to go down to 2 for mobile. What should I add?
body {
display: grid;
align-items: center;
justify-items: center;
background: grey;
max-width: 56em;
}
ul {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-gap: 3em;
margin: 0 auto;
max-width: 64em;
}
li {
display: grid;
align-items: center;
justify-content: center;
list-style: none;
}
You have to add changes of css when the screen is narrow. Using:
#media screen and (max-width: ???px){}
And in the block you add rules like in normal css which should change when width of screen is less than given value. I suppose it will be enough for you to deal with this. If you need more information (e.g. new values) write comments and I will try to answer them.
Examples