Front End, HTML/CSS, Uncategorized

Flexbox CSS Part (1) – display, flex-direction, justify-content

  • The flexible box makes it easier to design flexible responsive layout structure without using float or positioning.
  • The parent container should take flex display property, display:flex.
  • flex-direction: to define the stack of the flex items.
  • flext direction could be: row, row-reverse, column, column-reverse.
    1. Row: the default (LTR).
    2. Row-reverse: (RTL).
    3. column: Top to bottom (TTB).
    4. column-reverse: (BTT).

  • justify-content: Align the flex item.
  • justify content could be: center, flex-start, flex-end, space-around, space-between.
    1. center: align the items in the center of the container.
    2. flex-start: the default, align the items at the start of the container.
    3. flex-end: align the items in the at the end of the container.
    4. space-around: displays the flex items with space before, between, and after the lines
    5. space-between: displays the flex items with space between the lines (first item is on the start line, last item on the end line).

 

6 thoughts on “Flexbox CSS Part (1) – display, flex-direction, justify-content”

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

w

Connecting to %s