I wanted to use flex box property to my layout where we create boxes dynamically.
So I want to adjust themselves(box) as per the count. Like if only 1 box is there, it should take complete 100% space and max 3 boxes will come in one row.
If 4th box comes in the screen then go to the next row automatically.
I have searched a lot about flex-flow but did not get the right solution.
Please help.
Regards
Using new syntax, Chrome (requires prefix) and Opera only at present:
#container {
display: flex;
flex-flow: row wrap;
}
#container > * {
flex: 1 1 33%;
}
Here is a demo: http://jsfiddle.net/lpd_/qwwT8/. If you don't want items on subsequent rows to stretch once the first row is filled, you can add:
#container > *:nth-child(n+4) {
max-width: 33.33%;
max-width: calc(100% / 3); /* To override and be more precise, if you wish */
}
Related
I have two divs inside a flex box. Div A is on the left, and div B is on the right.
I would like div A to take up 60% of the flex box, and div B to take up 40% of the flex box. As you can imagine, my css will look like this:
.container {
display: flex;
justify-content: start;
flex-direction: column;
}
.div_a {
width: 60%;
}
.div_b {
width: 40%;
}
Also, the browser will look like this:
Now, I would like div B to have a maximum and minimum width, the code will now look like this:
.container {
display: flex;
justify-content: start;
flex-direction: column;
}
.div_a {
width: 60%;
}
.div_b {
width: 40%;
max-width: 768px;
min-width: 480px;
}
Unfortunately, this will lead to this situation large browsers.
When Div B has reached its maximum width, I would like div A to fill up the rest of the space, like this:
Any ideas or fixes would be appreciated, thank you very much in advance.
I should mention that min-width: 60% for Div A produces the same situation, unfortunately.
This is a perfect case where you would turn towards the property flex-grow.
Since you're working with a 60%/40% size, you can use flex-grow:6 and flex-grow:4, or alternatively: flex-grow:3 and flex-grow:2. Or even: flex-grow:1.5 and flex-grow:1 since the property also accepts decimals!
.div_a {
flex-grow:3;
}
.div_b {
flex-grow: 2;
max-width: 768px;
min-width: 480px;
}
flex-grow is a property that will tell the parent (flexbox) to divide the available width into whatever the sum is of the amount of flex-grow specified in its child elements. By limiting the max width of .div_b, you tell flexbox to stop increasing the width after it reached that max, and the remaining width will be reserved for the other elements (.div_a in this case).
Also
I do want to point out that you're using flex-direction:column, but you're trying to create a row based layout. It's a better idea to use flex-flow: row nowrap. Which is a shorthand to declare both flex-direction and flex-wrap together and, with the value row nowrap will tell the parent to force everything on one line in a horizontal layout.
.container {
display: flex;
justify-content: start;
// flex-direction: column;
flex-flow: row nowrap;
}
I'm trying to make my personal website responsive. On the landing page (in desktop view) there are three links arranged in a flex box row. Each link itself is also a flexbox, with the items arranged in a column:
The CSS for this is as follows:
//Parent container:
.homemain-links {
display:flex;
flex-direction: row;
justify-content: space-between;
margin-top: 10%;
}
//Link:
.info-container {
display:flex;
flex-direction: column;
align-items: center;
padding:10%;
width:100px;
height:100px;
box-sizing: border-box;
}
When the screen size shifts from desktop to mobile, I want the links to switch from a row to a column. However when this happens, the link contents spill out:
CSS:
#media (max-width:576px) {
.homemain-links{
display:flex;
flex-direction: column;
}
.info-container {
width:100px;
height:100px;
}
}
I've tried using width:auto height:auto which worked, but the div container switched from a square to a rectangle, and I'm wanting to retain the square shape.
So is there a way to 'merge' a flexbox with the items within in, so that the items stay within it's boundaries?
As far as I know, no, the reason they spill out of the div container is because you have set a fixed width/height. You can try to set it with a relative values that's equal in order to have it adapt to screen sizes as well as retain the square shape, i.e., 6.5rem for both width/height or other similar relative values in CSS.
This question already has answers here:
What's the difference between align-content and align-items?
(15 answers)
Closed 2 years ago.
Please consider the following example:
https://jsfiddle.net/mr4fapx7/1/
<div class="z">
<div class="z1">1</div>
<div class="z1">2</div>
<div class="z1">3</div>
</div>
.z {
display: flex;
align-items: flex-start;
/* flex-direction: column; */
flex-wrap: wrap;
height: 1000px;
background: #900;
}
.z1 {
min-width: 51%;
background: #0f0;
}
I can't understand this behavior of flex... why does z1 els aren't aligned one after another as if you apply flex-direction: column to it? What is the logic behind it and is there a good way of making it "automatically" switch as if it where flex-direction: column as in this example?
UPDATE:
seems like I didn't explain myself correctly. Please try the above example with uncommented flex-direction property and see the desired behavior
The reason is because the flex parent has a height of 1000px, the space between the elements is equally distributed.
If you want the items to come one item after another, you have to set align-content : start to your flex parent and you should be good.
I am assuming that you set the min-width to 51% just to test things out and not something else.
Here's updated fiddle: https://jsfiddle.net/81nrf6ug/
Have you tried with a lower min-width value or removing the min-width property. The min width is 51% and if you want all the three columns in same row, the total would be 153% and total width should not be more than 100%.
I'm trying to aim for a responsive design wherein a long list of links is arranged in columns, the number of columns varying according to the width of the display device screen. As I understand it, I must specify the height of the container to get multiple columns. However, then the columns continue to the right off the screen. I do not know the length of the links. Is there any way to do this through Flexbox? It seems like such an obvious requirement.
The CSS I have so far is:
/* Container */
.links {
display: flex;
flex-direction: column;
flex-wrap: wrap;
width: 100vw !important;
height: 90vh;
}
/* Links in Container */
.links a {
white-space: nowrap;
flex: 1;
margin: 5px 5px 0 20px;
}
Edit: this it NOT a duplicate as commented. The problem not that the container width doesn't grow horizontally. The problem is that it DOES grow horizontally, not vertically.
Have you considered just using CSS Columns?
You wouldn't need to specify any height and then as the screen width changes, the number of columns will adjust based on the width you specify - taking up whatever height it needs, accordingly.
Your CSS could just look like this:
.links {
columns: 5 100px; // # of columns | minimum column width
column-gap: 40px; // space between columns
}
.links > a {
display: block;
padding: 10px 5px;
}
<div class="links">
link1
link2
link3
link4
link5
link6
link7
link8
link9
link10
link11
link12
link13
link14
link15
link16
link17
link18
link19
link20
</div>
Browser support for columns is pretty good.
Hope this helps!
I am trying to use flexbox to set up a grid display of images. Everything is working, and the layout looks nice, except when I have 4 images.
This is my current code for the images
section.flex-container .field-items {
display: flex;
justify-content: center;
flex-wrap: wrap-reverse;
align-items: stretch;
}
section.flex-container .field-items .field-item {
display: inline;
flex-grow: 1;
width: 33%;
padding: 10px;
}
Is there any way that I can increase the width to 50% when 4 .field-items are present? Again, I only want the 50% with to occur when there are 4 images.
A demo can be found here on codepen: Demo
You can achieve this via sibling count, which is pretty rad if you've never used it before. You're may already be familiar with the pseudo-class :nth-child which lets you select something based on its position within a list of children.
In comes :nth-last-child. The difference between the two is that
nth-child applies to the nth child counting from the top (ie, the
child that has n-1 elements before it) while the nth-last-child
applies to the nth child counting from the bottom (ie, the child that
has n-1 elements after it!). (Original | Follow-up)
Using the sibling count, you can then increase the width of your .field-item when it has 4 items like so:
section.flex-container {
.field-items{
.field-item {
&:first-child:nth-last-child(4), &:first-child:nth-last-child(4) + .field-item {
width:50%;
}
}
}
}
CodePen