flex伸缩布局看着一篇就够啦

阿里云国内75折 回扣 微信号：monov8
阿里云国际，腾讯云国际，低至75折。AWS 93折 免费开户实名账号 代冲值 优惠多多 微信号：monov8 飞机：@monov6

flex伸缩布局

flex弹性概念弹性盒子是一种按行或者按列布局元素的一种布局方式。
它是需要父子盒子嵌套使用的。

作用在父盒子容器上的属性有

  • flex-direction 改变轴方向
  • flex-wrap 换行
  • flex-flow 前两项的简写方式
  • justify-content 主轴对齐方式
  • align-items 侧轴对齐方式
  • align-content

作用在子盒子子项上的属性有

  • order
  • flex-grow 扩展比例
  • flex-shrink 收缩比例
  • flex-basis 指定子项在主轴方向上的初始大小
  • flex
  • align-self

容器属性

接下来咱们一起看看第一个属性作用在父容器上控制子项的排列方式flex-direction 主轴方向

flex-direction 改变轴方向

flex-direction常用的属性值有这几个

  • column 纵向
  • column-reverse 纵向翻转
  • row 横向
  • row-reverse 横向翻转

在这里插入图片描述
看个例子

<!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>
        .main {
            width: 500px;
            height: 500px;
            background: skyblue;
            display: flex;
        }

        .main div {
            width: 100px;
            height: 100px;
            background: pink;
            font-size: 20px;
        }
    </style>
</head>

<body>
    <div class="main">
        <div>1</div>
        <div>2</div>
        <div>3</div>
    </div>
</body>

</html>

在这里插入图片描述
可以看到给父盒子设置display:flex默认是横向排列也就是说默认的主轴方向是横向交叉轴方向是竖向。
接下来为父容器设置属性flex-direction: column-reverse

<!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>
        .main {
            width: 500px;
            height: 500px;
            background: skyblue;
            display: flex;
            flex-direction: column-reverse;
        }

        .main div {
            width: 100px;
            height: 100px;
            background: pink;
            font-size: 20px;
        }
    </style>
</head>

<body>
    <div class="main">
        <div>1</div>
        <div>2</div>
        <div>3</div>
    </div>
</body>

</html>

在这里插入图片描述

可以看到它们竖向排列并且翻转了。也就是说主轴为纵向了侧轴为横向。

flex-wrap 换行

常有属性有

  • nowrap (默认) 不换行
  • wrap 换行
  • wrap-reverse 换行且翻转
<!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>
        .main {
            width: 500px;
            height: 500px;
            background: skyblue;
            display: flex;
            flex-wrap: wrap; 
        }

        .main div {
            width: 100px;
            height: 100px;
            background: pink;
            font-size: 20px;
        }
    </style>
</head>

<body>
    <div class="main">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
        <div>6</div>
        <div>7</div>
    </div>
</body>

</html>

在这里插入图片描述
默认是不换行的如果去掉flex-wrap: wrap或者设置为nowrap则展示效果如图
在这里插入图片描述

flex-flow

flex-flow是flex-direction和flex-wrap的缩写具体这么使用的

<!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>
        .main {
            width: 500px;
            height: 500px;
            background: skyblue;
            display: flex;
            /* flex-direction: column;*/
            /* flex-wrap: wrap;  */
            flex-flow: column wrap;
        }

        .main div {
            width: 100px;
            height: 100px;
            background: pink;
            font-size: 20px;
        }
    </style>
</head>

<body>
    <div class="main">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
        <div>6</div>
        <div>7</div>
    </div>
</body>

</html>

在这里插入图片描述
可以看到当设置了flex-flow: colum wrap之后子项布局既纵向排列了又换行了。

justify-content 主轴对齐方式

常用属性有

  • flex-start 左对齐
  • flex-end 右对齐
  • center 居中
  • space-around 两端对齐两侧距离盒子距离是每个盒子间距的一半
  • space-between 两端对齐两侧紧挨盒子
  • space-evenly 平均分配子项距离盒子两侧和每个子项之间都是相等的距离
<!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>
        .main {
            width: 500px;
            height: 500px;
            background: skyblue;
            display: flex;
            justify-content: flex-start;
            /* justify-content: flex-end;
            justify-content: center;
            justify-content: space-around;
            justify-content: space-between;
            justify-content: space-evenly; */
        }

        .main div {
            width: 100px;
            height: 100px;
            background: pink;
            font-size: 20px;
        }
    </style>
</head>

<body>
    <div class="main">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <!-- <div>4</div>
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div> -->
    </div>
</body>

</html>

flex-start
在这里插入图片描述

flex-end
在这里插入图片描述
center
在这里插入图片描述

space-around
在这里插入图片描述

space-between

在这里插入图片描述
space-evenly
在这里插入图片描述

align-items 单行侧轴对齐方式

常用属性有

  • stretch (默认) 拉伸
  • flex-start
  • flex-end
  • center

stretch 拉伸

<!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>
       .main {
           width: 500px;
           height: 500px;
           background: skyblue;
           display: flex;
           align-items: stretch;
       /* align-items:flex-start;
         align-items: flex-end;
         align-items: center;
         align-items: baseline; */
       }

       .main div {
           width: 100px;
           /* height: 100px; */
           background: pink;
           font-size: 20px;
       }
   </style>
</head>

<body>
   <div class="main">
       <div>1</div>
       <div>2</div>
       <div>3</div>
      
   </div>
</body>

</html>

在这里插入图片描述
flex-start
在这里插入图片描述
flex-end
在这里插入图片描述
center

在这里插入图片描述

align-content 多行侧轴对齐方式

该属性需要配合flex-wrap: wrap 一起使用没有这个属性align-content是不生效的
常用属性有

  • stretch 默认拉伸
  • flex-start
  • flex-end
  • center
  • space-around
  • space-between
  • space-evenly
<!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>
        .main {
            width: 500px;
            height: 500px;
            background: skyblue;
            display: flex;
            flex-wrap: wrap;
            /* 当不折行的情况下align-content是不生效的 */
            align-content:space-evenly;
        }

        .main div {
            width: 100px;
            height: 100px;
            background: pink;
            font-size: 20px;
        }
    </style>
</head>

<body>
    <div class="main">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
    </div>
</body>

</html>

space-evenly
在这里插入图片描述
center
在这里插入图片描述
其他属性值效果大家可以自己试试这里就不再赘述。

子项相关属性

flex-grow

默认值是0也是最小值不能为负数。
表示不占用剩余的空白间隙扩展自己的宽度

flex-grow的值大于等于1时表示占满剩余宽度。

<!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>
        .main {
            width: 500px;
            height: 300px;
            background: skyblue;
            display: flex;
        }

        .main div {
            width: 100px;
            height: 100px;
            background: pink;
            /* flex-grow: 0;   默认的 */
            /* 如果比例值为1就占满剩余的所有空间 */
            /* 400 * 0.5 -> 200 + 100 -> 300 */
            /* flex-grow: 0.5; */
            /* 当比例值大于等于1的时候都会占满整个空间 */
            flex-grow : 2;
        }
    </style>
</head>

<body>
    <div class="main">
        <div>1</div>
    </div>
</body>

</html>

在这里插入图片描述
当flex-grow: 0.5时 扩展的宽度就是剩余宽度的一半

flex-shrink

默认值是1表示flex容器空间不足时元素的收缩比例

<!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>
        .main{
            width:500px;
            height:200px;
            background:skyblue;
            display: flex;
        }
        .main div{
            width:600px;
            height:100px;
            background:pink;
            /* flex-shrink : 1; 自动收缩跟容器大小相同 */

           /*  flex-shrink: 0; */
           flex-shrink: 0.5;
        }

    </style>
</head>
<body>
    <div class="main">
        <div>1</div>
    </div>
</body>
</html>

在这里插入图片描述

flex-basis

默认值是auto, 指定了flex元素在主轴方向上的初始大小

<!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>
        .main{
            width:500px;
            height:500px;
            background:skyblue;
            display: flex;
        }
        .main div{
            width:100px;
            height:100px;
            background:pink;
            flex-basis: 200px;
        }
    </style>
</head>
<body>
    <div class="main">
        <div></div>
    </div>
</body>
</html>

在这里插入图片描述

flex

flex 是flex-grow flex-shrink flex-basis的缩写

<!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>
        .main{
            width:500px;
            height:500px;
            background:skyblue;
            display: flex;
            align-items: flex-start;
        }
        .main div{
            background:pink;
            /* flex-grow: 1;
            flex-shrink: 1;
            flex-basis: 0%; */
            flex:1;

           /*  flex-grow: 0;
            flex-shrink: 1;
            flex-basis: 0%; */
           /*  flex:0; */

           /* flex-grow: 1;
            flex-shrink: 1;
            flex-basis: auto; */
           /* flex:auto; */

           /* flex-grow: 1;
           flex-shrink: 0;
           flex-basis: 50%; */
           /* flex:1 0 50%; */

        }
    </style>
</head>
<body>
    <div class="main">
        <div>测试文字</div>
    </div>
</body>
</html>

在这里插入图片描述

order

默认值是0 改变某一个flex子项的排序位置

<!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>
        .main{
            width:500px;
            height:500px;
            background:skyblue;
            display: flex;
        }
        .main div{
            width:100px;
            height:100px;
            background:pink;
        }
        .main div:nth-of-type(1){
            order:1;
        }
        .main div:nth-of-type(4){
            order:-1;
        }
    </style>
</head>
<body>
    <div class="main">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
    </div>
</body>
</html>

在这里插入图片描述

align-self

默认值0 控制某一个flex子项的垂直对齐方向

<!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>
        .main{
            width:500px;
            height:500px;
            background:skyblue;
            display: flex;
            align-items: center;
        }
        .main div{
            width:100px;
            height:100px;
            background:pink;
        }
        .main div:nth-of-type(1){
        }
        .main div:nth-of-type(4){
           height:50px;
           /* align-self: auto; */  /* auto会跟父盒子的align-items属性保持一致*/
           align-self: flex-end;
        }
    </style>
</head>
<body>
    <div class="main">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
    </div>
</body>
</html>

在这里插入图片描述
以上就是flex伸缩布局的全部基本内容啦

阿里云国内75折 回扣 微信号：monov8
阿里云国际，腾讯云国际，低至75折。AWS 93折 免费开户实名账号 代冲值 优惠多多 微信号：monov8 飞机：@monov6
返回列表

上一篇：Python面向对象版学员管理系统（附源码）

下一篇：基于webrtc多人音视频的研究（一）

“flex伸缩布局看着一篇就够啦” 的相关文章

selenium自动化测试框架1年前 (2023-02-02)
9、app稳定性测试之monkey工具使用1年前 (2023-02-02)
Essential C++第七章习题1年前 (2023-02-02)
不超过十行代码完成一个标准的深拷贝1年前 (2023-02-02)
学习笔记——Spring简介；Spring搭建步骤；Spring的特性；Spring中getBean三种方式；Spring中的标签1年前 (2023-02-02)
Array 数组1年前 (2023-02-02)
一文带你攻克JDK新特性1年前 (2023-02-02)
Java图片或视频生成GIF动图，发送微信_在程序里将gif文件通过微信发布1年前 (2023-02-02)
【华为云-IP资源冻结机制】华为云安全事故冻结服务器IP近1小时【50分钟系统全线不可用】_华为云发现您的资源涉及对外攻击行为1年前 (2023-02-02)
APITable：免费开源的多维表格与可视化数据库，上线1天斩获GitHub星标1000+1年前 (2023-02-02)

阿里云国际版