Do you even [Flexbox] bro?

AlexBeje — Sun, 07 Jun 2020 18:01:20 +0000

I. DEFINITION

The first step in the implementation of the flex layout is to define the display type to flex inside the parent element.

.container {
  display: flex;
}

II. PARENT PROPERTIES

Here is a list of parent properties that can be use with the flexbox layout.

1. [JUSTIFY-CONTENT]

Align flex items along the X axis.

flex-start: Items align to the left side of the container.
flex-end: Items align to the right side of the container.
center: Items align at the center of the container.
space-between: Items display with equal spacing between them.
space-around: Items display with equal spacing around them.

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

2. [ALIGN-ITEMS]

Align flex items along the Y axis.

flex-start: Items align to the top of the container.
flex-end: Items align to the bottom of the container.
center: Items align at the vertical center of the container.
baseline: Items display at the baseline of the container.
stretch: Items are stretched to fit the container.

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

3. [FLEX-DIRECTION]

Define the direction of the main axis.

row: Items are placed the same as the text direction.
row-reverse: Items are placed opposite to the text direction.
column: Items are placed top to bottom.
column-reverse: Items are placed bottom to top.

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

4. [FLEX-WRAP]

Specify whether flex items are forced on a single line or can be wrapped on multiple lines.

nowrap: Every item is fit to a single line.
wrap: Items wrap around to additional lines.
wrap-reverse: Items wrap around to additional lines in reverse.

.container {
  display: flex;
  flex-wrap: no-wrap | wrap | wrap-reverse;
}

5. [FLEX-FLOW]

Shorthand property for flex-direction and flex-wrap.

.container {
  display: flex;
  flex-flow: [row | row-reverse | column | column-reverse]  [no-wrap | wrap | wrap-reverse]
}

EXTRA PARENT PROPERTY

A little bonus property that the parent can hold.

6. [ALIGN-CONTENT]

Determines the spacing between lines, while align-items determines how the items as a whole are aligned within the container. When there is only one line, align-content has no effect.

flex-start: Lines are packed at the top of the container.
flex-end: Lines are packed at the bottom of the container.
center: Lines are packed at the vertical center of the container.
space-between: Lines display with equal spacing between them.
space-around: Lines display with equal spacing around them.
stretch: Lines are stretched to fit the container.

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

III. CHILDREN PROPERTIES

1. [ALIGN-SELF]

Align the specified item along the X axis.

flex-start: Items align to the top of the container.
flex-end: Items align to the bottom of the container.
center: Items align at the vertical center of the container.
baseline: Items display at the baseline of the container.
stretch: Items are stretched to fit the container.

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

2. [ORDER]

Specify the order of the specified flex item.

... Default position -n number.
-1: Default position -1.
0: Default position.
+1: Default position +1.
... Default position +n number.

.container {
  display: flex;
}
.item {
  order: ..., -1, 0, 1, ...;
}

3. [FLEX-GROW]

Expand items without determining the width if the child.

1:: Default value.
2:: Width grows 2x times.
...: Width grows nx times.

.container {
  display: flex;
}
.item {
  flex-grow: 2;
}

4. [FLEX-SHRINK]

Allow an item to shrink if the flex container is too small.

1: Default value.
2:: Item shrinks 2x times.
...: Item shrinks nx times.

.container {
  display: flex;
}
.item {
  flex-shrink: 2;
}

5. [FLEX-BASIS]

Set the initial size of the flex item before shrinking or growing it.

10px: Initial size of the flex item.

.container {
  display: flex;
}
.item {
  flex-basis: 10px;
}

EXTRA CHILDREN PROPERTY

There is a simplified property for the last three properties mentioned before, hope you enjoy the extra tip.

6. [FLEX]

Flex shorthand that controls the flex-grown, flex-shrink and flex-basis in one line. Used to control the fill rate of the extra space.

1: Item grows 1x times.
0: Item shrinks 0x times.
10px: Initial size of the flex item.

.container {
  display: flex;
}
.item {
  flex: 1 0 10px;
}

Resources

Flexbox Froggy - Learn while playing!
freeCodeCamp - Initiation to web development.

Rule SCSS with BEM (Block.Element.Modifier) methodology

AlexBeje — Fri, 05 Jun 2020 17:57:37 +0000

Here is a simple example where we use BEM notation to create a Card component.

HTML

Using the BEM notation we are defining the main block (the card) which contains elements (__) and modifiers (--).

<div class="card">
  <span class="card__img"></span>
  <div class="card__content">
    <ul class="card__list">
      <li class="card__item card__item--active">Adobe XD</li>
      <li class="card__item">Figma</li>
      <li class="card__item">Sketch</li>
    </ul>
    <p class="card__desc">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Vero atque iste nobis quidem dolore error animi voluptas quia corrupti consectetur.</p>
    <a class="card__link" href="#">Visit the link</a>
  </div>
</div>

CSS

First we define the structure of the html and body elements.

body, html {
    margin: 0;
    height: 100vh;
}

body {
    display: grid;
    place-content: center;
    height: 100vh;
    background: rgb(238, 238, 238);
    font-family: 'Nunito', sans-serif;
}

Then we define the card block (.card) with its elements (__) and modifiers (--) using the BEM methology.

.card {
    padding: 0 5em;
    width: 300px;

    &__img {
      display: block;
      height: 300px;
      width: 100%;
      background: #2ae897;
    }

    &__content {
        padding: 1.5em;
        background: white;
    }

    &__list {
        list-style-type: none;
        display: flex;
        margin: 0;
        padding: 0;
    }

    &__item {
        padding: .3em .5em;
        margin-right: .5em;
        background: rgb(230, 230, 230);
        border-radius: .3em;
        font-size: .85em;

        &--active {
            background: #3b3030;
            color: #FFFFFF;
            font-weight: bold;
        }
    }

    &__link {
        background: #2ae897;
        color: #3b3030;
        text-decoration: none;
        padding: .5em 1em;
        border-radius: .5em;
        display: inline-block;
        margin-top: .5em;
        font-weight: bold;
        right: 0;

        &:hover {
            background: #575757;
            color: white;
        }
    }
}

Final result

Resources

You Probably Need BEM CSS in Your Life (Tutorial)

Forem: AlexBeje

Do you even [Flexbox] bro?

I. DEFINITION

II. PARENT PROPERTIES

1. [JUSTIFY-CONTENT]

2. [ALIGN-ITEMS]

3. [FLEX-DIRECTION]

4. [FLEX-WRAP]

5. [FLEX-FLOW]

EXTRA PARENT PROPERTY

6. [ALIGN-CONTENT]

III. CHILDREN PROPERTIES

1. [ALIGN-SELF]

2. [ORDER]

3. [FLEX-GROW]

4. [FLEX-SHRINK]

5. [FLEX-BASIS]

EXTRA CHILDREN PROPERTY

6. [FLEX]

Resources

Rule SCSS with BEM (Block.Element.Modifier) methodology

HTML

CSS

Final result

Resources