CSS

Last Updated: 10/18/2022

Flexbox

  • Makes it easier to design flexible responsive layout structure without using float or positioning.

Flex Container

  • Flex container becomes flexible by setting the display property to flex
  • Properties that can be applied to flex-container
    • flex-direction
    • justify-content
    • align-items
    • flex-wrap
    • align-content
    • flex-flow
.container {
    border: 3px solid gray;
    display: flex;
    flex-direction: row;
}
.boxes {
    width: 5rem;
    height: 5rem;
    background-color: gold;
    margin: 1rem;
}

<div class="container">
    <div class="boxes">1</div>
    <div class="boxes box-two">2</div>
    <div class="boxes">3</div>
</div>

Flex Direction

  • Defines in which direction the container wants to stack the flex items
  • Possible values
    • row
    • column
    • row-reverse
    • column-reverse

Justify Content

  • Used to align the items along main axis
  • Possible values
    • flex-start
    • flex-end
    • center
    • space-evenly: distributes items with equal spacing between them
    • space-between: first and the last items are pushed to the ends of the horizontal axis. And the other items are distributed with equal space between them.
    • space-around: Some space before the first and after the last item which is half of the space between the other items.
justify-content: flex-end;

Align Items

  • Used to align the items along cross axis
align-items: center;

Flex wrap

  • Specifies whether the flex items should wrap or not.
flex-wrap: wrap;

Align Content

  • Used to align the flex lines
  • Set the flex wrap property to wrap
align-content: center;

Flex Flow

A shorthand property for flex-direction and flex-wrap

flex-flow: row wrap;

Flex Items

  • Properties that can be applied to flex items
    • align-self
    • flex-basis
    • flex-grow
    • flex-shrink
    • flex

Align Self

  • Specifies the alignment for the selected item inside the flexible container.
align-self: center;

Flex Grow

  • Specifies how much a flex item will grow relative to the rest of the flex items.
  • default value is 0.
flex-grow: 2;

Flex Shrink

  • Specifies how much a flex item will shrink relative to the rest of the flex items.
  • default value is 1.
flex-shrink: 2;

Flex Basis

  • Specifies the initial length of a flex item.
  • Flex basis, would translate to width if the direction is row
  • Flex basis, would translate to height if the direction is column
  • Default value is auto
flex-basis: 10rem;

Flex

  • A shorthand property for the flex-grow, flex-shrink, and the flex-basis properties
  • If you supply a single value that is going to be used for the flex grow property,
  • If this supply two values, the second value can be flex shrink, or flex basis. Flex grow and flex shrink, just take a number, they don't take a unit -If you supply three values, the first value is going to be grow. The second is going to be shrink and the third is going to be flex basis
flex: 1 1 10rem;
Previous
Next