Cacher is the code snippet organizer for pro developers

Create a Flex Container

To define and access a container as a flex container you can use display: flex;. If no additional rules are set, all direct children will be considered flex items and will be laid horizontally, from left to right. The width of flex items automatically adjusts to fit inside the container.

HTML

<div class = flexcontainer>
  <div class = flexitem1 style=background-color:lightblue;> test1 </div>
  <div class = flexitem2 style=background-color:lightgreen;> test2 </div>
  <div class = flexitem3 style=background-color:lightslategray;"> test3 </div>
</div>

CSS

.flexcontainer {
  display: flex;
}

Defining Flex Direction

To put all flex items in one column, add flex-direction: column; to your CSS.

.flexcontainer {
  display: flex;
  flex-direction: column;
}

To reverse the column order of flex items, add flex-direction: column-reverse; to your CSS.

.flexcontainer {
  display: flex;
  flex-direction: column-reverse;
}

To reverse the row order of flex items, add flex-direction: row-reverse; to your CSS.

.flexcontainer {
  display: flex;
  flex-direction: row-reverse;
}

Align and Justify Flex Items

If you want flex items aligned to the right:

.flexcontainer {
  display: flex;
  justify-content: flex-end;
}

If you want flex items centered:

.flexcontainer {
  display: flex;
  justify-content: center;
}

If you want flex items separated:

.flexcontainer {
  display: flex;
  justify-content: space-between;
}

To center flex items both horizontally and vertically:

.flexcontainer {
  display: flex;
  justify-content: center;
  align-items: center;
}

---

Wrapping

Resized to fit into one column or one row when a flex container is not large enough, flex items are not able to wrap by default. By using flex-wrap: wrap;, any flex items causing overflow will be wrapped to the next line.

To allow wrapping:

.flexcontainer {
  display: flex;
  flex-wrap: wrap;
}

To allow reverse wrapping (overflow item(s) are sent to the line above):

.flexcontainer {
  display: flex;
  flex-wrap: wrap-reverse;
}

To control the positioning of flex items when there is wrapping (replace * with stretch, space-around, space-between, center, flex-end, or flex-start):

.flexcontainer {
  display: flex;
  flex-wrap: wrap;
  align-content: *;
}

---

Expanding Flex Items

When there is leftover space within a flex container, flex-grow can be used to dictate how each item fits in the remaining space.

To grow a flex item (default size is 0):

.flexcontainer {
  display: flex;
}
.flexitem1 {
  flex-grow: 1;
  border: 3px solid;
}

Only working when there is space remaining in a container, flex-grow equals the ratio of a container’s width/height that an item should stretch to fit to use up all leftover container space, relative to the size of other children in the container. Similarly, flex-shrink only works when flex items are overflowing the flex container due to insufficient space.

To shrink a flex item (default size is 0):

.flexcontainer {
  display: flex;
}
.flexitem1 {
  flex-shrink: 1;
  border: 3px solid;
}

To set the precise size of each flex item (default value is flex-basis: auto;):

.flexcontainer {
  display: flex;
}
.flexitem1 {
  flex-basis: 25%; /*percentage value*/
}
.flexitem2 {
  flex-basis: 50px; /*absolute value*/
}
.flexitem3 {
  flex-basis: 5px;
}

To use flex-grow, flex-basis and flex-shrink at the same time:

.flexcontainer {
  display: flex;
}
.flexitem1 {
  flex: 2 1 100px;
}
.flexitem2 {
  5 1 5%;
}
.flexitem3 {
  flex: 1 5 5%;
}

---

Additional Method to Access Flex Items

Throughout the tutorial flex items were access directly via CSS, example:

.flexitem1 {
  flex-shrink: 1;
}

However, you may want to name all flex items the same, create groups of items, etc. To make your code more usable, you can access flexbox items by their order number (place the order number of the item you want to alter in parenthesis):

.flexitem1:nth-child(1) {
  flex-shrink: 1;
}

Simple to learn, flexbox is a quick way to make responsive page elements. Unlike older layout methods, such as vertically-based block or horizontally-based inline, flexbox was designed to be adaptable to both vertical and horizontal layouts. Automatically adjusting to whatever type of device it’s being accessed from, flexbox is vital to modern web development. Make your pages dynamic across mobile, tablet and PC with flexbox.