CSS Flex layout

ONE

TWO

THREE

FOUR

FIVE

SIX

SEVEN

EIGHT

CSS Flex layout (Cont...)

Start applying display: flex; property to parent element This will take the all the elements in horizontal direction

.parent {
	display: flex;
}

ONE

TWO

THREE

FOUR

FIVE

SIX

SEVEN

EIGHT

CSS Flex layout (Cont...)

You can also change the direction of elements. For doing so, you need to mention the "flex-direction" property The flex-direction property specifies the direction of the items within the flex container

.parent {
	flex-direction: row | row-reverse | column | column-reverse
}

After applying row, row-reverse, column and column-reverse in flex-direction.

 

CSS Flex layout (Cont...)

They all are pretty intuitive.

ONE

TWO

THREE

FOUR

FIVE

SIX

SEVEN

EIGHT

row (default value)

CSS Flex layout (Cont...)

EIGHT

SEVEN

SIX

FIVE

FOUR

THREE

TWO

ONE

row-reverse

CSS Flex layout (Cont...)

column

ONE

TWO

THREE

FOUR

CSS Flex layout (Cont...)

column-reverse

EIGHT

SEVEN

SIX

FIVE

CSS Flex layout (Cont...)

If we have a large number of element in flex container, it can destroy the widht of elements.

 

As you can see our elements have shrunk a bit. This is becasue we haven't applied the flex-wrap property.

ONE

TWO

THREE

FOUR

FIVE

SIX

CSS Flex layout (Cont...)

      flex-wrap

It defines whether the flex items are forced in a single line or can be flowed into multiple lines depending on screen size. It persist the width of elements.

.parent {
	flex-wrap: wrap;
}

Code link:

 

https://stackblitz.com/edit/js-j45msq?file=index.html

CSS Flex layout (Cont...)

Now, this is right time to understand what main and cross axes are:

We can align elements within Flexbox in accordance with these two axis.

 

Main axis: Defined by flex direction.

 

Cross axis: Runs perpendicular to main axis.

CSS Flex layout (Cont...)

1

2

3

2

1

3

flex-direction: row

flex-direction: row-reverse

cross start

main start

cross end

main end

cross start

main start

main end

cross end

cross

cross

main

CSS Flex layout (Cont...)

2

3

1

2

1

3

flex-direction: column-reverse

flex-direction: column

main end

main start

cross start

cross end

cross start

cross end

main start

main end

main

main

cross

cross

CSS Flex layout (Cont...)

Align flexible items within flex container.

 

Justify-content: For horizontal alignment.

Align-content: For vertical alignment.

 

Justify-content property aligns the flex items horizontally within the flex container.

Justify-content in space-around items are evenly distributed in the line with half size spaces on either end.

 

Align-content property align the flex items vertically within the flex container.

CSS Flex layout (Cont...)

1

2

3

4

1

2

3

4

1

2

3

4

1

2

3

4

1

2

3

1

2

3

4

flex-start

flex-end

center

space-between

space-around

space-evenly

CSS Flex layout (Cont...)

1

2

3

4

flex-start

flex-start

1

2

3

4

flex-end

1

2

3

4

5

6

space-around

1

2

3

4

space-between

1

2

3

4

5

6

center

2

4

3

1

space-evenly

CSS Flex layout (Cont...)

The justify-content property aligns the items within flex container.

  • flex-start
  • flex-end
  • center
  • space-between (Items will equal space between them).
  • space-around (equal space b/w elements with half left side and half right side).
  • space-evenly

CSS Flex layout (Cont...)

justify-content: flex-start

ONE

TWO

THREE

FOUR

FIVE

EIGHT

SEVEN

SIX

CSS Flex layout (Cont...)

justify-content: center

ONE

TWO

THREE

FOUR

FIVE

EIGHT

SEVEN

SIX

CSS Flex layout (Cont...)

ONE

TWO

THREE

FOUR

FIVE

EIGHT

SEVEN

SIX

justify-content: flex-end

CSS Flex layout (Cont...)

align-content for vertical alignment.
For example:

align-content: flex-start

ONE

TWO

THREE

FOUR

CSS Flex layout (Cont...)

align-content for vertical alignment.
For example:

align-content: center

ONE

TWO

THREE

FOUR

CSS Flex layout (Cont...)

align-content for vertical alignment.
For example:

align-content: flex-end

ONE

TWO

THREE

FOUR

CSS Flex layout (Cont...)

You can also position a particular item inside flex container. For this we have, align-self property.

For example:

ONE

TWO

THREE

FOUR

align-self: center

CSS Flex layout (Cont...)

align-content: flex-end

ONE

TWO

THREE

FOUR

CSS Flex layout (Cont...)

You can pass following values in align-self.

  • auto
  • stretch
  • center
  • flex-start
  • flex-end
  • baseline
  • intial
  • inherit

Demo:

https://www.w3schools.com/cssref/playit.asp?filename=playcss_align-self&preval=auto

CSS Flex layout (Cont...)

Moving even further next we have is "order".

If you want to change the ordering of the items within flex container.

You can use order property that specifies the order of an item relative to the rest of the items inside the same flex container.

.one   { order: 2; }
.two   { order: 3; }
.three { order: 1; }
.four  { order: 3; }

CSS Flex layout (Cont...)

order: 2

FOUR

ONE

TWO

THREE

order: 1

order: 3

order: 4

CSS Flex layout (Cont...)

    flex-grow


The flex-grow property specifies how much the item will grow relative to the rest of the flexible items inside the same container.

.one   { flex-grow: 2; }
.two   { flex-grow: 3; }
.three { flex-grow: 2; }
.four  { flex-grow: 2; }

CSS Flex layout (Cont...)

flex-grow: 1;

ONE

TWO

THREE

FOUR

flex-grow: 3;

flex-grow: 2;

flex-grow: 2;

CSS Flex layout (Cont...)

Similarly, we have "flex-shrink" property.

The flex-shrink property specifies how the item will shrink relative to the rest of the flexible items inside the same container.

Made with Slides.com