Flexbox

What is Flexbox?

CSS Flexible Box Layout that helps you to make elements within a container more responsive.

Flexbox

  • The main idea is to give the container the ability to alter its width and height to best fill the available spaces
  • Flexbox is not a single property, but an entire module
  • Makes it easier to design flexible responsive layouts

Flexbox Overview

parent - flex container

children - flex items

main size

cross

size

1

2

main start

main end

cross start

cross end

Parent Container

parent - flex container

1

2

Setting the display property to flex to your parent container will make it flexible

Flex Container Properties

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

Flex-Direction Property

Defines in which direction the container wants to stack the flex items (children)

flex-direction: row

flex-direction: row-reverse

flex-direction: column

flex-direction: column-reverse

Flex-Wrap Property

Specifies whether the flex items should wrap or not

  • flex-wrap: nowrap - the default, all flex items will be on one line

  • flex-wrap: wrap - flex items will wrap onto multiple lines from top to bottom

  • flex-wrap: wrap-reverse - flex items will wrap onto multiple lines from bottom to top

Flex-Flow Property

Shorthand for setting both the flex-direction and flex-wrap properties

  • flex-flow: 'flex-direction'  'flex-wrap'

 

.container{

 display: flex; 
 flex-flow: row wrap-reverse;

}

Justify-Content Property

Aligns the flex items in the parent container

flex-start - (default) items are the left (start line)

flex-end - items are the right (end line)

center - items are centered

space-between- items are evenly distributed

space-around- items are evenly distributed with equal space around them

space-evenly- items are distributed so that spacing between any two items is equal

Align-Items Property

Aligns the flex items in the parent container vertically

flex-start - places items to the top 

flex-end -places items on the bottom

center - items are centered

stretch - (default) stretches items to fill the container 

baseline - items are aligned as their baseline align

Align-Content Property

Aligns the flex lines

flex-start - lines packed to the top of the container

flex-end - lines are packed to the bottom of the container

center - lines packed to the center of the container

stretch - (default) lines stretched to take up remaining space

space-between - lines evenly distributed

space-around - lines evenly distributed with equal space around each line

Flex Item Properties

Changing properties of flex items (children)

  • order
  • flew-grow
  • flex-shrink
  • flex-basis
  • flex
  • align-self

Order Property

Specifies the order of the flex items

3

1

4 

2

<div class="container">
  <div style="order: 2">1</div>
  <div style="order: 4">2</div>
  <div style="order: 1">3</div> 
  <div style="order: 3">4</div>
</div>

Rearranges the order of the flex items

Flex-Grow Property

Specifies how much a flex item will grow relative to the rest of the flex items

1

2

3

<div class="container">
  <div style="flex-grow: 1">1</div>
  <div style="flex-grow: 1">2</div>
  <div style="flex-grow: 5">3</div> 
</div>

Flex item 3 is growing 5x faster than the other items

Flex-Shrink Property

Specifies how much a flex item will shrink relative to the rest of the flex items

1

2

3

<div class="container">
  <div>1</div>
  <div>2</div>
  <div style="flex-shrink: 0">3</div>
  <div>4</div> 
</div>

4

Flex item 3 will not shrink as much as the other items

Flex-Basis Property

Specifies the initial length of a flex item

1

2

3

<div class="container">
  <div>1</div>
  <div>2</div>
  <div style="flex-basis: 100px">3</div>
  <div>4</div> 
</div>

4

Sets the length of flex item 3 to have a length of 100px

Flex Property

Shorthand for the flex-grow, flex-shrink and flex-basis properties

1

2

3

<div class="container">
  <div>1</div>
  <div>2</div>
  <div style="flex: 0 0 100px">3</div>
  <div>4</div> 
</div>

4

Flex item 3 will not grow (0), nor shrink (0) and have an initial length of 100px

Align-Self Property

Specifies the alignment for the selected item inside the flex container

1

2

<div class="container">
  <div>1</div>
  <div>2</div>
  <div style="align-self: center">3</div>
  <div>4</div> 
  <div>5</div>
</div>

3 

4

5

Flex item 3 will be aligned in the middle of the container

Media Queries

Media queries is used for responsive web design

since it allows for different styles to be applied to different media devices

Media Query Breakdown

@media only screen and (max-width: 600px) {
   body {
     background-color: cornflowerblue;
  }
}
  • @media is a rule to include a block of CSS properties 
  • only screen refers to browser window
  • max-width is the breakpoint that indicates the size of the browser window that will take the block CSS properties
  • In this example, if the browser window hits the breakpoint of 600px or less, the background color will be cornflowerblue

Breakpoints

  • Small mobile phones (max-width: 600px and down)
  • Large mobile phones (max-width: 600px and up)
  • Tablets (max-width: 768px)
  • Laptops/desktops (max-width: 992px)
  • Extra larger devices (max-width: 1200px)

Some typical device breakpoints:

Additional Resources

  • https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox

  • https://cssreference.io/flexbox/

  • https://www.w3schools.com/css/css3_flexbox.asp#align-content

  • https://css-tricks.com/snippets/css/a-guide-to-flexbox/

  • https://flexboxfroggy.com/

  • https://www.w3schools.com/css/css_rwd_mediaqueries.asp

Flexbox

By vic_lee

Made with Slides.com

Flexbox

  • 634

More from vic_lee