I have this list ol with items li which are styled as follows:
ol {
display: flex;
flex-flow: row wrap;
justify-content: space-between;
width: 400px;
}
li {
width: 120px;
height: 120px;
}
DEMO
As you can see 3 items fit on one row. Because I'm using justify-content: space-between the first row looks exactly as I want it. However, the second row does not (because it has only two items). I want them to be positioned as if there was a 6th element (no gap between them and left aligned)
Is there anyway I can achieve this with flex box, or should I introduce an invisible 6th element ?
There is no way of achieving what you are asking by using display:flex; and justify-content:space-between;
See here more details: W3C:Axis Alignment: the ‘justify-content’ property
I would recommend using justify-content:center; or justify-content:flex-start; with margins.
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;
}
I am having an issues with flexbox list alignment. I have a list of elements displayed over a row of 3. But on a row with 2 elements there is a space in the middle.
I aim aiming for a row with only 2 elements to look like x x o. However my code leave the elements like this x o x. I also note that the elements arent entirely centered to its div.
See below:
Flexbox alignment issue
I have my ul set to:
display:flex;
flex-flow: row wrap;
width:100%;
justify-content: space-between;
align-items: center;
and the li with:
{
color:black;
font-size:16px;
margin-bottom:20px;
width: calc(100% / 3);
The space in the middle is caused by space-between. For that particular row just leave it to follow the normal row without any style. And it will start from the left to the right. If you want to create stuff that follows in that particular order, You can use a grid instead which is easier to do.
ul {
display: grid;
grid-template-columns: auto auto auto;
}
This will make it follow in a nice order, just the way you want it.
Or if you still want to use flexbox, for that particular row
ul{
display: flex;
flex-direction: row;
}
li{
width: calc(100% / 3);
}
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/
I'm making 2 columns with CSS Grid and with Collapsible div.
The problem is when I expand the one of the collapsible div,
the other div will also expanding with white space.
Anyone knows how to fix this without making 2 parents div for 2 columns?
Or using other method instead of CSS-grid?
screenshoot css grid with collapsible div
What you're trying to achieve is more of a masonry kind of layout on an expansion of an accordion. That is not something grid is designed for. The CSS Grid is two dimensional so you are always working with rows and columns at the same time.
Solution: Flexbox
#grid {
display: flex;
flex-direction: column;
align-items: flex-start;
flex-wrap: wrap;
justify-content: space-around;
height: max-content;
flex-flow: row wrap;
counter-reset: brick;
}
.cell {
width: 250px;
flex: 1 0 calc(33.333% - 20px);
padding: 20px;
background: #efefef;
}
Please check the demo I have created. https://codepen.io/abhishekrajeshirke/pen/NLzLJJ
Hope it answers your question.
I'm very new to CSS, and I'm struggling on positioning a flex item (DownloadButton) the way I want it too.
I want to position a flex item a certain way, but my googling skills are failing me.
The current state looks like this:
Icon DownloadButton DeleteButton
What I want is this:
Icon DownloadButton DeleteButton
I thought I could use align-items, but that's for the cross axis. Rather than even spacing, like the normal flex behavior, I want my DownloadButton hugging the DeleteButton at the end. However, my Googling skills have failed me. Help would be greatly appreciated, thanks guys!
I would align the items to the end (for preference) and then adjust the first one.
As pointed out in the comments the end alignment is not necessary as the effect is caused by the margin adjustment.
.parent {
width: 80%;
margin: 1em auto;
border: 1px solid grey;
display: flex;
justify-content: flex-end;
padding: .5em;
}
button:first-child {
margin-right: auto;
}
<div class="parent">
<button>Icon</button>
<button>Download</button>
<button>Delete</button>
</div>
Add these styles to the container:
#flex-container { /*Select Your Flex Container*/
display: flex;
flex-direction: row;
justify-content: space-between;
}
Add these styles for the flexible items:
.flexible-items { /*Select The Children Of The Flex Container*/
flex-grow: 0; /*This Is Default*/
}
#Icon {
flex-grow: 1;
}
If you want some space between the other two flexible items, you can achieve this by multiple methods, 1 being to add some margin and padding styles for their sides.