Spider
The Flexbox

The Flexbox

#100DaysOfCode#Day7

Vishnu's photo
Vishnu
·

2 min read

Hey guys,

Today we are going to have a brief walk-through on CSS Flexbox.

Why Flexbox?

Flexbox is used to align elements and distribute the space for elements. This is a one dimensional model.

Flexbox structure.

image.png

The flexbox has the flex container and flex items. We align the items with some of the flexbox properties which we will encounter now.

The container is created by adding the property display: flex.

Axes

flex-direction : row

image.png

By default the flex direction is row. We can see the main and cross axis with which we have certain properties related to it.

flex-direction : column

image.png

If the flex direction is column. Then the main and cross axis are interchanged.

Display : Flex

<div class="container">
      <div class="items">item 1</div>
      <div class="items">item 2</div>
      <div class="items">item 3</div>
    </div>

.container {
  display: flex;
  background-color: grey;
}
.items {
  height: 100px;
  width: 100px;
  background: cyan;
  margin: 10px;
  color: black;
}

image.png

If the container is set to display:flex then

image.png

Justify Content

justify-content: center; is used to align the elements towards the main axis.

image.png

justify-content: end;

image.png

justify-content: space-around;

image.png

justify-content: space-between;

image.png

Align Items

The align items will move the elements with respect to the cross axis

align-items: center;

image.png

align-items: flex-end;

image.png

Align-Self

It is a flex item property to align a single element

align-self:end

image.png

In the above example we are only aligning the item 2.

flex-direction:row-reverse

image.png

Here we can see that the items are in reverse order.

A flex item can also be a flex container. We can align items inside flex items by making it container by using display:flex

display: flex;
  justify-content: center;
  align-items: center;

By using above code inside a flex item . We can make it as a container and we can align items night them.

image.png

Above we can see the content is centered.

flex-wrap: wrap;

Wraps the items in the flex container with respect to the size of the window.

image.png

Order

Order is a flex item property by which we can change the order of the flex item.

flex-basis

Basis is basically the width of the item.

flex-grow

Grow is the rate the items grow when the window is stretched.

flex-shrink

Grow is the rate at which the items shrink when the window is shrunk.

image.png

In shorthand we can write it as flex:1

100DaysOfCode