I have a grid of product tiles I'm displaying with flex to be equal height based on this codepen: https://codepen.io/imohkay/pen/gpard
They are 3-wide. However, on the last "row" when there is only 2 tiles left, the last tile gets pushed to the right as if there were 3 tiles. I can't figure out the right css setting to make it be in the second column.
Screenshot: https://pasteboard.co/Hk699jP.png
#products {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
align-content: stretch;
}
.product {
width: 33.3%;
}
They're pushed from each-other because you're using the space-between option on the justify-content property.
Either change space-between to flex-start or switch the display to a grid layout.
Fiddle (flex-box https://jsfiddle.net/swordys/db7dzkcx)
Fiddle (grid https://jsfiddle.net/swordys/65cyr3tu/)
Related
I am trying to have a number of items underneath each other in a container with a set height. Items will then carry on next to each other if there's no space left.
This is the idea:
I am trying to achieve this using flexbox, a container with a set height, direction is set to column and flex-wrap is wrap:
The issue is that there are wide gaps between the columns.
I tried setting both justify-content and align-items to flex-start, but that is probably the default value.
Is there any way to solve this?
Here is the code:
* {
box-sizing: border-box;
}
body {
font-family: sans-serif;
}
.container {
display: flex;
flex-wrap: wrap;
height: 300px;
flex-direction: column;
background-color: #ccc;
}
.items {
width: 100px;
height: 100px;
margin: 10px;
background-color: tomato;
color: white;
font-size: 60px;
font-weight: bold;
text-align: center;
padding: 15px;
}
<div class="container">
<div class="items">1</div>
<div class="items">2</div>
<div class="items">3</div>
<div class="items">4</div>
<div class="items">5</div>
</div>
codepen
An initial setting of a flex container is align-content: stretch.
This means that multiple lines of flex items will be distributed evenly along the cross axis.
To override this behavior, apply align-content: flex-start to the container.
When you're working in a single-line flex container (i.e., flex-wrap: nowrap), the properties to use to distribute space along the cross axis are align-items and align-self.
When you're working in a multi-line flex container (i.e., flex-wrap: wrap) – like in the question – the property to use to distribute flex lines (rows / columns) along the cross axis is align-content.
From the spec:
8.3. Cross-axis Alignment: the align-items and align-self properties
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.
8.4. Packing Flex Lines: the align-content
property
The align-content property aligns a flex container’s lines within the
flex container when there is extra space in the cross-axis, similar to
how justify-content aligns individual items within the main-axis.
Note, this property has no effect on a single-line flex container.
The align-content property takes six values:
flex-start
flex-end
center
space-between
space-around
stretch
Here's the definition for stretch:
stretch
Lines stretch to take up the remaining space. If the leftover free-space is negative, this value is identical to flex-start. Otherwise, the free-space is split equally between all of the lines, increasing their cross size.
In other words, align-content: stretch on the cross axis is similar to flex: 1 on the main axis.
I am trying to left align items in a flexbox like so. However i cannot get them to align like in a grid display, ive tried all the flexbox properties but can only get it to work using a grid, but i cannot use a grid here.
Here is the code i have:
CSS
.container {
display: flex;
align-items: center;
justify-content: space-between;
text-align:left;
}
I need all text to align left by the red line.
It is needed to fix the width of each items to align the position.
Try to add flex-basis css property to all child styles.
So if the above style is something like .list-item, then add this style to all childs like...
.list-item > div {
flex-basis: 25%;
}
Need help solving CSS Grid Critters 9.3
I can get the grid template lines to fit correctly, but the bottom row of items won't line up.
Here's what I've got:
planet {
display: grid;
grid-template-columns: auto auto;
grid-template-rows: 50% auto;
justify-content: space-evenly;
justify-items: end;
align-content: space-between;
}
But bottom row doesn't seem to fit. Tried applying styling to
dunes {}
and
water {}
But that just messed up the top row. Struggling going back and forth between lessons to no avail.
Finally, after reviewing previous lessons, it struck me. I needed to test out the align-items property.
This solution worked!
planet {
display: grid;
grid-template-columns: auto auto;
grid-template-rows: 50% auto;
justify-content: space-evenly;
justify-items: end;
align-content: space-between; /***this is the key***/
}
It turns out, that justify-content and align-content work together to control the space around content items aka "boxes" or "tracks". By default, justify-content handles left/right space whereas align-content handles top/bottom space.
On the other hand, justify-items and align-items control the actual position of the items inside the boxes or tracks. It's worth mentioning that align-items throws off the position of the top row, so don't use it. Justify-items fixes the top row without throwing off the bottom row.
See this fiddle.
I have a flex layout with flex-direction:column inside a container with height: 100vh. My flex layout container (the blue one) has to take the full height (height:100%) of the main container.
Given this context now I want to avoid flex elements overflow on the right when the viewport height is too small to contain all the elements.
So I want that all the viewport is blue and all my red elements inside the blue stay into a column.
I tried to set min-height:100vh , it works for letting have all my items in column but awkwardly my blue flex layout container no loger takes the full 100% height.
I can't change the html structure.
In .search-form {...} replace height: 100%; with min-height: 100%; so that it's allowed to grow larger than 100%.
Fiddle here
Given this context now I want to avoid flex elements overflow on the
right when the viewport height is too small to contain all the
elements.
So I want that all the viewport is blue and all my red elements inside
the blue stay into a column.
In the flex container (.flex-row) change flex-wrap: wrap to flex-wrap: nowrap.
.flex-row {
width: 100%;
display: flex;
/* flex-wrap: wrap; REMOVE */
flex-wrap: nowrap; /* NEW */
justify-content: space-around;
flex-direction: column;
align-items: center;
}
DEMO: http://jsfiddle.net/hxknmzfd/2/
flex-wrap
The CSS flex-wrap property specifies whether flex items are forced
into a single line or can be wrapped onto multiple lines.
I have a section of my website that I am using the CSS below on 2 divs, and one a tag in order to have the content vertically aligned in the center.
The problem is that with the flex style properties, when the window is < 768px ideally the content would change layout and each col-md-4 would stack on top of one another.
This is not happening, instead the columns just become really skinny and are displayed still side by side. Is there any way to fix this? Preferably trying to stay away from table-cell formatting
.about-us-nav {
display: flex;
align-items: center;
justify-content: center;
}
.about-us-nav a {
font-size: 20px;
color: #52361D;
background-color: #885A31;
border-color: #52361D;
width: 200px;
height: 100px;
display: flex;
align-items: center;
justify-content: center;
}
.how-help-container {
margin-top: -25px;
display: flex;
align-items: center;
justify-content: center;
position:absolute;
z-index: 2;
}
There are two things you should consider:
When you apply display: flex to an element it becomes a flex container which comes with several default styles.
One of the defaults is flex-direction: row, which aligns flex items (child elements) along the horizontal axis. To switch to a vertical direction you need to specify flex-direction: column.
Another default is flex-wrap: nowrap, which forces flex items to remain on a single line (even if they overflow the container).
From your question:
The problem is that with the flex style properties, when the window
is <768px ideally the content would change layout and each col-md-4
would stack on top of one another. This is not happening, instead the
columns just become really skinny and are displayed still side by
side.
It sounds like the flex items are not wrapping. Try adding this to the flex container:
flex-wrap: wrap;
If you want the flex items to stack vertically when the window is < 768px, use a media query with the flex-direction property.
#media screen and (max-width: 768px) { .your-selector-here {flex-direction: column;} }
Note on browser support:
Flexbox is supported by all major browsers, except IE < 10. Some recent browser versions, such as Safari 8 and IE10, require vendor prefixes. For a quick way to add prefixes use Autoprefixer. More details in this answer.