Top "Flexbox" questions

CSS module for flexible layouts providing a broad range of options for aligning elements while eliminating the need for floats and tables.

min-height 100vh creates vertical scrollbar even though content is smaller than viewport

I'm applying min-height: 100vh; to a flexbox container and I get a vertical scrollbar when I use justify-content: space-around; I …

html css flexbox viewport-units
input / button elements not shrinking in a flex container

When using input and button elements inside a flex container, the flex and/or flex-grow properties don't seem to do …

html css flexbox
Bootstrap 4 masonry layout utilizing flexbox grid

Is there a way to create a masonry column layout utilizing the flexbox grid that Bootstrap 4 comes equipped with? It …

css flexbox bootstrap-4 css-multicolumn-layout
What is the meaning of xs, md, lg in CSS Flexbox system?

I'm developing an application using React and wanted to style components, I found https://roylee0704.github.io/react-flexbox-grid/ which talks …

css reactjs flexbox react-flexbox-grid
How can I create multi columns from a single unordered list?

I'd like to create a multi column list like this: https://jsfiddle.net/37dfwf4u/ No problem when using a …

css flexbox html-lists css-multicolumn-layout
How does flex-wrap work with align-self, align-items and align-content?

align-self In the following code, align-self works with flex-wrap: nowrap. But when the container is switched to flex-wrap: wrap, the …

css flexbox
React Native Stylesheet: what does {flex:1} do?

React Native uses flexbox for layout. In all of the examples I've seen, they do something like this: var styles = …

flexbox react-native
Angular Material fixed toolbar AND sticky footer

I have been beating my head against this issue for some time now and sort of came up with a …

angularjs flexbox angular-material sticky-footer
What's the difference between flex-start and baseline?

When working with flex align-* properties, what's the difference between flex-start and baseline? The below code snippet gives same output …

html css flexbox
How to simulate 'position:fixed' behavior on Flexbox-aligned sidebar

As it was already answered (How can I have a position: fixed; behaviour for a flexbox sized element?) absolutely/fixed …

html css layout web-deployment flexbox