Introduction to CSS.

Cascading Style Sheet(CSS) is a stylesheet language used to describe the presentation of a document written in HTML. CSS describes how elements should be rendered on screen.

CSS is among the core language of the open web and is standardized across web browsers according to W3C specifications. Previously, the development of various parts of CSS specification was done synchronously, which allowed the versioning of the latest recommendations. You might have heard about CSS1, CSS2.1, or even CSS3. There will never be a CSS3 or a CSS4; rather, everything is now CSS without a version number.

What is Flexbox in CSS?

Flexbox is a one-dimensional layout method for arranging items in rows or columns. Items flex to fill additional space or shrink to fit into smaller spaces.

The Flex Box layout module aims at providing a more efficient way to lay out, align and distribute space among items in a container, even when their size is unknown and dynamic.

The Main idea behind the flex layout is to give the container the ability to alter its item's width or height to best fill the available space. It prevents the overflow of items.

A different approach to learning Flexbox will be taken in this article

Example learning

A simple example:

Our first task is to create three boxes using three different colors. After that, we will learn about flex and its different operations.

Here is a simple page example with three boxes. Let's use flex to operate the boxes.

Applying flex display:

For this example journey, we have three boxes, and we need to select those three boxes, which will be laid out as flexible boxes.

To do this, we set a special value for the display. On the parent element of the elements, you want to affect. In this case, we want to lay out the <div> elements, which have three numbers. So we set this on another <div> element which is parent to all those three <div>s.

div{
    display: flex;
}

Let's apply'''''

This causes <div> element to become a flex container and its children to become flex items.

Applying a column or row and wrap:

column or row

For this example journey, we have three flex boxes, now we are going to apply directions to those three flex boxes by using flex-direction

Flexbox provides a property called flex-direction that specifies which direction the main axis runs. By default, this is set to row, which causes them to be laid out in a row in the direction your browser's default language works.

Try adding the following declaration to our <div> element:

flex-direction: column;
//or 
flex-direction: row;

Here, we are also going to apply the wrap function

wrap

For those three flex boxes, we also apply the wrap function because,

Our flexbox children will eventually overflow their container when we have a fixed width or height in our layout. By using flex-wrap: wrap; we can fix this issue.

flex-wrap: wrap;
//declaration_to_element
flex: 100px;

Think if we have multiple rows, each row has as many flexbox children fitted into it as is sensible. Any overflow is moved down to the next line. The flex: 100px is a declaration set on the articles means that each will be at least 100px wide.

Let's apply'''''

Note: Change the width in the above example, to see the changes.

Sizing the flex items:

For this example journey, we have three flex boxes, now we are going to alter the size of flex items, by using the flex property.

Flex is a unitless proportion value that dictates how much available space along the main axis each flex item will take up compared to other flex items. In our case, if we gave each child <div> the same value for flex, which means they will all take up an equal amount of space. if different then the space is also different.

.item1{
flex: 1;
}
.item2{
flex: 2;
}

Let's apply'''''

Alignment of flex items:

We can also use flexbox features to align flex items along the main or cross-axis. To understand that in this example journey, we have three flex boxes, now we are going to alter the alignment of flexboxes using two properties called align-items and justify-content

1. align-items controls where the flex items sit on the cross-axis.

   • By default, the value is stretch, which stretches all flex items to fill the parent in the direction of the cross-axis. If the parent doesn't have a fixed height in the cross-axis direction, then all flex items will become as tall as the tallest flex item.

   • The center value is used to maintain their intrinsic dimensions but be centered along the cross-axis.

   • We also have values like flex-start and flex-end, which will align all items at the start and end of the cross axis respectively.

1. justify-content controls where the flex items sit on the main axis.

   • The default value is flex-start, which makes all the items sit at the start of the main axis.

   • We can use flex-end to make them sit at the end.

   • The center is also a value for justify-content. It'll make the flex items sit in the center of the main axis.

   • The space-around is useful — it distributes all the items evenly along the main axis with a bit of space left at either end.

   • There is another value, space-between, which is very similar to space-around except that it doesn't leave any space at either end.

NOTE:- In most of the time the justify-items property is ignored in flexbox layouts.

div {
  display: flex;
  align-items: center;
  justify-content: center;
}

Let's apply'''''

Note: In the above example concentrate on numbers (in words).

Ordering the flex items:

Flexbox also has a feature for changing the layout order of flex items without affecting the source order. This is another thing that is impossible to do with traditional layout methods.

order: 1;
//Used_only_for_flex_items

Let's apply'''''

Note: In the above example, we can see the order of numbers is changed.

• By default, all flex items have an order value of 0.

• Flex items with higher specified order values will appear later in the display order than items with lower order values.

• Flex items with the same order value will appear in their source order.

And this is the end of this article. We can use flex to make our web page more flexible. Happy learning..!

"Learn to start"