Flexbox is a CSS elastic box model for one-dimensional layout. It realizes automatic adjustment of child elements by setting the container to display: flex; 1. The container uses display: flex to define elastic layout; 2. flex-direction to set the spindle direction; 3. justify-content to control spindle alignment; 4. align-items to control cross-axis alignment; 5. flex-wrap determines whether to wrap lines; 6. align-content to manage multi-row alignment; projects can be resized using flex-grow, flex-shrink, flex-basis, or set uniformly through flex abbreviation, align-self to achieve separate alignment; common applications include centering, navigation bar, contour columns and holy grail layout, combined with min-width: 0 and media queries solve spillover and responsive problems, and the model is well compatible and easy to master.

CSS Flexbox is a powerful layout model that is especially suitable for aligning, distributing, and resizing elements on pages. It makes responsive design easier, especially for one-dimensional layouts (rows or columns). Here is a practical Flexbox guide to help you quickly master core concepts and common techniques.

What is Flexbox?

Flexbox (elastic box layout) is a CSS layout method. By setting the container to display: flex , child elements can be automatically resized and positioned to adapt to the available space.

It consists mainly of two parts:

• Container : Apply display: flex .
• Project (Flex Items) : Direct child elements in the container.

Common properties on containers

1. display: flex

Turn on the Flexbox layout.

 .container {
  display: flex;
}

Note: display: flex makes the container a block-level elastic container, display: inline-flex is an inline elastic container.

2. flex-direction

Define the spindle direction (item arrangement direction).

 .container {
  flex-direction: row | row-reverse | column | column-reverse;
}

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

3. justify-content

Align items on the spindle.

 .container {
  justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly;
}

• center : center
• space-between : the two ends are aligned, the middle spacing is equal
• space-around : The space around each project is equal

4. align-items

Align items on the cross axis (vertical, when the spindle is transverse).

 .container {
  align-items: flex-start | flex-end | center | baseline | stretch;
}

• center : vertical center
• stretch (default): stretch fill container (unless the project has a height set)

5. flex-wrap

Controls whether to wrap the line.

 .container {
  flex-wrap: nowrap | wrap | wrap-reverse;
}

• wrap : Allow line wrap
• wrap-reverse : reverse line break (from bottom to top)

6. align-content

When there are multiple rows, control the alignment between rows ( flex-wrap: wrap is required).

 .container {
  align-content: stretch | center | flex-start | flex-end | space-between | space-around;
}

Common properties on projects

1. flex-grow

Defines the magnification ratio of the item (default is 0, not magnified).

 .item {
  flex-grow: 1; /* occupy the remaining space*/
}

2. flex-shrink

Defines the scale reduction of the project (default is 1, which will be reduced when there is insufficient space).

 .item {
  flex-shrink: 0; /* Shrink is prohibited*/
}

3. flex-basis

Sets the initial size of the item before allocating excess space.

 .item {
  flex-basis: 100px; /* The base width is 100px */
}

Can be set to auto (based on content) or specific values (such as 20% , 150px ).

4. flex (abbreviation)

Abbreviations for flex-grow , flex-shrink and flex-basis .

 .item {
  flex: 1; /* Equivalent to flex: 1 1 0% */
  flex: 0 1 auto; /* Default value*/
  flex: 2 1 150px;
}

It is recommended to use abbreviation, which is more concise.

5. align-self

Allows a single item to override the alignment of align-items .

 .item {
  align-self: center; /* centered alone*/
}

Common layout examples

1. Horizontal and vertical center

 .container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

One-line code implementation is much simpler than traditional methods.

2. Navigation bar (align both ends)

 .nav {
  display: flex;
  justify-content: space-between;
}

3. Contour column layout

 .row {
  display: flex;
}
.column {
  flex: 1;
  margin: 10px;
}

All column heights are automatically consistent, no fixed height is required.

4. Holy Grail layout (head, content, tail)

 .layout {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.header, .footer {
  flex: 0 0 auto;
  height: 60px;
}

.main {
  flex: 1;
  background: #f0f0f0;
}

The main content automatically fills the remaining space.

Practical tips and precautions

• Avoid setting width: 100% on flex projects : may cause layout exceptions, especially when flex-basis or flex-grow work.
• min-width: 0 Fix overflow problem : If there are long text or fixed elements in the flex project, the container may be overflowed. Adding min-width: 0 can cause the project to shrink normally.
• Responsive combined media query : Stack elements on small screens with flex-direction: column .

 @media (max-width: 768px) {
  .container {
    flex-direction: column;
  }
}

Basically these core contents. Flexbox is not complicated, but very practical. Practice a few more layouts (such as cards, navigation, forms) and you will be able to master them quickly.

Don't forget that the browser supports well (IE10) and you can use it with confidence.

The above is the detailed content of CSS flexbox guide. For more information, please follow other related articles on the PHP Chinese website!