Taking flexbox to next level

flex-flow

Mix of flex-direction and flex-wrap

.container {
    display: flex;
    flex-flow: row wrap;
}

justify-content & align-items

• justify-content

  default: flex-start

• align-items

  default: stretch

  align-items work if a) parent element has height, b) some of items are bigger
  

  .container {
      align-items: baseline;
  /* align the first line of text */
  }
  

align-contents

Works with multiple rows. Which align-items work for items inside individual rows.

default: stretch

flex-grow & flex-shrink

• flex-grow

  default: flex-grow: 0

  Flex item grows relative to the given unit of flex-grow. For flex-grow: 0, it doesn’t grow as it fits the minimum size of the content.

• flex-shrink

  default: flex-shrink: 1

  Flex item shrinks relative to the given unit of flex-shrink. For flex-shrink: 0, it doesn’t shrink.

flex-basis

Setting width means giving its ideal width.

If we set min-width or min-height, it can interrupt flex-basis

default: flex-basis: auto

1. Find the given width
2. If there’s no explicit width, fit to given content size.

3. flex-basis vs width

   flex-basis works for main axis. Which means that if the flex-direction is column, flex-basis becomes height

• flex-basis: 0

  Ideal width is 0. So, it shrinks as much as possible.

• Using flex-basis on image element has bug
  

  .img {
      flex-basis: 600px;
    min-width: 0;
    min-height: 0;
  }
  

flex

Mix of flex-grow, flex-shrink, flex-basis

default: flex: 0 1 auto

• flex: 1

  flex-grow: 1, flex-basis: 0

• flex: auto

  flex-grow: 1, flex-shrink: 1, flex-basis: auto

align-self

Can align item individually for sub-main axis

margin: auto in flexbox

In flexbox, margin: auto works for all 4 directions. Also, we can use margin-top: auto to push the element to the bottom.

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

.item {
    margin-top: auto;
}

Putting it on center of page

body {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
}