Complete guide to CSS Flexbox

Tram Ho

CSS flexbox is a one-dimensional (aka 1D) layout pattern, one of the patterns that makes it easy to design a flexible and effective layout. Divide space between items and control aligning them in the flex layout container. With flexbox, we can easily arrange items from left to right, from top to bottom, and control the distance and order of items in the container.

How does it work?

Before going into more depth on Flexbox, we need to understand the structure of Flexbox as:

In flexbox, there are mainly two main components: the parent container (flex container) and the child elements inside (flex items).
In addition, we also need to consider some of the following properties:

  • main start, main end, cross start, cross end: The beginning of the container according to the main axis is called main start, the end of the container according to the main axis is called the main end, with cross start and cross similar but based on cross axis.
  • main axis: This axis is the direction of the display items, by default, it will chạy từ trái qua phải.
  • cross axis: This axis is perpendicular to the main axis , chạy từ trên xuống dưới.
  • main size: The size of each item based on the main axis.
  • cross size: The size of each item based on the cross axis.

Properties of flex container

Here are some attributes that can be used for flex containers:

  • display
  • flex-direction
  • flex-wrap
  • flex-flow
  • justified-content
  • align-items
  • align-content

Do not use flexbox

Use display to apply flexbox

We need to use the display property. This is how we define a flex container, which is also mandatory if you work with flexbox.

flex-direction

flex-direction used to specify the display direction of items, changing the flex display direction can also allow us to change the position of flex items.

flex-direction: row

flex-direction: row is the default value when using flexbox, does not make any changes, only places items từ trái qua phải in the main axis.

flex-direction: row-reverse

As with the name, flex-direction: row-reverse opposed to row , the items will be placed từ phải qua trái .

flex-direction: column

When we consider flex-direction: column , the spindle will now go from top to bottom so the items will now be stacked.

flex-direction: column-reverse

Then the items will be stacked on top of each other but in the opposite direction. Notice that the example above (1) will be at the top, but when using column-reverse (1) will be at the bottom.

flex-wrap

flex-wrap used to control the wrapping of items within the container. If we reduce the width of the browser, we may not see several items on the same line. The flex-wrap attribute can solve that problem:

  • nowrap (default): Nothing has changed
  • wrap: items will be fully wrapped in containers
  • wrap-reverse

nowrap

wrap

wrap-reverse

flex-flow

flex-flow is an abbreviation for flex-direction and flex-wrap . In flex-flow the first value is flex-direction and the second is flex-wrap

justified-content

justified-content used to align the position of items with the main axis. There are 6 possible values ​​for the justified-content attribute:

  • flex-start: will set the item starting from main start (and this is also the default value)
  • flex-end: will place the item starting from the main end
  • center: will place all items in the middle of the main axis
  • space-between: will divide evenly the extra space and add it between items
  • space-around: will divide the distance at the beginning and the end. The distance between the beginning and the end will be equal to half the distance between the two items together
  • space-evenly: will divide the space evenly between items with the item, item and main start, item with main end equally

flex-start

flex-end

center

space-between

space-around

space-evenly

align-items

The align-items attribute is used to determine how flex items are placed in containers along the cross axis.

  • align-items: stretch : The length of the item will be equal to the length of the cross axis.
  • align-items: flex-start : The item is placed at the start of the cross start (top left), and the item size has not been changed.
  • align-items: flex-end : Item is placed at the beginning of the cross end (bottom left)
  • align-items: center : Item is placed between the starting point of the cross start and the starting point of the cross end (middle left)
  • align-items: baseline : The item will be placed according to the characters in that item. The main purpose is to align the line text of items.

align-items: stretch

align-items: flex-start

align-items: flex-end

align-items: center

align-items: baseline

align-content

Similar to justify-content only difference is that instead of aligning with the main axis, align-content aligns with the cros axis.

  • align-content: stretch
  • align-content: flex-start
  • align-content: flex-end
  • align-content: center
  • align-content: space-between
  • align-content: space-around

align-content: stretch

align-content: flex-start

align-content: flex-end

align-content: center

align-content: space-between

align-content: space-around

Refer

https://medium.com/better-programming/a-complete-guide-css-flex-box-24f4a9a1e02

Share the news now

Source : Viblo