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.

Simulate display: inline in React Native

React Native doesn't support the CSS display property, and by default all elements use the behavior of display: flex (no …

css reactjs flexbox react-native
Center one and right/left align other flexbox element

I would like to have A B and C aligned in the middle. How can I get D to go …

html css flexbox
How to use Bootstrap 4 flexbox to fill available content?

I have an angular app that uses bootstrap 4. I have a nav bar that sticks to the top, and I …

css twitter-bootstrap angular flexbox bootstrap-4
How to align content bottom on Bootstrap 4 col

I have the following code for a footer: <div class="container"> <hr> <div class="row"&…

twitter-bootstrap flexbox bootstrap-4 twitter-bootstrap-4
Prevent a flex items height from expanding to match other flex items

I have two elements inside a container, which are being side-by-side by using flex box. On the second element (.flexbox-2), …

html css flexbox
How to make the row stretch remaining height

I'm trying to make the container-fluid and 2nd row to stretch to the remaining height but I couldn't find a …

twitter-bootstrap bootstrap-4 flexbox
Difference between justify-content vs align-items?

I'm having a really hard time understanding what's the difference? From my research it seems like justify-content can do... space-between …

css flexbox
How do i set a flex-container to be the width of its flex-items?

I have a flex container with justify-content: flex-start. There ends up being overflow on the right side due to the …

css flexbox
flex vs flexGrow vs flexShrink vs flexBasis in React Native?

I finally upgraded react native to 0.42 which includes the introduction of flexGrow, flexShrink, and flexBasis and the change (or fix) …

react-native flexbox flex-grow
Keep the middle item centered when side items have different widths

Imagine the following layout, where the dots represent the space between the boxes: [Left box]......[Center box]......[Right box] When …

html css flexbox centering