DEV Community

MOYED
MOYED

Posted on

Taking flexbox to next level

flex-flow

Mix of flex-direction and flex-wrap

.container {
    display: flex;
    flex-flow: row wrap;
}
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

Putting it on center of page

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

Top comments (0)