This log covers how to layout element using Flexbox. display controls how element should flow in the layout and flex is one of display’s property. It is appropriate to the components of an application and small-scale layouts.

If you want to have a great understanding of flexbox, another good resource is “A Complete Guide to Flexbox” from CSS-Tricks which can be found at here. A list of flexbox issues and cross-browser workaround can be found at Github repo philipwalton/flexbugs. Screenshot below is the browser supportability (taken at 2016/10/05), 1

Imgur

Flexbox Properties

Flexbox is a whole module which includes a set of properties. Items will be laid out following main axis/cross axis which is depends on flex-direction.

Imgur

Flex Container (7)

display

.container {
  display: flex;
  /*display: inline-flex;*/
}

display: flex; enables a flex context for direct children items.

flex-direction

.container {
  flex-direction: row | row-reverse | column | column-reverse;
}

Flex is a single-direction layout. row is the default which makes items flow from left to right. column makes flow from top to bottom.

flex-wrap

.container{
  flex-wrap: nowrap | wrap | wrap-reverse;
}

Flex items will try to find onto one line. Use flex-wrap to allow items to wrap.

flex-flow (Shorthand for flex-direction and flex-wrap)

.container {
  flex-flow: <flex-direction> || <flex-wrap>;  
}

The default values is row nowrap.

justify-content

.container {
  justify-content: flex-start | flex-end | center | space-between | space-around;
}

justify-content defines the alignment along the main axis, which controls the distribution of extra free space.

align-items

.container {
  align-items: flex-start | flex-end | center | baseline | stretch;
}

align-items defines how items are laid out along the cross axis.

align-content

.container {
  align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}

align-content defines how to distribute extra space in the cross axis.

Flex Items (6)

order

.item {
  order: <integer>;
}

Flex items laid out in source order by default. Use order to change their appearance in the container. The initial value is 0 and negative numbers are also supported.

flex-grow

.item {
  flex-grow: <number>; /* default 0 */
}

flex-grow defines the ability for a item to grow. The value is a unitless value that serves as a proportion. (Set all items to 1 to evenly distribute the space) Negative values are invalid.

flex-shrink

.item {
  flex-shrink: <number>; /* default 1 */
}

flex-shrink defines the ability for a item to shrink. Use it to define flex shrink factor when container’s width is less than sum of children’s width (under nowrap condition). Negative values are invalid.2

flex-basis

.item {
  flex-basis: <length> | auto; /* default auto */
}

flex-basis defines the element default size before remaining space is distributed. It overwrite the flex item’s width value.

Normally flex-grow, flex-shrink and flex-basis are declared together (see below).

flex (Shorthand for flex-grow, flex-shrink, flex-basis)

.item {
  flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}

It is recommended to use shorthand property, because it sets other values intelligently.

align-self

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

align-self allows the default alignment specified by align-items to be overridden for individual items.

flot, clear and vertical-align properties has no effect on a flex item.

Example

<div class="wrapper">
  <header class="header">Header</header>
  <article class="main">
    <p>
      Pellentesque habitant morbi tristique senectus et netus et
      malesuada fames ac turpis egestas. Vestibulum tortor quam,
      feugiat vitae, ultricies eget, tempor sit amet, ante.
      Donec eu libero sit amet quam egestas semper.
      Aenean ultricies mi vitae est. Mauris placerat eleifend leo.
    </p>  
  </article>
  <aside class="aside aside-1">Aside 1</aside>
  <aside class="aside aside-2">Aside 2</aside>
  <footer class="footer">Footer</footer>
</div>
.wrapper {
  display: flex;    
  flex-flow: row wrap;
  text-align: center;
  font-family: sans-serif;
  > * {
    padding: 10px;
    flex: 1 100%;
  }
}

.header {
  background: tomato;
}

.footer {
  background: lightgreen;
}

.main {
  text-align: left;
  background: deepskyblue;
}

.aside-1 {
  background: gold;
}

.aside-2 {
  background: hotpink;
}

@media all and (min-width: 600px) {
  .aside { flex: 1 auto; }
}

@media all and (min-width: 800px) {
  .main    { flex: 3 0px; }
  .aside-1 { order: 1; }
  .main    { order: 2; }
  .aside-2 { order: 3; }
  .footer  { order: 4; }
}

See the Pen zKpGNk by Li Xinyang (@li-xinyang) on CodePen.

  1. http://caniuse.com/#search=flex

  2. https://css-tricks.com/almanac/properties/f/flex-shrink/