Learn FlexBox in CSS

Tram Ho

Preamble

Previously, when we wanted to layout in css, we used to use the float attribute, but the float had a limitation that was the height collapse, and we needed one more step to solve this problem by using the clear: both property. defined in class .clearfix. To improve the above disadvantages, Css3 has more Flexbox properties to help link page layout more active. In this article I will go into the properties of Flexbox so that you can catch it so let’s get started 😃

Prepare

To use the flex box property you must first have an outer div tag. Here I have a div with class container container and sub div tags inside it as follows

and a little initial css to determine their size, color

So I’m ready, I open up my browser to see how the elements are displaying, and here’s the result:

Next I will introduce the properties of Flexbox

Properties

First we will add the display: flex; In the container class as you can see the items have been arranged in the same row horizontally

1 flex-direction:

The flex-direction attribute specifies the flex-direction the arrangement of the item in the container

  • row: items are arranged horizontally from left to right, and it is the default value of flex-direction

  • row-reverse: same as row but the order of items is reversed from right to left

  • column: items are arranged vertically in order from top to bottom

  • column-reverse: same as column but the order of items is reversed from bottom to top

2 flex-wrap:

The flex-wrap attribute determines whether items are pressed into a single line or can be dropped into multiple lines when the width of the items is greater than the width of the container.

  • nowrap: specifies that the items must be on the same line, this can cause the items to overflow from the container, the default value of flex-wrap is nowrap Here I will add some items to give the total width of the items greater than container width

  • wrap: Items are separated into two lines if the total width of the items is greater than the width of the container

  • wrap-reverse: similar to wrap but it reverses the value of rows or columns according to the value of flex-direction . Here I am lm example with flex-direction value is row you can practice the same with column value

3 justify-content:

The justify-content attribute is used to determine how to arrange an item inside a container when the total width of the items is less than the width of the container.

  • flex-start: This value aligns the items to the top of the container, and it is the default value of justify-content

  • center: This value will center the items

  • flex-end: This value aligns the items towards the end of the container

  • space-around: This value will divide the distance between the items equally and double the distance of the item to the beginning and end of the container.

  • space-between: This value will divide the space evenly between items and there is no space between the item to the beginning and end of the container.

  • space-evenly: This value evenly divides the distance between items and the distance between the items to the beginning and end of the container

Note: in the examples above I am going to flex-direction: row; , and in the column , try it out 😄

4 align-items:

This attribute is similar but justify-content but n will align items in tens perpendicular to the dozen of justufy-content . I will temporarily call it chục vuông góc , and the axis in flex-direction I will call it trục chính 😄

  • stretch: If the item is not set to height, the item will be stretched by the length of the container, it is also the default value of align-items

  • center: align items to the center of the trục vuông góc

  • flex-start: align items to the beginning of trục vuông góc

  • flex-end: align items to the end of the trục vuông góc

Note : here, for example, in this align-items section, I am leaving the value of flex-direction = row so trục vuông góc will be the vertical axis, you also do the same with flex-direction = column to see the results. Please

5 align-content:

This property determines the position of the child items relative to its main axis in the container if and only if the container has the flex-wrap: wrap

  • stretch: when the items are not considered height and the parent container has the flex-wrap: wrap , the height of the items will be extended by the height of the container. And stretch is also the default value for align-content

  • center: the items will be centered in the parent container along the main axis

  • flex-start: items will be aligned to the top of the container along the spindle

  • flex-end: the items will be aligned to the bottom of the container along the main axis

  • space-around: This value will divide the distance between the rows containing the item and divide the distance between the top and bottom of the container twice.

  • space-between: This value will divide the distance between the rows containing the items and there is no space between the top and bottom to the beginning and end of the container.

  • space-evenly: This value will evenly divide the distance between the rows containing the items and the distance between the top and bottom to the beginning and end of the container.

note : here for this align-content , I am leaving the value of flex-direction = row and for flex-direction = column , please try it out. 😉

Conclude

So I and you have to learn the properties of Flexbox. During the writing process, there are many shortcomings, you can see any places that are not right or do not understand, you can comment down below to let me know, thank you. have read.

Reference: https://www.w3schools.com/css/css3_flexbox.asp

Share the news now

Source : Viblo