My life be like

Flex box

A flex box explanation Published at: 2019-01-07

I have not been web developing for long so I haven’t done anything before flexbox. I used frameworks like Bootstrap, Bulma or Foundation to do the layout of my websites. This did mean that it was a mayor dependency for something that is quite easy with flexbox. I tried it, and loved it. It was so easy. Combined with grid layout it is real easy to layout a website.

With flexbox you have a container that has the property flex. This means that everything inside the container is flexed layout. Both the container and the children of that container has properties to define how it should be laid out.

#container {
    // Properties for the parent
    display: flex;
    // Creates a flex container
    // Enabled flex for all children

    flex-direction: row | row-reverse | column | column-reverse;
    // Determens the main axis. Defines the direction of flex items are placed in the flex container.

    flex-wrap: nowrap | wrap | wrap-reverse;
    // Flex items are default on a single line,
    // allow the items to be wrapped.

    flex-flow: <‘flex-direction’> || <‘flex-wrap’>;
    // Shorthand for direction and wrap

    justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly;
    // Defines the alignment along the main axis.

    align-items: flex-start | flex-end | center | baseline | stretch;
    // Defines the alignment along the opposite axis.
    // The opposite axis of justify-content

    align-content: flex-start | flex-end | center | space-between | space-around | stretch;
    // Only works with multiple lines!
    // Aligns the lines in a flex container

.children {
    // Properties for the children

    order: <integer>; /* default is 0 */
    // Controls the order in which they appear

    flex-grow: <number>;
    // Defines the ability for a item to grow.
    // The number dictates how much the item should grow
    // depending on the number of other children.

    flex-shrink: <number>;
    // Defines the ability to shrink an item.

    flex-basis: <length> | auto;
    // Defines the default size.

    flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
    // Shorthand
    // Note: the defaults here are different based on
    // what is used.

    align-self: auto | flex-start | flex-end | center | baseline | stretch;
    // This allows the default alignment to be overridden for individual flex items.
Oscar te Giffel

Oscar te Giffel. I wan't to learn so many things. This is just my journey through life.