What is FlexBox?

ADNAN NAEEM
BlueEast
Published in
2 min readOct 26, 2018
Flexbox Explained

Flexbox, a new technology, coming with the support of numerous browsers is becoming widespread due to its efficient usability. It provides tools to enable quick creation of complex, flexible layouts and features that were difficult with CSS. This article explains all the fundamentals.

Why Choose Flexbox?

The only consistent cross browser-compatible tools available for creating CSS layouts were things like floats and positioning which worked fine but are rather limiting in real-time operations.

Limitations of Previous Technologies

  • Perpendicularly centering a block of content inside its parent.
  • Making all the children of a container take up an equal extent of the available width/height, irrespective of how much width/height is open.
  • Making all columns in a compound column layout embrace the same height even if they contain a different amount of content.

Cross Browser Compatibility:

Flexbox supports almost all new browsers including Firefox, Opera, Chrome, Microsoft Edge and IE 11 & newer versions of Android/iOS, etc. However, it is important to mention that there are still older browsers in use that don’t support Flexbox.

If you are considering to use flexbox in a website, it is recommended that you test it to ensure that your user experience is still acceptable in as many browsers as possible.

Though Flexbox can be a bit trickier than some CSS features but the usability & practicality it offers is incomparable.

So, that was a brief overview of Flexbox. In order to learn more about Flexbox, follow BlueEast’s official publication. We’ll discuss more advance level strategies for overcoming tricky cross-browser support issues in future.

--

--