How it Appears
I m having 8 images as banners in a flex container. It displays anywhere from 1 to 4 banners a row. The problem happens when a row can fit only 3 banners. The last row has only 2 banners remaining. And it stretches over. In such a situation, I'd prefer the first 2 banners toexpand instead of the last. How do I do it?
Here is my current CSS
.flex_Container{
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.flex_Banners{
flex:1;
min-width: max(300px , 25%);
}
Related
I would like to grow an item (.sub-container) to the both ways when I validate my form, top and bottom, but when the error mesage appear, it only grow to bottom and I'm here all day long and I already change everything in my code but it didn't grow the both ways, it just grew bottom, the ".container" is where everything are inside, pls someone know how to do it?
.container{
width: 80%;
padding: 70px 0;
flex-direction: row;
align-items: center;
justify-content: center;
}
.sub-container{
display: flex;
flex-direction: column;
flex-grow: 1;
width: 50%;
}
before validate
after validate
The Flexible Box Layout Module, makes it easier to design flexible
responsive layout structure without using float or positioning.
Source # https://www.w3schools.com/css/css3_flexbox.asp
What you're trying to do as nothing to do with flexbox.
what you call "grow" is just default css behaviour. The only way to achieve what you want (Enlarging both height and width upon form submission) is realized by using javascript.
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/)
I'm fairly new to flexbox, and can't figure out how to do what I'm trying. I'd like for the repeated content to stack horizontally to the right. I would like the items to shrink to fit the width of the content (if the title/report id text is longer/shorter). I'm trying to make the red box only as wide as the content and stack to the right. The purple box(container) is flex. It seems like the red div is the culprit that I can't figure out. I've tried converting to inline-block and played with the flex-grow and flex-shrink, but nothing seems to work for me. There might be a style somewhere else in the project that is competing, but not sure what to look for if that's the case...
Styles of the purple container div:
line-height: 1.5;
display: flex;
flex-direction: column;
max-height: 22.8125rem;
padding-bottom: .5rem;
margin-bottom: 1rem;
background-color: #394b54;
flex-basis: 100%;
-webkit-box-flex: 1;
flex-grow: 1;
I'd like for the repeated content to stack horizontally to the right
Use the default flex-direction: row.
I would like the items to shrink to fit the width of the content
Use the default flex-grow: 0 and flex-basis: content.
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.