The fact that align-content “works” when the primary flex container is switched to display: block is simply a browser bug. It shifts the flex items to the bottom, as desired, but only in Firefox. In Chrome it doesn’t do anything, which is the correct behavior (per the spec). And in IE11 it shifts the items … Read more
According to Flexbugs: In IE 10-11, min-height declarations on flex containers work to size the containers themselves, but their flex item children do not seem to know the size of their parents. They act as if no height has been set at all. Here are a couple of workarounds: 1. Always fill the viewport + … Read more
This is pretty much doable with standard Bootstrap 4 classes. There is even a whole section in the documentation about the Card columns feature. From the docs: Cards can be organized into Masonry-like columns with just CSS by wrapping them in .card-columns. Cards are built with CSS column properties instead of flexbox for easier alignment. … Read more
It is caused by the 0% in your .flex class. Change it to auto then it should not be a problem: .flex { flex: 1 1 auto; }
Short Answer Switch from flex: 1 to flex: auto. Explanation The flex-grow property factors in two key pieces of data: The free space in the row / column where it is being used. The value of the flex-basis property. Distribution of Free Space The flex-grow property distributes free space in the container among flex items … Read more
So the problem is that you’ve got the <html> node as a flex container, and the <body> node (its child) is the one and only flex item. Currently, align-self:stretch on #first is ignored, because that property only applies to flex items, and #first is not a flex item (the way you have things set up … Read more
You have 2 ways of doing this: flex-grow: 0 (fiddle) If you set flex-grow to 0 you are telling the items to keep their width and expand the empty space. Using flex-grow: 1 the items will expand the width to fit the space. invisible items (fiddle) Add some invisible items after the normal items with … Read more
Bootstrap’s flex-fill is unfortunately a very bad class. It sets the following flex CSS properties: flex: 1 1 auto; This is equivalent to: flex-grow: 1; flex-shrink: 1; flex-basis: auto; The grow and shrink values are fine. This is what makes the boxes share the available space evenly. The auto flex-basis value however is not good: … Read more
The correct way to do it would be with flexBasis, with a value set to (1/n)% where n is the desired # of rows > 0. For two rows: .parent { flex: 1, flexWrap: ‘wrap’, flexDirection: ‘row’ } .child { flexBasis: ‘50%’ }
I would apply a width or min-width to the .child items (or left/right padding that creates the distance between them) and margin-left: auto to the last item, which moves it right, independently from the others: https://jsfiddle.net/6vwny6bz/2/ .container { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -webkit-box-pack: justify; -ms-flex-pack: … Read more