flexbox

Last children of grid get giant gutter cause of flexbox space-between [duplicate]

This question already has answers here : Targeting flex items on the last or specific row (3 answers) Closed 2 years ago . I've got a grid of elements which I want equally divided in 3. So I want each row to contain 3 elements. Because I want them to have an equal gutter I used justify-content:...

How do I get a flexbox to have a center fixed and a bottom fixed children together?

I am trying to get a layout of the following kind via flexbox. | | | | | CENTER FIXED ELEMENT | | | | BOTTOM FIXED ELEMENT | This is my rough flexbox CSS. .wrapper{ display:flex; justify-content:center; flex-direction:column; } .bottom-element { align-self:flex-end; } The idea behind is that...

Can flexbox handle varying sizes of columns but consistent row height?

I am just learning how flexbox works and want to build a very rough prototype to see if flexbox can handle this layout. I basically want to see if flexbox can support a 4-column table with varying width and height, but with consistent row height. I'm not sure I am explaining the layout so well, so...

Flexbox isn't working in android web browser in Android 4.4.2

There's this website I've been working on for a client of mine and I've been working on the mobile layout. I decided to use a flexbox layout for the overall website, but for some odd reason, the stock android web browser for 4.4.2 isn't loading any of my elements that are using flexbox. Chrome for...

Make flex-grow expand items based on their original size

I have 3 buttons in a row which all vary in width. I want them to all gain width the same to fill the remaining width of the row, so the widest will still be wider than the others etc. You can see below that what I've tried to do with flex has resulted in all the buttons being the same width. I know...