DEV Community

Mohd. Shafikur Rahman
Mohd. Shafikur Rahman

Posted on

Intro to CSS Flexbox layouts

The Flex Box Module usually referred to as flexbox, was designed as an one-dimensional layout model.
It make easier to design flexible responsive layout structure without using float or positioning.

Here is a demo to play around about CSS Flex Box Module: https://shafikshaon.github.io/css-flexbox/

The flex container properties are:

  • flex-direction
  • flex-wrap
  • flex-flow
  • justify-content
  • align-items
  • align-content

flex-direction

The main axis defined by the flex-direction property. It defines in which direction the container want to stack the flex items.

The flex-direction has four possible values:

  • row
  • row-reverse
  • column
  • column-reverse

row: The row value stacks the flex item horizontally but from left to right.

row-reverse: The row value stacks the flex item horizontally but from right to left.

column: The column value stacks the flex item vertically but from top to bottom.

column-reverse: The column value stacks the flex item vertically but from bottom to top.

flex-wrap

Flex box is one dimensional model. So, it is possible to cause our flex items wrap into multiple lines. We should consider each line as new flex container.

flex-wrap property specifies whether items should wrap or not.
Wrap means cover or enclose (someone or something) in paper or soft material.

wrap: The wrap value specifies that the flex items will wrap if necessary.

nowrap: The wrap value specifies that the flex items will not wrap.

wrap-reverse: The wrap value specifies that the flex items will wrap if necessary but in reverse order.

flex-flow

flex-flow is shortland for both the flex-direction and flex-wrap properties

for example

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

justify-content

The justify-content property is used to align the items on the main axis where direction determine by flex-direction.

flex-start: flex-start value align flex items at the start of the container.

flex-end: flex-end value align flex items at the end of the container.

center: center value align flex items at the center of the container.

space-around: space-around value align flex items with space before, between and after the lines. It causes equal amount of space on the right and left of each item.

space-between: space-between value align flex items with space between the lines.

space-evenly: space-evenly value align flex items with full-size space on either end.

align-items

The align-items property used for align flex items vertically.

stretch: stretch value stretch the flex items to fill the container. This is why flex items stretch to the height of the tallest one by default.

baseline: baseline value align the flex items by their flex container baselines.

center: center value align the flex items to center of the container.

flex-start: flex-start value align the flex items to top of the container.

flex-end: flex-end value align the flex items to bottom of the container.

align-content

The align-content property used for align flex lines. To demonstrate the align-content property set flex-wrap property set to wrap.

stretch: stretch value stretches the flex lines to take up the remaining space.

center: center value show the flex lines in the center of the container.

flex-start: flex-start value show the flex lines in the start of the container.

flex-end: flex-end value show the flex lines in the end of the container.

space-around: space-around value show flex lines with space before, between and after the lines. It causes equal amount of space on the right and left of each lines.

space-between: space-between value align flex lines with equal space between the lines.

Now we know about flex item properties:

order: order property specify the order of the flex items. The order value must be a number, default value is 0.

<div class="flex-container">
  <div style="order: 3">1</div>
  <div style="order: 2">2</div>
  <div style="order: 4">3</div>
  <div style="order: 1">4</div>
</div
Enter fullscreen mode Exit fullscreen mode

flex-grow: flex-grow property specifies how much flex item glow (increasing in size) relative to other flex items. The value must be a number, default value is 0.
The flex-grow property can be used to distribute space in proportion.

<div class="flex-container">
  <div style="flex-grow: 1">1</div>
  <div style="flex-grow: 1">2</div>
  <div style="flex-grow: 8">3</div>
</div>
Enter fullscreen mode Exit fullscreen mode

flex-shrink: flex-shrink property specifies how much a flex item will shrink relative to other flex items. The value must be a number, default value is 1.
Do not let the second flex item shrink as much as the other flex items:

<div class="flex-container">
  <div>1</div>
  <div style="flex-shrink: 0">2</div>
  <div>3</div>
</div>
Enter fullscreen mode Exit fullscreen mode

flex-basis: flex-basis values specifies the size of item in terms of space it leaves as available space.
Set the initial length of the second flex item to 20 pixels:

<div class="flex-container">
  <div>1</div>
  <div style="flex-basis: 20px">2</div>
  <div>3</div>
</div>
Enter fullscreen mode Exit fullscreen mode

flex: flex property is a shorthand property for the flex-grow, flex-shrink, and flex-basis properties.
Make the first flex item growable (1), shrinkable (1), and with an initial length of 20 pixels:

<div class="flex-container">
  <div style="flex: 1 1 20px">1</div>
  <div>2</div>
</div>
Enter fullscreen mode Exit fullscreen mode

align-self: align-self property specifies the alignment for selected item inside flex container.
Align the third flex item in the middle of the container:

<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div style="align-self: center">3</div>
  <div>4</div>
</div>
Enter fullscreen mode Exit fullscreen mode

Here is a demo to play around about CSS Flex Box Module:

https://shafikshaon.github.io/css-flexbox/

Top comments (12)

Collapse
 
osde8info profile image
Clive Da

dont be shy ! why not post a direct the link to the repo too ! github.com/shafikshaon

Collapse
 
shafikshaon profile image
Mohd. Shafikur Rahman

Did you say about demo link?

Collapse
 
osde8info profile image
Clive Da

im looking for a link to the source of shafikshaon.github.io/css-flexbox/

Thread Thread
 
shafikshaon profile image
Mohd. Shafikur Rahman
Thread Thread
 
osde8info profile image
Clive Da

thanks you so much i can fav and fork it now :)

Thread Thread
 
shafikshaon profile image
Mohd. Shafikur Rahman

You can fork it. If you can do improvenent then create a pull request. :)

Thread Thread
 
osde8info profile image
Clive Da

yes done thanks

Collapse
 
csharplove profile image
csharplove

That’s the only part on the css I get confuse sometimes I’m trying not to avoid css since this is an important content but I get frustrated using it

Collapse
 
shafikshaon profile image
Mohd. Shafikur Rahman

Is there anything not clear to you?

Collapse
 
csharplove profile image
csharplove

In what occasion use absolute position vs relative position

Thread Thread
 
shafikshaon profile image
Mohd. Shafikur Rahman • Edited

In short, position: relative places an element relative to its current position without changing the layout around it, whereas position: absolute places an element relative to its parent's position and changing the layout around it.

Thread Thread
 
csharplove profile image
csharplove

Thanks for your help Mohd ,appreciate it