Flexbox

Flexbox is a layout mode in CSS. It basically accommodates for responsive web design and resizes elements according to how the user manipulates the window.

Some possible downsides to using flexbox are that you have to make sure your current web browser supports the code. Also flexbox doesn’t use float.

  1. flex-direction. This is used to define the direction items are to be placed in the flexbox. It is usually one direction and a column or a row.\
  2. flex-wrap. This allows flexbox items to wrap to the next line at a certain point.
  3. flex-grow and flex-shrink. These properties allow items to grow and shrink as needed to fill all space evenly.

These three tutorials helped me to understand flexbox. w3schools really gave a basic overview of what it was and all of the different properties were listed. css-tricks.com showed examples of code and explained how each property worked. flexboxgrid.com gave visual examples that clearly responded and were easily comparable when you resize the window.