DEV Community

loading...

Max Your Flex

ronakjethwa profile image Ronak Jethwa Originally published at github.com ・2 min read

Max Your Flex

Note that this is only the compilation of the flex-styles majorly used during flex development. Use this for the 5-minute recap of Flexbox before your interview days. This is not meant to be a complete documentation. Refer the following links for the complete documentation.

Official MDN Resource for Flexbox & CSS-Tricks Resource for Flexbox

How Flex Works

alt text
Image Courtesy: css-tricks.com

Properties For Parent (flex-container)

display

.container {
  display: flex; /* or inline-flex */
}
Enter fullscreen mode Exit fullscreen mode

flex-direction

Check out the above architecture image to get more clarity.

.container {
  flex-direction: row | row-reverse | column column-reverse;
}
Enter fullscreen mode Exit fullscreen mode

flex-wrap

By default, flex items will all try to fit onto one line. You can change that and allow the items to wrap as needed with this property.

.container {
  flex-wrap: nowrap | wrap | wrap-reverse;
}
Enter fullscreen mode Exit fullscreen mode

flex-flow

This is a shorthand for the flex-direction and flex-wrap properties, which together define the flex container’s main and cross axes. The default value is row nowrap.

.container {
  flex-flow: column nowrap;
}
Enter fullscreen mode Exit fullscreen mode

justify-content

.container {
  justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly;
}
Enter fullscreen mode Exit fullscreen mode

align-items

You can override the align-items behavior for individual flex items by applying the align-self property to the particular item.

.container {
  align-items: stretch | flex-start | flex-end | center;
}
Enter fullscreen mode Exit fullscreen mode

align-content

.container {
  align-content: flex-start | flex-end | center | space-between | space-around | space-evenly | stretch;
}
Enter fullscreen mode Exit fullscreen mode

Properties For Children (flex-items)

order

The order property controls the order in which they appear in the flex container. Flex items with higher order values set on them will appear later in the display order than items with lower order values.

.item {
  order: 5; /* default is 0 */
}
Enter fullscreen mode Exit fullscreen mode

flex-grow

This defines the ability for a flex item to grow if necessary.

.item {
  flex-grow: 4; /* default 0 */
}
Enter fullscreen mode Exit fullscreen mode

flex-shrink

This defines the ability for a flex item to shrink if necessary.

.item {
  flex-shrink: 3; /* default 1 */
}
Enter fullscreen mode Exit fullscreen mode

align-self

This allows the default alignment (or the one specified by align-items) to be overridden for individual flex items.

.item {
  align-self: auto | flex-start | flex-end | center | baseline | stretch;
}
Enter fullscreen mode Exit fullscreen mode

float, clear and vertical-align have no effect on a flex item.

Flex With Fun?

Check out Flexbox Defense & Flexbox Froggy games that helps you learn flex.

Discussion

pic
Editor guide