Use flex-grow: 1 or width: 100% so it will grow to match the width of the parent. You probably want to use that in combination with flex-wrap: wrap on .container if you plan on putting more flex children in .container
I think you want something like the following. Run code snippetExpand snippet See demo at: http://jsfiddle.net/audetwebdesign/tFscL/ Your .flex-item elements should be block level (div instead of span) if you want the height and top/bottom padding to work properly. Also, on .row, set the width to auto instead of 100%. Your .flex-container properties are fine. If you want the .row to be centered vertically in the view port, assign … Read more
Flexbox doesn’t have collapsing margins. Flexbox doesn’t have anything akin to border-spacing for tables (edit: CSS property gap fulfills this role in newer browsers, Can I use) Therefore achieving what you are asking for is a bit more difficult. In my experience, the “cleanest” way that doesn’t use :first-child/:last-child and works without any modification on flex-wrap:wrap is to set padding:5px on the container and margin:5px on the children. … Read more
Important! Vertical center is relative to the height of the parent If the parent of the element you’re trying to center has no defined height, none of the vertical centering solutions will work! Now, onto vertical centering… Bootstrap 5 (Updated 2021) Bootstrap 5 is still flexbox based so vertical centering works the same way as Bootstrap 4. For example, align-items-center, justify-content-center or auto margins can used … Read more
display: inline-flex does not make flex items display inline. It makes the flex container display inline. That is the only difference between display: inline-flex and display: flex. A similar comparison can be made between display: inline-block and display: block, and pretty much any other display type that has an inline counterpart.1 There is absolutely no difference in the effect on flex items; flex layout is identical whether … Read more