What is css3 flexbox-CSS Tutorial-php.cn

What is css3 flexbox

WBOY

Release： 2021-12-22 11:57:57

Original

1982 people have browsed it

In css3, the flexible box is a layout method that provides a more effective way to allocate space in order to adapt the page to different screen sizes and device types; you can use the display attribute to define the flexible box. The syntax is "display:flex" or "display:inline-flex".

What is css3 flexbox

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

What is css3 flexible box

Flexible box is a new layout mode of CSS3.

CSS3 Flexible Box (Flexible Box or flexbox) is a layout method that ensures that elements have appropriate behavior when the page needs to adapt to 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 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.

The flexible container contains one or more flexible sub-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.

The following elements show the elastic child elements displayed in a row, from left to right:

The example is as follows:

<html>
<head>
<meta charset="utf-8"> 
<title>123</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

Output result:
What is css3 flexbox