I have a column that automatically fills its height using flexbox, and within this I have 4 items that I want to each be 25% of the height of their container.
I've created this fiddle to show my current code: https://jsfiddle.net/fc66rfo3/1/
I want the blue boxes on the right to each be 25% of the height of their yellow container.
I've been using this answer: https://stackoverflow.com/a/23442782/3909886 to try and make my code work, but the items just don't seem to want to flow as I want them to.
My main CSS trying to affect the heights looks like this:
.resources-links {
display: flex;
flex-direction: column;
justify-content: space-around;
}
.col-1of1 {
height: 25%;
display: flex;
}
Don't worry. Just remove "height: 25%;display: flex;" and add "flex: 1;".
CSS:
Remove this
.col-1of1 {
height: 25%;
display: flex;
}
Add this
.col-1of1 {
flex: 1;
}
Related
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;
}
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 am using the Vali Admin theme and I am trying to push the last list item in the left sidebar to the bottom.
I have barely used flexbox before so I am not familiar with it at all, but I changed the menu to display: flex and then followed this answer to try to push the last item to the bottom. I am trying to do exactly what the person in that question if after.
These are my modifications to the theme:
.app-menu {
#extend .app-menu;
display: flex;
flex-wrap: wrap;
flex-direction: column;
justify-content: flex-start;
li:last-of-type {
margin-top: auto;
}
}
Working fiddle.
I think the problem is that the menu isn't using as much height as it can.
I would gladly include a working snippet but for the love of my I couldn't figure out how to create a jsfiddle. It doesn't allow local files and it would block my gist. Same with Codepen.
Add the following on .app-sidebar:
display: flex; // make sidebar a flexbox
flex-direction: column; // so it will align column direction
We do the thing above so we can apply flex related styling on the child.
This will make the parent or sidebar a flexbox, then add the following on .app-menu
flex: 1; // this will take all the remaining space on the sidebar
and remove padding-bottom on .app-menu so the last item will stay in the bottom without the padding.
try this
.app-menu {
margin-bottom: 0;
padding-bottom: 40px;
display: flex;
flex-wrap: wrap;
flex-direction: column;
justify-content: flex-start;
height: 100%;
if last item need to be displayed at the bottom of the page. try by setting height:100% to the ul
It's right to do as it described in link you've attached.
But you didn't set 100% height for your ul.
Setting height: 100%; to .app-menu class solves your problem.
Here is the working example based on your code:
https://jsfiddle.net/zewx18ps/1/
This question already has answers here:
One flex/grid item sets the size limit for siblings
(6 answers)
Closed 6 years ago.
I currently have a flexbox layout that looks like this:
The blue is class = "wrap", the orange and all three yellow boxes are contained in two separate class = "wrap_col", and each yellow box is contained in class = "wrap_item".
.wrap {
display: flex;
flex-flow: row wrap;
margin: 0 auto;
}
.wrap_col {
display: flex;
flex-direction: column;
flex: 1 0 auto;
}
.wrap_item {
margin:10px;
display: flex;
flex:1 0 auto;
flex-direction: column;
}
How can I shrink the three yellow boxes' heights down so that it is the same height as the orange box? Can you shrink flexboxes down to the same height as the shortest box?
An easy way to achieve this would be to make sure that the height of both your columns with the .wrap-col class is this same (either set a fixed height or set height: 100% and have them both fill the space of the .wrap element). Then make sure flex-shrink: 1 is set for all flex items to.
.wrap_item {
margin:10px;
display: flex;
flex:1 1 auto;
flex-direction: column;
}
Here is a jsfiddle. Try changing the height of the .wrap element and you can see the boxes resizing to fit.
I want to set the width of the div elements' width accordingly depending on their container width. However, the number will be changed, so the width will need to be adjusted accordingly. Here is a CSSDeck link to explain the situation clearly:
http://cssdeck.com/labs/hvmkapkd
As you can see, both containers are identical (needed), also they have modular content (<div> elements) (which is also needed). Keeping the same structure, is it possible to auto adjust the width of the divs using CSS so that they fill up the whole container?
Then each item in the first container would have 33.333% width, and each item in the second container would have 20% width.
I found the solution right after posting the question.
Setting the .container elements as table and setting the colored content as table-cell made it.
Link is updated above, but here is the link once again anyway:
http://cssdeck.com/labs/hvmkapkd
Give the flex-box concept a chance (https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes)
.container{
height: 100px;
width: 100px;
background-color: lightgray;
margin: 20px;
/* flexbox setup */
display: -webkit-flex;
-webkit-flex-direction: row;
display: flex;
flex-direction: row;
}
.container > div {
height: 100%;
/* flexbox setup */
-webkit-flex: 1 1 auto;
flex: 1 1 auto;
}
(http://cssdeck.com/labs/full/hvmkapkd)