当前位置：网站首页>Flex flexible layout for mobile terminal page production

Flex flexible layout for mobile terminal page production

2022-06-25 05:01:00 【Dai Sensen】

Preface

Flex yes Flexible Box Abbreviation , Meaning for ” Elastic layout ”, To provide maximum flexibility for box models .
Traditional solutions for layout , Based on the box model , rely on display attribute + position attribute + float attribute . It is very inconvenient for those special layouts , such as , Vertical centering is not easy to achieve .
2009 year ,W3C Put forward a new scheme —-Flex Layout , It's easy 、 complete 、 Responsive implementation of various page layouts . at present , It's supported by all browsers , It means , Now you can use this function safely .

principle
Common properties of parent box
Common properties of sub boxes

principle

By adding... To the parent box flex attribute , To control the position and arrangement of sub boxes

use flex Elements of layout , be called flex Containers , Container for short . All of his child elements automatically become container members , be called flex project , Short for project

    <style> div {
       display: flex; width: 80%; height: 300px; background-color: pink; justify-content: space-around; } div span {
       width: 150px; height: 100px; background-color: rgb(212, 192, 255); margin-right: 5px; flex: 1; } </style>

<body>
    <div>
        <span>1</span>
        <span>2</span>
        <span>3</span>
    </div>
</body>

In the above case code , The parent box added flex, here div It's called a container , And his sub box span For projects .

Common properties of parent box

One justify,align and flex Two times two
It means that there are five important parent box attributes
One is justify start ,justify-content Set the arrangement of sub elements on the spindle
Two align start ,algin-item Set the arrangement of child elements on the side axis （ A single ）;align-content Set the arrangement of the child elements on the side axis （ Multiple lines ）
Two flex start ,flex-wrap Set whether the child element should wrap ,flex-direction: Set the direction of the spindle

justify-content

justify-content Set the arrangement of sub elements on the spindle , However, when using this attribute, you must determine which spindle is

Common attribute values

Case study

  <style> div {
       /*  Add... To your father flex */ display: flex; width: 800px; height: 300px; background-color: pink; /*  The default spindle is x Axis row ,y The axis is the side axis , Elements are arranged along the main axis  */ flex-direction: row; /* justify-content: Set the arrangement of sub elements on the spindle  ; */ justify-content: space-between; } div span {
       width: 150px; height: 100px; background-color: rgb(212, 192, 255); } </style>
<body>
    <div>
        <span>1</span>
        <span>2</span>
        <span>3</span>
    </div>
</body>

flex-wrap

flex-wrap Set whether the child element should wrap , In general , The projects are all in one line .flex-wrap The default attribute definition is no line break , If you can't put it down , Will shrink the width of the child element

Common properties

flex-direction

flex-direction Property determines the direction of the spindle （ That is, the sorting direction of the items ）, The main shaft and the side shaft change , Just look flex-direction Set who is the spindle , The rest is the side shaft , The child elements are arranged along the main axis

Common properties

align-content

align-content Set the arrangement of the child elements on the side axis （ Multiple lines ）, There is no effect in a single line

Common properties

algin-item

algin-item Set the arrangement of child elements on the side axis （ A single ）

Common properties

Common properties of sub boxes

flex

Number of copies of sub items

align-self

The way the items are arranged on their own side

    <style> div {
       display: flex; width: 80%; height: 300px; background-color: pink; align-items: flex-end; } div span {
       width: 150px; height: 100px; background-color: purple; margin-right: 5px; } div span:nth-child(2) {
       order: -1; } div span:nth-child(3) {
       align-self: start; } </style>
</head>

<body>
    <div>
        <span>1</span>
        <span>2</span>
        <span>3</span>
    </div>

order

Property defines the order in which children are arranged （ The order before and after ）

    <style> div {
       display: flex; width: 80%; height: 300px; background-color: pink; align-items: flex-end; } div span {
       width: 150px; height: 100px; background-color: purple; margin-right: 5px; } div span:nth-child(2) {
       order: -1; } div span:nth-child(3) {
       align-self: start; } </style>
</head>

<body>
    <div>
        <span>1</span>
        <span>2</span>
        <span>3</span>
    </div>