Flexbox is a CSS box model that allows for the simple implementation of complex layouts. As opposed to the CSS2 layout modules such as block, inline, table, and positioned, Flexbox is designed to allow a layout to make the most use out of the available space, through a set of simple rules. The W3C Candidate Recommendation, 19 October 2017 (https://www.w3. org/TR/css-flexbox-1/) explains the flex layout as follows:
- Flex layout is superficially similar to block layout. It lacks many of the more complex text- or document-centric properties that can be used in block layout, such as floats and columns. In return, it gains simple and powerful tools for distributing space and aligning content in ways that web apps and complex web pages often need. The contents of a flex container are as follows:
- Can be laid out in any flow direction (leftward, rightward, downward, or even upward!)
- Can have their display order reversed or rearranged at the style layer (that is, visual order can be independent of source and speech order)
- Can be laid out linearly along a single (main) axis or wrapped into multiple lines along a secondary (cross) axis
- Can “flex” their sizes to respond to the available space
- Can be aligned with respect to their container or each other on the secondary (cross)
- Can be dynamically collapsed or uncollapsed along the main axis while preserving the container’s cross size
Bootstrap 4 allows the developer to configure the framework to use Flexbox for certain components by changing the $enable-flex variable in _variables.scss to either true or false.
By default, enable-flex is set to true, meaning that Bootstrap ships with Flexbox enabled.
After changing the variable, recompile Bootstrap, and a number of Bootstrap components will have their display property set to flex. This includes the grid system itself, input groups, and the media component. You can find out more about Flexbox at https://www.w3.org/TR/css-flexbox-1/.
We recommend that you leave Flexbox enabled by default, unless you urgently need to support older browsers. For example, Internet Explorer 10 and Internet Explorer 11 as well as older versions of Firefox ship with several Flexbox bugs that may prevent the site from rendering correctly.
Source: Jakobus Benjamin, Marah Jason (2018), Mastering Bootstrap 4: Master the latest version of Bootstrap 4 to build highly customized responsive web apps, Packt Publishing; 2nd Revised edition.