Home > Article > Web Front-end > How to declare box elasticity in css3

How to declare box elasticity in css3

醉折花枝作酒筹Original: 2021-06-02 10:07:471479browse

css3 declares the box elasticity by setting the value of the display attribute to flex or inline-flex. The flexible box is composed of a flexible container (Flex container) and a flexible sub-element (Flex item). The flexible container contains one or more flexible sub-elements.

The operating environment of this tutorial: Windows 7 system, CSS3&&HTML5 version, Dell G3 computer.

The flexible box is composed of a flexible container (Flex container) and a flexible sub-element (Flex item).

A flexible container is defined as a flexible container by setting the value of 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.

Flexible sub-elements are usually displayed in one line within the flexible box. By default there is only one row per container.

Example:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <!DOCTYPE html>
<html>
<head>
<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;
    text-align: center;
    line-height: 100px;
}
</style>
</head>
<body>
 
<div class="flex-container">
  <div class="flex-item">弹性容器 1</div>
  <div class="flex-item">弹性容器 2</div>
  <div class="flex-item">弹性容器 3</div> 
</div>
 
</body>
</html>
</html>

Effect:

How to declare box elasticity in css3

Recommended learning: css video tutorial

The above is the detailed content of How to declare box elasticity in css3. For more information, please follow other related articles on the PHP Chinese website!

html5 css css3 display flex

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：How to eliminate aliasing in cssNext article：How to eliminate aliasing in css

See more

How to declare box elasticity in css3

Related articles