What is flexible box layout flex?-CSS Knowledge-php.cn

What is flexible box layout flex?

藏色散人

Release： 2021-01-11 11:21:47

Original

7871 people have browsed it

This article mainly gives you a brief introduction to the basic knowledge of css flex box layout.

In the previous article, I introduced you to css Grid grid layout. This section continues to introduce to you the flex elastic layout in css.

flex elastic layout is an effective layout method in css3.

The purpose of introducing flex box layout model (flex box) is to provide a more efficient way to arrange, align and allocate empty space for items in a container. The flexbox layout model can work normally even if the size of the items in the container is unknown or changes dynamically.

Or elements that behave predictably when page layouts must adapt to different screen sizes and different display devices. It doesn't use floats, and the edges of the flex container don't collapse with the edges of its content.

So what is a flex container?

Elements that use Flex layout are called Flex containers (containers), referred to as "containers".

Recommended flex layout video tutorial: "2018 Latest 5 Flex Flexible Layout Video Tutorials"

flex elastic layoutSimple code example:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>flex布局</title>
</head>
<style>
 .box1{
        background: #1F376D;
 height: 500px;
 width: 500px;
 }
    .box2{
        background: #745A74;
 height: 500px;
 width: 500px;
 }
    .box3{
        background: #26A3CF;
 height: 500px;
 width: 500px;
 }
    .box4{
        background: #CCCC66;
 height: 500px;
 width: 500px;
 }
</style>
<body style="display: flex; flex-direction: row">
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box4"></div>
<div class="box3"></div>
<div class="box1"></div>

</body>
</html>

Copy after login

The effect is as follows:

What is flexible box layout flex?

We can set the use of display: flex ; attribute, which allows the box to have flexible layout properties.

flex-direction attributeSpecifies the direction of the flexible item.

The project is a member of the container, called a Flex project (item), or "project" for short.

flex-direction can have different attribute values:

row: Default value. Flexible items will be displayed horizontally, as in this example the items are displayed horizontally from right to left.

row-reverse: Same as row, but in reverse order.

column: Flexible items will be displayed vertically.

column-reverse: Same as column, but in reverse order.

initial: Set this property to its default value.

inherit: Inherit this attribute from the parent element.

Note: If the element is not an element of the flexbox object, the flex-direction property has no effect.

This article is a brief introduction to flex elastic box layout. I hope it will be helpful to friends who are interested!

The above is the detailed content of What is flexible box layout flex?. For more information, please follow other related articles on the PHP Chinese website!