Detailed Explanation of Flex Attributes in Elastic Layout

Language 2023-04-16 22:02:56 views: null

flex is the abbreviation of Flexible Box, which means flexible box layout.
When there is no flex attribute, when we want to juxtapose multiple block elements, there are generally three methods commonly used: 1.
Use the float floating attribute
2. Use the position positioning attribute
3. Convert elements to block elements or inline elements through display

Article directory

foreword

The flex layout is to make the layout simpler and easier to achieve the effect of vertical alignment and alignment at both ends. It can also be adapted to screens of different sizes and can be flexibly stretched freely. When the parent element adds a flex layout, its child elements can automatically Arranged horizontally.
Elements laid out with flex are called containers . Child elements in a flex layout are called items

1. What is Flex?

insert image description here

  • The container has two axes by default: the horizontal main axis (main axis) and the vertical cross axis (cross axis)
  • The starting position of the main axis (intersection with the bounding box) is called the main start
  • The end position is called main end
  • The starting position of the cross axis is called cross start
  • The end position is called cross end
  • Items are arranged along the main axis by default. The main axis space occupied by a single item is called main size, and the cross axis space occupied by a single item is called cross size
  • The main axis is referred to as the X axis, and the cross axis is referred to as the Y axis.

2. Properties owned by containers and items

1. Properties of the container

When the element is set to diaplay: flex, it can be specified as a flex layout.
Note that after setting the flex layout, the float, clear and vertical-align properties of the child elements will be invalid ;

1. flex-direction   切换主轴方向
2. flex-wrap        主轴是否换行
3. flex-flow        flex-direction和flex-wrap属性的复合属性
4. justify-content  主轴元素对齐方式
5. align-items      交叉轴元素对齐方式//单行
6. align-content    交叉轴行对齐方式//多行

（1）flex-direction

1、row（默认值）：主轴为水平方向，起点在左端。
2、row-reverse：主轴为水平方向，起点在右端。
3、column：主轴为垂直方向，起点在上沿。
4、column-reverse：主轴为垂直方向，起点在下沿。

insert image description here
insert image description here
insert image description here
insert image description here

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #box{
      
      
            background-color: #ccc;
            width:900px;
            height: 300px;
            display: flex;
        }
        #box{
      
      
            flex-direction: row;
            /* flex-direction: row-reverse; */
            /* flex-direction: column; */
            /* flex-direction: column-reverse */
        }
        .box1{
      
      
            padding: 30px;
        }
    </style>
</head>
<body>
    <div id="box">                 
        <div class="box1" style="background-color:skyblue ;">1</div>
        <div class="box1" style="background-color:greenyellow;">2</div>
        <div class="box1" style="background-color:wheat ;">3</div>
    </div>
</body>
</html>

（2）flex-wrap

1、nowrap (默认值) 不换行压缩宽度
2、wrap    换行(换行产生的间隔可以使用align-content解决)
3、wrap-reverse 反向换行

insert image description here
insert image description here
insert image description here

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #box{
      
      
            background-color: #ccc;
            width:400px;
            height: 400px;
            display: flex;
        }
        .box1{
      
      
            height:100px;
            width: 100px;
            text-align:center;
        }
    </style>
</head>
<body>
    <div id="box" style="flex-wrap: nowrap ;">                 
    <!-- <div id="box" style="flex-wrap: wrap ;">                  -->
    <!-- <div id="box" style="flex-wrap: wrap-reverse;">                  -->
        <div class="box1" style="background-color:skyblue ;">1</div>
        <div class="box1" style="background-color:greenyellow;">2</div>
        <div class="box1" style="background-color:darkgreen ;">3</div>
        <div class="box1" style="background-color:burlywood;">4</div>
        <div class="box1" style="background-color:violet ;">5</div>
        <div class="box1" style="background-color:tomato;">6</div>
    </div>
</body>
</html>

（3）flex-flow

flex-low:flex-direction flex-wrap
flex-low:row/row-reverse/column/column-reverse nowrap/wrap/wrap-reverses
//顺序可以倒过来
//就是 flex-direction 和 flex-wrap 的组合，简写，同上，这里不详细介绍

（4）justify-content

1、flex-start 左对齐
2、flex-end   右对齐
3、center     居中对齐
4、space-between 两端对齐
5、space-around  均分
6、space-evenly  等分

insert image description here

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #box {
      
      
            background-color: #ccc;
            width: 500px;
            height: 700px;
            display: flex;
        }
        #box {
      
      
            justify-content: flex-start;
            /* justify-content: flex-end; */
            /* justify-content: center; */
            /* justify-content: space-between; */
            /* justify-content: space-around; */
            /* justify-content: space-evenly; */
        }
        .box1 {
      
      
            height: 100px;
            width: 100px;
        }
    </style>
</head>

<body>
    <div id="box">
        <div class="box1" style="background-color:skyblue ;">1</div>
        <div class="box1" style="background-color:greenyellow;">2</div>
        <div class="box1" style="background-color:darkgreen ;">3</div>
    </div>
</body>

</html>

（5）align-items

The attribute added to the container (parent element) sets the alignment style of the item (child element) on the cross axis (Y axis). When the
item (child element) is set to align-self, it will overwrite the container (parent element) the align-items

1、flex-start：交叉轴的起点对齐。
2、flex-end：交叉轴的终点对齐。
3、center：交叉轴的中点对齐。
4、baseline: 项目的第一行文字的基线对齐。
5、stretch（默认值）伸展：如果项目未设置高度或设为auto，将占满整个容器的高度。

insert image description here
insert image description hereinsert image description here

insert image description here
insert image description here

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #box {
      
      
            background-color: #ccc;
            width: 300px;
            height: 300px;
            display: flex;
        }
        #box {
      
      
            /* align-items:flex-start; */
            /* align-items:flex-end; */
            /* align-items:center; */
            /* align-items:baseline; */
            /* align-items:stretch; */
        }
        .box1 {
      
      
            height: 100px;  /*align-items:baseline 不设置高度*/
            width: 100px;
        }
    </style>
</head>

<body>
    <div id="box">
        <div class="box1" style="background-color:skyblue;">1</div>
        <div class="box1" style="background-color:greenyellow;">2</div>
        <div class="box1" style="background-color:darkgreen ;">3</div>
    </div>
</body>

</html>

（6）align-content

justify-conent, align-items, align-content are all extremely similar.

1、flex-start 与交叉轴的起点对齐(左对齐)
2、flex-end   与交叉轴的终点对齐(右对齐 )
3、center     居中对齐
4、space-between 与交叉轴两端对齐，轴线之间的间隔平均分布
5、space-around  每根轴线两侧的间隔都相等，平均分配
6、stretch(默认值)      多行占满整个交叉轴

insert image description here
insert image description here
insert image description here
insert image description here
insert image description here
insert image description here

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #box {
      
      
            background-color: #ccc;
            width: 400px;
            height: 400px;
            display: flex;
            flex-wrap: wrap;
        }
        #box {
      
      
            align-content:flex-start;
            /* align-content:flex-end; */
            /* align-content:center; */
            /* align-content:space-between; */
            /* align-content:space-around; */
            /* align-content: stretch; */
        }
        .box1 {
      
      
            height: 100px;
            width: 100px;
        }
    </style>
</head>

<body>
    <div id="box">
        <div class="box1" style="background-color:skyblue;">1</div>
        <div class="box1" style="background-color:greenyellow;">2</div>
        <div class="box1" style="background-color:darkgreen ;">3</div>
        <div class="box1" style="background-color:tomato ;">4</div>
        <div class="box1" style="background-color:violet ;">5</div>
        <div class="box1" style="background-color:slateblue ;">6</div>
        <div class="box1" style="background-color:sienna ;">7</div>
    </div>
</body>

</html>

2. Properties of the project

1、align-self: 覆盖container align-items 属性
2、flex-grow：分配剩余空间(前提是有剩余空间可分配)
3、flex-shrinik: 压缩
4、flex-basis: 有效宽度
5、flex缩写
6、order 排序

（1）align-self

The align-items of the container can be overridden to define the alignment of an item

1、flex-start：交叉轴的起点对齐。
2、flex-end：交叉轴的终点对齐。
3、center：交叉轴的中点对齐。
4、baseline: 项目的第一行文字的基线对齐。
5、stretch 在交叉轴方向上拉伸
6、auto (默认值)继承 align-items 属性值
同上容器的align-items属性效果一致，这里不详细介绍

（2）flex-grow

默认值为0不放大,保持初始值
initial 设置默认值,与设置0的效果是一样的
inherit 从父元素继承该属性。
n    正数，代表分配剩余空间的几份

insert image description here

（3）flex-shrink

默认值为1
initial 设置初始默认值,与 设置为1效果一样
0  禁止收缩,保持原始尺寸
n  压缩系数

If the flex-shrink property of all items is 1, when the space is insufficient, they will be proportionally reduced. If the flex-shrink property of an item is 0 and other items are 1, the former will not shrink when there is insufficient space.

insert image description here

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #box {
      
      
            background-color: #ccc;
            width: 300px;
            height: 300px;
            display: flex;
        }
        #box div:nth-of-type(1){
      
      flex-shrink: 1; }
        #box div:nth-of-type(2){
      
      flex-shrink: 2; }
        #box div:nth-of-type(3){
      
       flex-shrink: 0; }
        #box div:nth-of-type(4){
      
       flex-shrink: 1;}
        .box1 {
      
      
            height: 100px;
            width: 100px;
        }
    </style>
</head>

<body>
    <div id="box">
        <div class="box1" style="background-color:skyblue;">1</div>
        <div class="box1" style="background-color:greenyellow;">2</div>
        <div class="box1" style="background-color:darkgreen ;">3</div>
        <div class="box1" style="background-color:tomato ;">4</div>
    </div>
</body>

</html>

（4）flex-basis

The default value is auto, which is the original size of the item.
The flex-basis property defines how much space an item occupies on the main axis (main size) before allocating excess space. Based on this property, the browser calculates whether there is extra space in the main axis.
It is equivalent to the width attribute, setting a fixed width

(5) flex (abbreviation)

The flex property is a shorthand for flex-grow, flex-shrink and flex-basis, and the default value is 0 1 auto. The last two attributes are optional.
This property has two shortcut values: flex:auto = flex:1 1 auto and flex:none= flex:0 0 auto.

（6）order

The order attribute defines the sort order of the items. The smaller the value, the higher the ranking, and the default is 0.

insert image description here

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #box {
      
      
            background-color: #ccc;
            width: 300px;
            height: 200px;
            display: flex;
        }
        #box div:nth-of-type(1){
      
      order:1 }
        #box div:nth-of-type(2){
      
      order:0 }
        #box div:nth-of-type(3){
      
      order:3 }
        #box div:nth-of-type(4){
      
      order:2 }
        .box1 {
      
      
            height: 100px;
            width: 100px;
        }
    </style>
</head>

<body>
    <div id="box">
        <div class="box1" style="background-color:skyblue;">1</div>
        <div class="box1" style="background-color:greenyellow;">2</div>
        <div class="box1" style="background-color:darkgreen ;">3</div>
        <div class="box1" style="background-color:tomato ;">4</div>
    </div>
    <div id="box">
        <p class="box1" style="background-color:skyblue;">1</p>
        <p class="box1" style="background-color:greenyellow;">2</p>
        <p class="box1" style="background-color:darkgreen ;">3</p>
        <p class="box1" style="background-color:tomato ;">4</p>
    </div>
</body>

</html>

Guess you like

Origin blog.csdn.net/hello_woman/article/details/127420548
Recommended
Ranking
Linux关机和重启详解（shutdown、halt、poweroff、reboot、init）
Netty work notes 0007---NIO's three core component relationships
Knife4j tutorial
2021.10.29，内容:什么时候用接口和抽象类
How to solve the problem that changing the memory frequency causes the computer to become unusable?
SpringMVC Tutorial - Controller
linux learning skills -Linux 25 transport Vega paid special privileges and facl extension
Financial quarterly report evaluation report data automatic generation 1.0
Agile Development Series - The Values of Agile Development
scrapy achieve browsercookie Middleware
Daily
More
2024-05-19(0)
2024-05-18(31)
2024-05-17(6)
2024-05-16(23)
2024-05-15(5)
2024-05-14(9)
2024-05-13(8)
2024-05-12(28)
2024-05-11(32)
2024-05-10(34)

Code World

© 2018 codetd.com