Flex layout example (2)

【Foreword】

First of all, what are the common problems that flex appears to solve?

First, the page row arrangement layout

Second, the div is centered up, down, left and right

【Details】

First, the page row arrangement layout

It is common to display two divs on the left and right side by side, which can be handled by floating layout

<style type="text/css">
.main{
     height: 300px;
     width: 600px;
}
.left,.right{
     border: 1px solid red;
     height: 200px;
     text-align: center;
     line-height: 200px;
}
.left{
       width: 48%;
       float: left;
}
.right{
       width: 48%;
       float: right;
}
 .clear{
       clear: both;
}
</style>
<body>
    <div class="main">
            <div class="left">left area</div>
            <div class="right">Right area</div>
            <div class="clear"></div>
    </div>
</body>

This layout has two disadvantages

1. An empty div is needed to clear the float. Of course, other methods of clearing the float can also be used, but the float needs to be cleared here so as not to affect the layout below.

2. When the width of .left and .right is fixed and the browser width becomes too narrow, .right will be squeezed to the bottom

Solution : Use display:flex layout to solve these two shortcomings

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>flex layout example</title>
    <style type="text/css">
        *{margin: 0;padding: 0}
        .main{
            width: 600px;
            height: 300px;
            border: 1px solid rebeccapurple;
            margin: 10px auto;
            display: flex;
            justify-content: space-around;
            align-items: center;
            padding: 20px;
            box-sizing: border-box;
        }
        .left,.right{
            width: 48%;
            height: 200px;
            border: 1px solid red;
            display: flex;
            align-items: center;
            justify-content: space-around;
        }
    </style>
</head>
<body>
    <div class="main">
            <div class="left">left area</div>
            <div class="right">Right area</div>
    </div>
</body>
</html>

The parent element defines display: flex, the width of the child element is defined by flex, and flex: 1 is to divide the parent element equally. the same proportion

Similarly, when dividing into two equal parts, it is divided into two equal parts; when dividing into three equal parts, it is distributed according to the amount of flex.

flex is the proportion, so the layout is much more convenient

(2) The div is centered up, down, left and right

In addition to setting the display:flex; property on the parent element, the child element can be centered and positioned.

If you want to center the content in the child element, you can set the display:flex; property on the child element.

Case:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>flex layout example</title>
    <style type="text/css">
        *{margin: 0;padding: 0}
        .main{
            width: 600px;
            height: 300px;
            border: 1px solid rebeccapurple;
            margin: 10px auto;
            display: flex;
            justify-content: space-around;
            align-items: center;
            padding: 20px;
            box-sizing: border-box;
        }
        .left{
            width: 48%;
            height: 200px;
            border: 1px solid red;
            display: flex;
            align-items: center;
            justify-content: space-around;
        }
    </style>
</head>
<body>
    <div class="main">
            <div class="left">Center area</div>
    </div>
</body>
</html>

It is more convenient to use this method when the width and height of the div are unknown

These are two of the more common and useful examples I use when using flex layout

Flex layout example (2)

Guess you like