What are the advantages and disadvantages of flex layout-CSS Tutorial-php.cn

What are the advantages and disadvantages of flex layout

coldplay.xixi

Release： 2021-01-28 18:00:51

Original

11468 people have browsed it

The advantages and disadvantages of flex layout are: 1. The advantage of flex layout is that it is easy to use, and it is easy to achieve a certain layout effect according to flex rules; 2. The disadvantage is that browser compatibility is relatively poor and can only be compatible with ie9 and above.

The operating environment of this article: Acer S40-51, HBuilderX.3.0.5&&css3 version, Windows10 Home Chinese version

Recommended: css Video tutorial

The advantages and disadvantages of flex layout are:

CSS3 Flexible Box (Flexible Box or flexbox) is a type of layout that needs to be adapted when the page needs to A layout method that ensures elements behave appropriately across different screen sizes and device types.

The purpose of introducing the flexible box layout model is to provide a more efficient way to arrange, align and allocate empty space to sub-elements in a container.

The advantages and disadvantages of the flex layout introduced by css3:

The advantage is that it is easy to use and it is easy to achieve a certain layout effect according to flex rules.
The disadvantage is: the browser compatibility is relatively poor and can only be compatible with ie9 and above.

Introduction to flex layout introduced by css3:

The flexible box is composed of a flexible container (Flex container) and a flexible sub-element (Flex item). A flex container is defined as a flex container by setting the display property to flex or inline-flex. A flex container contains one or more flex child elements.

Note: The outside of the flexible container and inside the flexible sub-element are rendered normally. The flex box only defines how the flex child elements are laid out within the flex container. Flex child elements are usually displayed in a row within the flex box. By default there is only one row per container.

Example:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网</title> 
<style> 
.flex-container {
    display: -webkit-flex;
    display: flex;
    width: 400px;
    height: 250px;
    background-color: lightgrey;
}
.flex-item {
    background-color: cornflowerblue;
    width: 100px;
    height: 100px;
    margin: 10px;
}
</style>
</head>
<body>
<div class="flex-container">
  <div class="flex-item">flex item 1</div>
  <div class="flex-item">flex item 2</div>
  <div class="flex-item">flex item 3</div>  
</div>
</body>
</html>

Copy after login

The effect is as follows:

What are the advantages and disadvantages of flex layout

If you want to learn more about programming, please pay attention to the php training column!

The above is the detailed content of What are the advantages and disadvantages of flex layout. For more information, please follow other related articles on the PHP Chinese website!