Home>Article>Web Front-end> How to use CSS flexible box model flex in layout

How to use CSS flexible box model flex in layout

WJ forward: 2020-05-30 10:42:18 2543browse

Application of CSS flexible box model flex in layout

Element centering

【1】Use main-axis alignment justify-content and cross-axis alignment align-items on the scalable container

  DEMO

【2】Use margin:auto

  DEMO

## on the scalable item #Align both ends

  DEMO
 DEMO
 DEMO
 DEMO

Align bottom

  DEMO
 DEMO
 DEMO
 DEMO

Input box button

etc. Sub-layout

Multi-column adaptive layout

   left
 left
 
  center
 center
 
  right
 right

Hanging layout

  左侧悬挂
 主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容

Full screen layout

   top
 
   left
 
   right
 
 
 
  bottom

The above is the entire application of CSS flexible box model flex in layout.

Related references:

php中文网

The above is the detailed content of How to use CSS flexible box model flex in layout. For more information, please follow other related articles on the PHP Chinese website!

Statement：

This article is reproduced at:51dev.com. If there is any infringement, please contact admin@php.cn delete

Previous article：CSS sticky positioning sticky detailed explanation Next article：CSS sticky positioning sticky detailed explanation

See more

How to use CSS flexible box model flex in layout

Related articles