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;
}
Related
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 want to create a website, part of which has two elements in a container: title text and a button. I want to place them in the center of the main axis (the container), with some space between them. I don't like the justify-content: space-around option because it leaves too much space in the middle. So to do this, I would use left/right margins for each of the elements. But I also want to use flex-wrap: wrap;, meaning that if the screen size is too small to fit both of the elements, css would transfer the button to the next line. Every time this happens however, the margin-left still remains on the button, so it looks off-centered (see image).
Any ideas? Thanks.
EDIT: Using media queries messes things up, so my new question is this: Is there a way to make the space between two centered elements hold constant to all screen sizes without margins?
You can set the margin only for bigger screen sizes using CSS media queries
You're probably looking for justify-content: space-evenly in combination with text-align: center, align-items: center, and flex-wrap: wrap. This will separate the content out evenly, whilst simultaneously allowing it to wrap around without any margins when the viewport isn't wide enough to contain both elements.
.container {
display: flex;
align-items: center;
justify-content: space-evenly;
text-align: center;
flex-wrap: wrap;
border: 1px solid black;
height: 100px;
/*max-width: 80px;*/ /* Turn on to see the wrap */
}
.content {
flex: 1;
}
<div class="container">
<div class="content">content</div>
<div class="content">content</div>
</div>
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 can't make wrap the divs into columns.
Here is my code
.hosts.body
display: flex
flex-direction: column
flex-wrap: wrap
justify-content: flex-start
align-content: flex-start
align-items: flex-start
.server
border-left: 0.3em solid $green
padding: 0.3em
color: $green
margin: 0.1em
background: #c8e6c9
min-width: 12em
max-width: 12em
overflow: hidden
Link: http://codepen.io/CJRoman/pen/YXNGGq
What i'm doing wrong? I can't find out what it needs additionally to wrap.
you need to set a height to containing flexbox element,
try modifying like this:
.body
display: flex
flex-direction: column
flex-wrap: wrap
justify-content: flex-start
align-content: flex-start
align-items: flex-start
height: 500px
this fiddle is a little different but it's just to give you an idea
flex-direction: column means the child-element will align from top to bottom and every one will occupy one line,you can remove it because of the default value is flex-direction: row,which means every child-element will display in one line if the width of flex-container is big enough
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.