ICode9
精准搜索请尝试： 精确搜索
首页
编程语言>
数据库
系统相关
互联网
其他分享
Python
Java
JavaScript
android
PHP
首页 > 其他分享> 文章详细

学习一下Flex布局吧，很灵活的一种布局方式

2020-12-11 11:02:21  阅读：215  来源： 互联网

标签：Flex 灵活 项目 布局 item 1px flex Document 属性


提示：这是我的个人IT资源网站，所有资源都免费，注册登录后就可以看到密码，需要什么大家尽情选取！
我们如何在编程的时候可以游刃有余，不至于下手难，那就需要在平时的学习中尽可能扎实地掌握知识点，还有我们经常会感到，学过某个知识后，过个几天就容易忘的一干二净，其实想解决这个问题，有效的方法就是加深记忆并记录，加深记忆就是学的时候我们要动手去实现，记录就是我们理解之后，要对知识点进行整理总结，其实学习真没有什么便捷的方法，除非你有超能力，有过目不忘的本领，哈哈哈哈哈哈，反正我是普通人，所以觉得这个方法还是挺有效的，大家不妨坚持下来试试看，包括我也是，坚持中✊
今天我打算学习一下CSS3的flex布局，通过flex布局我们很容易达到某个布局效果，缺点就是浏览器兼容性差，只能兼容IE9及以上的浏览器，但是随着时间的推移，浏览器也在不断升级更新，所以兼容性会越来越好的。

目录

Flex布局是什么

Flex布局就是弹性布局，任何一个容器都可以指定为Flex布局。
块级元素
.box{
display:flex;
}
行内元素也可以使用Flex布局
.box{
display:inline-flex;
}
Webkit内核的浏览器，必须加上-webkit前缀，例如苹果系设备的Safari浏览器。
.box{
display:-webkit-flex;
display:flex;
}
注意，设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。
尽然提及这三个属性了，那我们必须看一下这三个属性是干啥的。

float属性为浮动属性，定义元素在哪个方向浮动，该属性有四个值
left：元素向左浮动
right：元素向右浮动
none：默认值。元素不浮动，并会显示在其文本中出现的位置
inherit：规定应该从父元素继承float属性的值
clear属性规定元素的哪一侧不允许浮动其他元素
left：在左侧不允许浮动元素
right：在右侧不允许浮动元素
both：在左右两侧均不允许浮动元素
none：默认值。允许浮动元素出现在两侧
inherit：规定应该从父元素继承clear属性的值
vertical-align属性设置元素的垂直对齐方式
baseline：默认。元素放置在父元素的基线上
sub：垂直对齐文本的下标
super：垂直对齐文本的上标
top：把元素的顶端与行中最高元素的顶端对齐
text-top：把元素的顶端与父元素字体的顶端对齐
middle：把此元素放置在父元素的中部
bottom：把元素的顶端与行中最低的元素的顶端对齐
text-bottom：把元素的低端与父元素字体的低端对齐
length
%：使用"line-height"属性的百分比值来排列此元素。允许使用负值
inherit：规定应该从父元素继承vertical-align属性的值

我们用float来试试，看看是否会失效

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div style="width: 200px;height: 200px;border: 1px red solid;">
        <p style="float:left">123</p>
        <p>456</p>
        <font color="red">div未使用flex布局</font>
    </div>
    <div style="display: flex;width: 200px;height: 200px;border: 1px red solid;">
        <p>123</p>
        <p style="float:right">456</p>
        <font color="red">div使用flex布局</font>
    </div>
</body>

</html>

在这里插入图片描述

基本概念

采用Flex布局的元素，称为Flex容器，它的所有子元素自动成为容器成员，简称为Flex项目
在这里插入图片描述
容器默认存在两根轴：水平的主轴(main axis)和垂直的交叉轴(cross axis)。主轴的开始位置(与边框的交叉点)叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。
项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。
大家需要仔细看一下这个图，因为下面所有属性的布局都是以这个图的标志为基础讲解的

容器的属性

看一下都有什么属性和属性值，会实现什么效果

  • flex-direction属性决定主轴的方向（即项目的排列方向）
    .box{
    flex-direction:row|row-reverse|column|column-reverse
    }
    row(默认值)：主轴为水平方向，起点在左端
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div style="display: flex;flex-direction:row;width: 200px;height: 200px;border: 1px red solid;">
        <div>flex项目一</div>
        <div>flex项目二</div>
    </div>
</body>

</html>

在这里插入图片描述
row-reverse：主轴为水平方向，起点在右端

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div style="display: flex;flex-direction:row-reverse;width: 200px;height: 200px;border: 1px red solid;">
        <div>flex项目一</div>
        <div>flex项目二</div>
    </div>
</body>

</html>

在这里插入图片描述

column：主轴为垂直方向，起点在上沿

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div style="display: flex;flex-direction:column;width: 200px;height: 200px;border: 1px red solid;">
        <div>flex项目一</div>
        <div>flex项目二</div>
    </div>
</body>

</html>

在这里插入图片描述

column-reverse：主轴为垂直方向，起点在下沿

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div style="display: flex;flex-direction:column-reverse;width: 200px;height: 200px;border: 1px red solid;">
        <div>flex项目一</div>
        <div>flex项目二</div>
    </div>
</body>

</html>

在这里插入图片描述

  • flex-wrap属性默认情况下，项目都排在一条线（又称“轴线”）上。flex-wrap属性定义，如果一条轴线排不下，如何换行
    .box{
    flex-wrap:nowrap|wrap|wrap-reverse;
    }
    nowrap(默认)：不换行
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .item {
            width: 200px;
            height: 80px;
            border: 1px red solid;
        }
    </style>
</head>

<body>
    <div style="display: flex;flex-direction:row;flex-wrap:nowrap;width: 800px;height: 200px;border: 1px blue solid;">
        <div class="item">flex项目一</div>
        <div class="item">flex项目二</div>
        <div class="item">flex项目三</div>
        <div class="item">flex项目四</div>
        <div class="item">flex项目五</div>
        <div class="item">flex项目六</div>
    </div>
</body>

</html>

在这里插入图片描述
wrap：换行，第一行在上方

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .item {
            width: 200px;
            height: 80px;
            border: 1px red solid;
        }
    </style>
</head>

<body>
    <div style="display: flex;flex-direction:row;flex-wrap:wrap;width: 800px;height: 200px;border: 1px blue solid;">
        <div class="item">flex项目一</div>
        <div class="item">flex项目二</div>
        <div class="item">flex项目三</div>
        <div class="item">flex项目四</div>
        <div class="item">flex项目五</div>
        <div class="item">flex项目六</div>
    </div>
</body>

</html>

在这里插入图片描述
wrap-reverse：换行，第一行在下方

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .item {
            width: 200px;
            height: 80px;
            border: 1px red solid;
        }
    </style>
</head>

<body>
    <div
        style="display: flex;flex-direction:row;flex-wrap:wrap-reverse;width: 800px;height: 200px;border: 1px blue solid;">
        <div class="item">flex项目一</div>
        <div class="item">flex项目二</div>
        <div class="item">flex项目三</div>
        <div class="item">flex项目四</div>
        <div class="item">flex项目五</div>
        <div class="item">flex项目六</div>
    </div>
</body>

</html>

在这里插入图片描述

  • flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap

.box{
flex-flow:;
}
实现一下水平排列换行反转

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .item {
            width: 200px;
            height: 80px;
            border: 1px red solid;
        }
    </style>
</head>

<body>
    <div style="display: flex;flex-flow:row wrap-reverse;width: 800px;height: 200px;border: 1px blue solid;">
        <div class="item">flex项目一</div>
        <div class="item">flex项目二</div>
        <div class="item">flex项目三</div>
        <div class="item">flex项目四</div>
        <div class="item">flex项目五</div>
        <div class="item">flex项目六</div>
    </div>
</body>

</html>

在这里插入图片描述

  • justify-content属性定义了项目在主轴上的对齐方式

.box{
justify-content:flex-start|flex-end|center|space-between|space-around;
}

flex-start(默认值)：左对齐

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .item {
            width: 200px;
            height: 80px;
            border: 1px red solid;
        }
    </style>
</head>

<body>
    <div
        style="display: flex;flex-direction:row;justify-content:flex-start;width: 800px;height: 200px;border: 1px blue solid;">
        <div class="item">flex项目一</div>
        <div class="item">flex项目二</div>
        <div class="item">flex项目三</div>
    </div>
</body>

</html>

在这里插入图片描述
flex-end：右对齐

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .item {
            width: 200px;
            height: 80px;
            border: 1px red solid;
        }
    </style>
</head>

<body>
    <div
        style="display: flex;flex-direction:row;justify-content:flex-end;width: 800px;height: 200px;border: 1px blue solid;">
        <div class="item">flex项目一</div>
        <div class="item">flex项目二</div>
        <div class="item">flex项目三</div>
    </div>
</body>

</html>

在这里插入图片描述
center：居中

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .item {
            width: 200px;
            height: 80px;
            border: 1px red solid;
        }
    </style>
</head>

<body>
    <div
        style="display: flex;flex-direction:row;justify-content:center;width: 800px;height: 200px;border: 1px blue solid;">
        <div class="item">flex项目一</div>
        <div class="item">flex项目二</div>
        <div class="item">flex项目三</div>
    </div>
</body>

</html>

在这里插入图片描述
space-between：两端对齐，项目之间的间隔都相等

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .item {
            width: 200px;
            height: 80px;
            border: 1px red solid;
        }
    </style>
</head>

<body>
    <div
        style="display: flex;flex-direction:row;justify-content:space-between;width: 800px;height: 200px;border: 1px blue solid;">
        <div class="item">flex项目一</div>
        <div class="item">flex项目二</div>
        <div class="item">flex项目三</div>
    </div>
</body>

</html>

在这里插入图片描述
space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .item {
            width: 200px;
            height: 80px;
            border: 1px red solid;
        }
    </style>
</head>

<body>
    <div
        style="display: flex;flex-direction:row;justify-content:space-around;width: 800px;height: 200px;border: 1px blue solid;">
        <div class="item">flex项目一</div>
        <div class="item">flex项目二</div>
        <div class="item">flex项目三</div>
    </div>
</body>

</html>

在这里插入图片描述

  • align-items属性定义项目在交叉轴上如何对齐
    .box{
    align-items:flex-start|flex-end|center|baseline|stretch;
    }
    flex-start：交叉轴的起点对齐
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .item {
            width: 200px;
            height: 80px;
            border: 1px red solid;
        }
    </style>
</head>

<body>
    <div
        style="display: flex;flex-direction:row;align-items:flex-start;width: 800px;height: 200px;border: 1px blue solid;">
        <div class="item">flex项目一</div>
        <div class="item">flex项目二</div>
        <div class="item">flex项目三</div>
    </div>
</body>

</html>

在这里插入图片描述
flex-end：交叉轴的终点对齐

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .item {
            width: 200px;
            height: 80px;
            border: 1px red solid;
        }
    </style>
</head>

<body>
    <div
        style="display: flex;flex-direction:row;align-items:flex-end;width: 800px;height: 200px;border: 1px blue solid;">
        <div class="item">flex项目一</div>
        <div class="item">flex项目二</div>
        <div class="item">flex项目三</div>
    </div>
</body>

</html>

在这里插入图片描述
center：交叉轴的中点对齐

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .item {
            width: 200px;
            height: 80px;
            border: 1px red solid;
        }
    </style>
</head>

<body>
    <div style="display: flex;flex-direction:row;align-items:center;width: 800px;height: 200px;border: 1px blue solid;">
        <div class="item">flex项目一</div>
        <div class="item">flex项目二</div>
        <div class="item">flex项目三</div>
    </div>
</body>

</html>

在这里插入图片描述
baseline：项目的第一行文字的基线对齐

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .item {
            width: 200px;
            height: 80px;
            border: 1px red solid;
        }
    </style>
</head>

<body>
    <div
        style="display: flex;flex-direction:row;align-items:baseline;width: 800px;height: 200px;border: 1px blue solid;">
        <div class="item">flex项目一</div>
        <div class="item">flex项目二</div>
        <div class="item">flex项目三</div>
    </div>
</body>

</html>

在这里插入图片描述
stretch(默认值)：如果项目未设置高度或设为auto，将占满整个容器的高度

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .item {
            width: 200px;
            border: 1px red solid;
        }
    </style>
</head>

<body>
    <div
        style="display: flex;flex-direction:row;align-items:stretch;width: 800px;height: 200px;border: 1px blue solid;">
        <div class="item">flex项目一</div>
        <div class="item">flex项目二</div>
        <div class="item">flex项目三</div>
    </div>
</body>

</html>

在这里插入图片描述

  • align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用
    .box{
    align-content:flex-start|flex-end|center|space-between|space-around|stretch;
    }
    多根轴线，我理解为容器内的项目有多行时，就存在多根主轴线，大家可以和上面的align-items属性对比一下
    flex-start：与交叉轴的起点对齐
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .item {
            width: 200px;
            border: 1px red solid;
        }
    </style>
</head>

<body>
    <div
        style="display: flex;flex-direction:row;flex-wrap:wrap;align-content:flex-start;width: 800px;height: 200px;border: 1px blue solid;">
        <div class="item">flex项目一</div>
        <div class="item">flex项目二</div>
        <div class="item">flex项目三</div>
        <div class="item">flex项目四</div>
        <div class="item">flex项目五</div>
        <div class="item">flex项目六</div>
        <div class="item">flex项目七</div>
        <div class="item">flex项目八</div>
        <div class="item">flex项目九</div>
    </div>
</body>

</html>

在这里插入图片描述
flex-end：与交叉轴的终点对齐

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .item {
            width: 200px;
            border: 1px red solid;
        }
    </style>
</head>

<body>
    <div
        style="display: flex;flex-direction:row;flex-wrap:wrap;align-content:flex-end;width: 800px;height: 200px;border: 1px blue solid;">
        <div class="item">flex项目一</div>
        <div class="item">flex项目二</div>
        <div class="item">flex项目三</div>
        <div class="item">flex项目四</div>
        <div class="item">flex项目五</div>
        <div class="item">flex项目六</div>
        <div class="item">flex项目七</div>
        <div class="item">flex项目八</div>
        <div class="item">flex项目九</div>
    </div>
</body>

</html>

在这里插入图片描述
center：与交叉轴的中点对齐

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .item {
            width: 200px;
            border: 1px red solid;
        }
    </style>
</head>

<body>
    <div
        style="display: flex;flex-direction:row;flex-wrap:wrap;align-content:center;width: 800px;height: 200px;border: 1px blue solid;">
        <div class="item">flex项目一</div>
        <div class="item">flex项目二</div>
        <div class="item">flex项目三</div>
        <div class="item">flex项目四</div>
        <div class="item">flex项目五</div>
        <div class="item">flex项目六</div>
        <div class="item">flex项目七</div>
        <div class="item">flex项目八</div>
        <div class="item">flex项目九</div>
    </div>
</body>

</html>

在这里插入图片描述
space-between：与交叉轴两端对齐，轴线之间的间隔平均分布

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .item {
            width: 200px;
            border: 1px red solid;
        }
    </style>
</head>

<body>
    <div
        style="display: flex;flex-direction:row;flex-wrap:wrap;align-content:space-between;width: 800px;height: 200px;border: 1px blue solid;">
        <div class="item">flex项目一</div>
        <div class="item">flex项目二</div>
        <div class="item">flex项目三</div>
        <div class="item">flex项目四</div>
        <div class="item">flex项目五</div>
        <div class="item">flex项目六</div>
        <div class="item">flex项目七</div>
        <div class="item">flex项目八</div>
        <div class="item">flex项目九</div>
    </div>
</body>

</html>

在这里插入图片描述
space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .item {
            width: 200px;
            border: 1px red solid;
        }
    </style>
</head>

<body>
    <div
        style="display: flex;flex-direction:row;flex-wrap:wrap;align-content:space-around;width: 800px;height: 200px;border: 1px blue solid;">
        <div class="item">flex项目一</div>
        <div class="item">flex项目二</div>
        <div class="item">flex项目三</div>
        <div class="item">flex项目四</div>
        <div class="item">flex项目五</div>
        <div class="item">flex项目六</div>
        <div class="item">flex项目七</div>
        <div class="item">flex项目八</div>
        <div class="item">flex项目九</div>
    </div>
</body>

</html>

在这里插入图片描述
stretch(默认值)：轴线占满整个交叉轴

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .item {
            width: 200px;
            border: 1px red solid;
        }
    </style>
</head>

<body>
    <div
        style="display: flex;flex-direction:row;flex-wrap:wrap;align-content:stretch;width: 800px;height: 200px;border: 1px blue solid;">
        <div class="item">flex项目一</div>
        <div class="item">flex项目二</div>
        <div class="item">flex项目三</div>
        <div class="item">flex项目四</div>
        <div class="item">flex项目五</div>
        <div class="item">flex项目六</div>
        <div class="item">flex项目七</div>
        <div class="item">flex项目八</div>
        <div class="item">flex项目九</div>
    </div>
</body>

</html>

在这里插入图片描述

项目的属性

  • order属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。
    .item{
    order:;
    }
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .item {
            width: 200px;
            border: 1px red solid;
        }
    </style>
</head>

<body>
    <div
        style="display: flex;flex-direction:row;flex-wrap:wrap;align-content:stretch;width: 800px;height: 200px;border: 1px blue solid;">
        <div class="item" style="order: 3;">flex项目一</div>
        <div class="item" style="order: 2;">flex项目二</div>
        <div class="item" style="order: 1;">flex项目三</div>
    </div>
</body>

</html>

在这里插入图片描述

  • flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。
    .item{
    flex-grow:;/default 0/
    }
    如果所有项目的flex-grow属性都为1，则它们将等分剩余空间（如果有的话）。如果一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍。

看看flex-grow都为0的效果

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .item {
            width: 200px;
            border: 1px red solid;
        }
    </style>
</head>

<body>
    <div
        style="display: flex;flex-direction:row;flex-wrap:wrap;align-content:stretch;width: 800px;height: 200px;border: 1px blue solid;">
        <div class="item" style="flex-grow: 0;">flex项目一</div>
        <div class="item" style="flex-grow: 0;">flex项目二</div>
        <div class="item" style="flex-grow: 0;">flex项目三</div>
    </div>
</body>

</html>

在这里插入图片描述
看看flex-grow都为1的效果

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .item {
            width: 200px;
            border: 1px red solid;
        }
    </style>
</head>

<body>
    <div
        style="display: flex;flex-direction:row;flex-wrap:wrap;align-content:stretch;width: 800px;height: 200px;border: 1px blue solid;">
        <div class="item" style="flex-grow: 1;">flex项目一</div>
        <div class="item" style="flex-grow: 1;">flex项目二</div>
        <div class="item" style="flex-grow: 1;">flex项目三</div>
    </div>
</body>

</html>

在这里插入图片描述
看看flex-grow两边为1中间为2的效果

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .item {
            width: 200px;
            border: 1px red solid;
        }
    </style>
</head>

<body>
    <div
        style="display: flex;flex-direction:row;flex-wrap:wrap;align-content:stretch;width: 800px;height: 200px;border: 1px blue solid;">
        <div class="item" style="flex-grow: 1;">flex项目一</div>
        <div class="item" style="flex-grow: 2;">flex项目二</div>
        <div class="item" style="flex-grow: 1;">flex项目三</div>
    </div>
</body>

</html>

在这里插入图片描述

  • flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。
    .item{
    flex-shrink:;
    }
    如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。负值对该属性无效。
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .item {
            width: 200px;
            border: 1px red solid;
        }
    </style>
</head>

<body>
    <div
        style="display: flex;flex-direction:row;flex-wrap:nowrap;align-content:stretch;width: 800px;height: 200px;border: 1px blue solid;">
        <div class="item" style="flex-shrink: 1;">flex项目一</div>
        <div class="item" style="flex-shrink: 1;">flex项目二</div>
        <div class="item" style="flex-shrink: 0;">flex项目三</div>
        <div class="item" style="flex-shrink: 1;">flex项目四</div>
        <div class="item" style="flex-shrink: 1;">flex项目五</div>
    </div>
</body>

</html>

在这里插入图片描述

  • flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。
    .item{
    flex-basis:|auto;/default auto/
    }
    它可以设为跟width和height属性一样的值（比如350px），则项目将占据固定空间。
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .item {
            border: 1px red solid;
        }
    </style>
</head>

<body>
    <div
        style="display: flex;flex-direction:row;flex-wrap:nowrap;align-content:stretch;width: 800px;height: 200px;border: 1px blue solid;">
        <div class="item" style="flex-basis: auto;">flex项目一</div>
        <div class="item" style="flex-basis: 200px;">flex项目二</div>
        <div class="item" style="flex-basis: 300px;">flex项目三</div>
    </div>
</body>

</html>

在这里插入图片描述

  • flex属性是flex-grow,flex-shrink和flex-basis的简写，默认值为0 1 auto。后两个属性可选。
    .item{
    flex:none|[<‘flex-grow’><‘flex-shrink’>?||<‘flex-basis’>]
    }
    该属性有两个快捷值：auto(1 1 auto) 和 none(0 0 auto)。
    建议优先使用这个属性，而不是单独写三个分离的属性，因为浏览器会推算相关值。
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .item {
            border: 1px red solid;
        }
    </style>
</head>

<body>
    <div
        style="display: flex;flex-direction:row;flex-wrap:nowrap;align-content:stretch;width: 800px;height: 200px;border: 1px blue solid;">
        <div class="item" style="flex: auto;">flex项目一</div>
        <div class="item" style="flex: none;">flex项目二</div>
        <div class="item" style="flex: 2 0 300px;">flex项目三</div>
    </div>
</body>

</html>

在这里插入图片描述

  • align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。
    .item{
    align-self:auto|flex-start|flex-end|center|baseline|stretch;
    }
    该属性可能取6个值，除了auto，其他都与align-items属性完全一致。
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .item {
            border: 1px red solid;
        }
    </style>
</head>

<body>
    <div
        style="display: flex;flex-direction:row;flex-wrap:nowrap;align-items:flex-start;width: 800px;height: 200px;border: 1px blue solid;">
        <div class="item" style="align-self: auto;">flex项目一</div>
        <div class="item">flex项目二</div>
        <div class="item" style="align-self: flex-end;">flex项目三</div>
    </div>
</body>

</html>

在这里插入图片描述
以上就是Flex布局从容器到项目的所有属性，学完之后感觉很灵活，可以作用到页面最小的模块，之前遇到元素需要垂直居中对齐时很头疼，但学完Flex布局后感觉就很简单了，单轴可以使用align-items多轴可以使用align-content，大家可以看看我的例子和效果图，就会好理解很多。
在这里插入图片描述

标签：Flex,灵活,项目,布局,item,1px,flex,Document,属性
来源： https://blog.csdn.net/weixin_45345374/article/details/110949671

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

关于我们 | 联系我们 | 留言反馈

专注分享技术，共同学习，共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有