Introduction to flexible layout (Flex) in HTML (with code)-HTML Tutorial-php.cn

Introduction to flexible layout (Flex) in HTML (with code)

不言

Release： 2018-08-01 10:53:37

Original

10224 people have browsed it

The content shared with you in this article is about the flexible layout in HTML. Friends in need can refer to it. I hope it can help everyone.

1. What is Flex layout?

Flex is the abbreviation of Flexible Box, which means "flexible layout" and is used to provide maximum flexibility for box-shaped models.
Any container can be designated as Flex layout.

2. Basic concepts

Elements that adopt Flex layout are called Flex containers (flex containers), or "containers" for short. All its child elements automatically become container members, called Flex items (flex items), referred to as "items".

The code is as follows:

3. Container attributes

The following 6 attributes are set on the container.

flex-direction
flex-wrap
flex-flow
justify-content
align-items
##align-content

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>弹性布局</title>
    <style>
     body{
         margin: 0;
         padding: 0;
     }   
     #main
{
    width:50vw;
    height:50vh;
    border:1px solid black;
    display:flex;
    margin: 0 auto;
   
}

     #main p
        {
    flex:1;
    
    }

    
    </style>
</head>
<body>
    <p>
        <p id="main">
            <p style="background:#ff0">1</p>
            <p style="background:#f0f">2</p>
            <p style="background:#f00">3</p>
            <p style="background:#0ff">4</p>
            <p style="background:#0f0">5</p>
        </p>
    </p>    
</body>
</html>

Copy after login

Rendering:

Introduction to flexible layout (Flex) in HTML (with code) ## Tips: Add flex-direction to the css style :column; will become another layout effect. As shown below:

Introduction to flexible layout (Flex) in HTML (with code)
Recommended related articles:

htmlUnderstanding of the latest flex layout

flex uses webservice to upload photos to implement the code

The above is the detailed content of Introduction to flexible layout (Flex) in HTML (with code). For more information, please follow other related articles on the PHP Chinese website!