Neil1
02-09-2016, 10:58 AM
Hi, I have a menu bar at the bottom of a page which I am using flex-box to keep the link buttons within it the same size. I have the following CSS relating to it...
Container:
.menus{
position:fixed;
bottom:10px;
left:20px;
display:flex;
flex-direction:row;
flex-wrap:wrap;
justify-content:flex-end;
align-items:flex-end;
align-content:stretch;
width:calc(100% - 40px);
height:calc(100% - 250px);
background:#ff0000;
}
(The height of the container is far greater than the required height for the links as it contains other content too, however this has been removed for conciseness, the links should sit along the bottom of the container and leave the rest blank)
Links:
.navlink{
cursor:pointer;
flex-grow:1;
align-self:flex-end;
text-align:center;
margin:auto;
margin-bottom:0;
min-width:200px;
box-sizing:border-box;
background:#f5f5f5;
border-bottom:solid 2px rgba(193, 193, 193, 1);
border-right:solid 3px rgba(193, 193, 193, 1);
border-left:solid 2px rgba(255, 255, 255, 1);
border-top:solid 3px rgba(255, 255, 255, 1);
height:50px;
transition: all 350ms linear;
}
At the moment just as a test run there are six link buttons, when the screen width is greater than 1240px (20px margin either side of container and 6 x 200px for min-width of links) it works perfectly...
5816
However when I shrink screen below this size I get two problems which I can't work out how to solve....
5815
Firstly, it jumps only the required number of links to a new a line so for example at the first break point links 1 to 5 stay in one line and only link 6 wraps to a new line then extends to fill that row, I would like the jump to split the links evenly so as soon as 1 x 6 doesn't fit on screen it jumps to 2 x 3 so they are all always the same width. Secondly it only keeps the bottom row aligned to the bottom, so when it breaks to two rows the second row is at the bottom (where it should be) but the first row is halfway up the container (whereas it should be directly above the bottom row with no gap).
Many thanks if anyone is able to help :)
Container:
.menus{
position:fixed;
bottom:10px;
left:20px;
display:flex;
flex-direction:row;
flex-wrap:wrap;
justify-content:flex-end;
align-items:flex-end;
align-content:stretch;
width:calc(100% - 40px);
height:calc(100% - 250px);
background:#ff0000;
}
(The height of the container is far greater than the required height for the links as it contains other content too, however this has been removed for conciseness, the links should sit along the bottom of the container and leave the rest blank)
Links:
.navlink{
cursor:pointer;
flex-grow:1;
align-self:flex-end;
text-align:center;
margin:auto;
margin-bottom:0;
min-width:200px;
box-sizing:border-box;
background:#f5f5f5;
border-bottom:solid 2px rgba(193, 193, 193, 1);
border-right:solid 3px rgba(193, 193, 193, 1);
border-left:solid 2px rgba(255, 255, 255, 1);
border-top:solid 3px rgba(255, 255, 255, 1);
height:50px;
transition: all 350ms linear;
}
At the moment just as a test run there are six link buttons, when the screen width is greater than 1240px (20px margin either side of container and 6 x 200px for min-width of links) it works perfectly...
5816
However when I shrink screen below this size I get two problems which I can't work out how to solve....
5815
Firstly, it jumps only the required number of links to a new a line so for example at the first break point links 1 to 5 stay in one line and only link 6 wraps to a new line then extends to fill that row, I would like the jump to split the links evenly so as soon as 1 x 6 doesn't fit on screen it jumps to 2 x 3 so they are all always the same width. Secondly it only keeps the bottom row aligned to the bottom, so when it breaks to two rows the second row is at the bottom (where it should be) but the first row is halfway up the container (whereas it should be directly above the bottom row with no gap).
Many thanks if anyone is able to help :)