Flexbox is a one-dimensional model for web layout, especially suitable for responsive design. Create elastic containers by setting display: flex; to easily control the arrangement, alignment, and scaling of child elements. The arrangement direction is controlled by flex-direction and supports row, row-reverse, column and column-reverse. Center alignment can be achieved through justify-content (spindle) and align-items (crossing axis), and common values ??include center, flex-start, flex-end, space-between, and space-around. Project scaling relies on flex-grow, flex-shrink, and flex-basis properties, where flex-grow allocates remaining space proportionally. After mastering these core attributes, you can complete modern web page layout more efficiently.

Flexbox is a powerful tool for front-end layout, especially suitable for responsive design. It simplifies how elements are arranged in web pages without relying on complex floating or positioning. If you are just starting to learn CSS layout, Flexbox should be the first tool to master.

What is Flexbox?

Flexbox is a one-dimensional layout model that is mainly used to arrange, align and allocate space for child elements in containers. You can understand it as a "smart box" where the items can be automatically resized, ordered and aligned as needed.

Using Flexbox is very simple: just set display: flex; for a container, and it becomes a Flex container, and the direct child elements inside become a Flex project.

 .container {
  display: flex;
}

How to control the arrangement direction of the project?

Flexbox is arranged from left to right by default, but you can change this direction through flex-direction :

• row (default): from left to right
• row-reverse : from right to left
• column : from top to bottom
• column-reverse : from bottom to top

For example, if you want to make a vertical navigation bar, you can write it like this:

 .nav {
  display: flex;
  flex-direction: column;
}

At this time, the menu items will be arranged vertically instead of horizontally.

How to center the elements?

Many people are troubled by alignment problems at the beginning. Flexbox provides two properties to handle alignment on the spindle and cross axis:

• justify-content : Controls the alignment on the spindle
• align-items : Controls the alignment on the cross axis

Commonly used values ??include:

• center
• flex-start
• flex-end
• space-between
• space-around

For example, if you want to center a button horizontally and vertically in a container, you can set it like this:

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

In this way, no matter how big the button is, it will be displayed in the center in the parent container.

How to automatically scale and retract Flex projects?

Sometimes you want some projects to automatically resize according to the available space, and then you need to use the three attributes of flex-grow , flex-shrink and flex-basis .

The most commonly used is flex-grow , which has a value of a number indicating how much remaining space the item will occupy. For example:

 .item1 {
  flex-grow: 1;
}

.item2 {
  flex-grow: 2;
}

If there are two items whose flex-grow is 1 and 2, the remaining space will be allocated to them in a 1:2 ratio.

Basically that's it. Flexbox seems simple, but it is very powerful when combined. Many modern website layouts are built on Flexbox. After mastering these key attributes, you will find that the layout has become much easier.

The above is the detailed content of CSS Flexbox tutorial for layout design. For more information, please follow other related articles on the PHP Chinese website!