当前位置: 首页 > news >正文

flex 布局相关属性的使用

简单概述

  • 为元素添加 display:flex; 的属性后,当前元素被视为弹性布局的盒子容器(box),其子元素被视为弹性布局项目(item)。
  • item 会在 box 内灵活布局,解决了对齐、分布、尺寸等响应式问题。

演示 demo

<template><div class="mainBox"><div class="box"><divv-for="(item, index) in data":key="index"class="item":style="{background: item.background, height: item.height, width: item.width,}">{{ item.msg }}</div></div></div>
</template>
<script>
export default {data() {return {data: [{ msg: "111", background: "#3E445E", width: "100px", height: "50px", },{ msg: "222", background: "#D0D3DA", width: "100px", height: "60px", },{ msg: "333", background: "#505A9B", width: "100px", height: "70px", },{ msg: "444", background: "#7394CD", width: "100px", height: "80px", },{ msg: "555", background: "#F1E2D0", width: "100px", height: "90px", },{ msg: "666", background: "#F6CFA3", width: "100px", height: "100px", },{ msg: "777", background: "#E18792", width: "100px", height: "110px", },{ msg: "888", background: "#907AC3", width: "100px", height: "120px", },],};},
};
</script>
<style lang="less" scoped>
.mainBox {width: 100%;height: 100%;
}
.box {display: flex;padding: 40px;border: 1px solid #333;.item {color: #fff;}
}
</style>

下述属性演示都在以上代码的基础上进行

用于盒子容器(box)的属性

flex-direction

  • 设置 box 内弹性 item 的方向
  • 取值:row / row-reverse / column / column-reverse
  • flex-direction: row; 行模式-从左到右排列(默认值)
    .box {display: flex;padding: 40px;border: 1px solid #333;flex-direction: row;
    }
    
    flex-direction: row;
  • flex-direction: row-reverse; 行模式-从右到左排列
    .box {display: flex;padding: 40px;border: 1px solid #333;flex-direction: row-reverse;
    }
    
    flex-direction: row-reverse;
  • flex-direction: column; 列模式-从上到下排列
    .box {display: flex;padding: 40px;border: 1px solid #333;flex-direction: column;
    }
    
    flex-direction: column;
  • flex-direction: column-reverse; 列模式-从下到上排列
    .box {display: flex;padding: 40px;border: 1px solid #333;flex-direction: column-reverse;
    }
    
    flex-direction: column-reverse;

flex-wrap

  • box 在必要的时候换行
  • 取值:nowrap / wrap
  • flex-wrap: nowrap; 不换行(默认值)
    .box {display: flex;padding: 40px;border: 1px solid #333;flex-wrap: nowrap;
    }
    /* 减小 box 宽度时,item 的宽度失效,被压缩 */
    
    flex-wrap: nowrap;
  • flex-wrap: wrap; 换行
    .box {display: flex;padding: 40px;border: 1px solid #333;flex-wrap: wrap;
    }
    /* 减小 box 宽度时,item 的宽度不变,不会被压缩,自动换行 */
    
    在这里插入图片描述

justify-content

  • 设置 box 内弹性 item 的对齐分布方式
  • 取值:flex-start / flex-end / center / space-between / space-around / space-evenly
  • 为方便观察不同属性的对比,移除了 boxpadding 属性
  • justify-content: flex-start; 起点对齐(默认值)
    .box {display: flex;border: 1px solid #333;justify-content: flex-start;
    }
    
    justify-content: flex-start;
  • justify-content: flex-end; 结束点对齐
    .box {display: flex;border: 1px solid #333;justify-content: flex-end;
    }
    
    justify-content: fflex-end;
  • justify-content: center; 居中对齐
    .box {display: flex;border: 1px solid #333;justify-content: center;
    }
    
    justify-content: center;
  • justify-content: space-between; 两端对齐
    .box {display: flex;border: 1px solid #333;justify-content: space-between;
    }
    
    justify-content: space-between;
  • justify-content: space-around; 周围分布-视作 margin 效果的话,相当于每个 itemmargin-leftmargin-right 值相同
    .box {display: flex;border: 1px solid #333;justify-content: space-around;
    }
    /* margin-right = margin-left = (box 的宽度 - item 的宽度 * 8) / (8 * 2) */
    
    justify-content: space-around;
  • justify-content: space-evenly; 均匀分布-视作 margin 的话,均匀分配剩余空间,每个 itemmargin-left 值相等,最后剩下的空隙,值与 itemmargin-left 相等
    .box {display: flex;border: 1px solid #333;justify-content: space-evenly;
    }
    /* margin-right = 0 */
    /* margin-left = (box 的宽度 - item 的宽度 * 8) / (8 + 1) */
    
    justify-content: space-evenly;

align-items

  • 设置 box 内弹性 item 的针对交叉轴的对齐分布方式
  • 取值:flex-start / flex-end / center
  • align-items: flex-start; 起点对齐(默认值)
    .box {display: flex;padding: 40px;border: 1px solid #333;align-items: flex-start;
    }
    
    align-items: flex-start;
  • align-items: flex-end; 结束点对齐
    .box {display: flex;padding: 40px;border: 1px solid #333;align-items: flex-end;
    }
    
    align-items: flex-end;
  • align-items: center; 居中对齐
    .box {display: flex;padding: 40px;border: 1px solid #333;align-items: center;
    }
    
    align-items: center;

align-content

  • 设置多轴线 box 内弹性 item 的对齐分布方式

  • 取值:flex-start / flex-end / center / space-between / space-around / space-evenly

  • 为方便观察不同属性的对比,移除了 boxpadding 属性

  • 为外层父盒子添加 flex 属性,形成多轴线的盒子

  • align-content: flex-start; 起点对齐

    .mainBox {display: flex;.box {display: flex;border: 1px solid #333;flex-wrap: wrap;align-content: flex-start;}
    }
    

    align-content: flex-start;

  • align-content: flex-end; 结束点对齐

    .mainBox {display: flex;.box {display: flex;border: 1px solid #333;flex-wrap: wrap;align-content: flex-end;}
    }
    

    align-content: flex-end;

  • align-content: center; 居中对齐

    .mainBox {display: flex;.box {display: flex;border: 1px solid #333;flex-wrap: wrap;align-content: center;}
    }
    

    align-content: center;

  • align-content: space-between; 两端对齐

    .mainBox {display: flex;.box {display: flex;border: 1px solid #333;flex-wrap: wrap;align-content: space-between;}
    }
    

    align-content: space-between;

  • align-content: space-around; 周围分布

    .mainBox {display: flex;.box {display: flex;border: 1px solid #333;flex-wrap: wrap;align-content: space-around;}
    }
    

    align-content: space-around;

  • align-content: space-evenly; 均匀分布

    .mainBox {display: flex;.box {display: flex;border: 1px solid #333;flex-wrap: wrap;align-content: space-evenly;}
    }
    

    align-content: space-evenly;

用于弹性项目(item)的属性

order

  • 设置 box 内弹性 item 的排序
  • 取值:Num,取值越小越靠前,默认为 0
    .item {color: #fff;&:nth-child(1) {order: 4;}&:nth-child(2) {order: 3;}&:nth-child(3) {order: 0;}&:nth-child(4) { }&:nth-child(5) {order: 2;}
    }
    
    order

flex-grow

  • 设置 box 内弹性 item 的扩展系数
  • 取值:Num,取值越小扩展比例越小,默认为 0
    .item {color: #fff;&:nth-child(1) {flex-grow: 1;}&:nth-child(2) {flex-grow: 3;}&:nth-child(3) {flex-grow: 1;}&:nth-child(4) { }&:nth-child(5) { }
    }
    
    flex-grow

flex-basis

  • 设置 box 内弹性 item 的初始宽度,会覆盖原有宽度属性
  • 取值:像素值
    .item {color: #fff;&:nth-child(1) {flex-basis: 50px;}&:nth-child(2) {flex-basis: 100px;}&:nth-child(3) {flex-basis: 150px;}&:nth-child(4) {flex-basis: 200px;}&:nth-child(5) {flex-basis: 250px;}
    }
    
    flex-basis

flex-shrink

  • 设置 box 内弹性 item 的收缩系数
  • 取值:Num,取值越小压缩比例越小,默认为 1 ,取值为 0 时,不会被压缩
    .item {color: #fff;&:nth-child(1) {flex-shrink: 1;}&:nth-child(2) {flex-shrink: 2;}&:nth-child(3) {flex-shrink: 3;}&:nth-child(4) {flex-shrink: 0;}&:nth-child(5) {flex-shrink: 0;}
    }
    
    flex-shrink

相关文章:

flex 布局相关属性的使用

简单概述 为元素添加 display:flex; 的属性后&#xff0c;当前元素被视为弹性布局的盒子容器(box)&#xff0c;其子元素被视为弹性布局项目(item)。item 会在 box 内灵活布局&#xff0c;解决了对齐、分布、尺寸等响应式问题。 演示 demo <template><div class&quo…...

【C++】类和对象(第一篇)

文章目录1. 面向过程和面向对象初步认识2.类的引入3.类的定义3.1 类的两种定义方式3.2 成员变量命名规则建议4. 类的访问限定符及封装4.1 访问限定符4.2 封装5. 类的作用域6. 类的实例化7. 类对象模型7.1 类对象大小的计算7.2 类对象的存储方式猜测7.3 结构体内存对齐规则复习8…...

springboot 接入websocket实现定时推送消息到客户端

目录说明代码实现说明 如标题&#xff0c;举例需求场景&#xff1a; 前端与后端websocket连接上后&#xff0c;多用户登录&#xff0c;后端根据不同用户定时发消息给前端用于展示 代码实现 1、 <dependency><groupId>org.springframework.boot</groupId>…...

虚拟机磁盘重新分区增加Docker磁盘空间

目录一、简介二、重新分区 挂载目录2.1 增加虚拟机硬盘空间2.2 重新分区2.3 格式化新分区2.4 挂载docker目录三、重新拉取一、简介 今天在使用docker pull 拉取镜像时&#xff0c;报了no such file or directory的信息&#xff0c;原来是Docker的磁盘空间满了 #查看Docker Roo…...

Java开发学习(四十八)----MyBatisPlus删除语句之逻辑删除

1、逻辑删除 接下来要讲解是删除中比较重要的一个操作&#xff0c;逻辑删除&#xff0c;先来分析下问题: 这是一个员工和其所签的合同表&#xff0c;关系是一个员工可以签多个合同&#xff0c;是一个一(员工)对多(合同)的表 员工ID为1的张业绩&#xff0c;总共签了三个合同&a…...

RabbitMq

一、四大核心概念生产者&#xff1a;产生数据发送消息的程序是生产者交换机&#xff1a;交换机是RabbitMQ非常重要的一个部件&#xff0c;一方面它接收来自生产者的消息&#xff0c;另一方面它将消息推送到队列中。交换机必须确切知道如何处理它接收到的消息&#xff0c;是将这…...

Qt学习笔记

文章目录一、C指针函数驼峰命名法、下划线命名法编程报错二、C三、Qt语法Qt历史、Qt应用Qt特色快捷键Qt类的族谱QWidgetQPushButtonQDebug对象树Qt窗口坐标信号和槽Qt自带的信号的槽自定义的信号和槽Qt4版本 vs Qt5版本 的connect写法函数指针解决重载问题拓展类型转换QString …...

洛谷——P1091 合唱队形

【题目描述】 n 位同学站成一排&#xff0c;音乐老师要请其中的 n−k 位同学出列&#xff0c;使得剩下的 k 位同学排成合唱队形。 合唱队形是指这样的一种队形&#xff1a;设 kk 位同学从左到右依次编号为 1,2, … ,k&#xff0c;他们的身高分别为​,​, … ,​&#xff0c;则…...

使用logstash把mysql同步到es,Kibana可视化查看

1&#xff1a;首先需要电脑本地有es环境&#xff0c;并且要牢记版本后&#xff0c;后续安装的logstash和Kibana一定要版本对应 查看es版本&#xff1a;http://localhost:9200/ 2&#xff1a;安装对应版本的logstash&#xff1a;找到自己对应ES版本&#xff0c;然后解压 Logst…...

Vue3.0 setup的使用及作用

目录开篇&#xff1a;1.什么是setup2.setup怎么使用3.setup中包含的生命周期函数3.setup相关参数4.setup特性总结总结开篇&#xff1a; 从vue2升级 vue3&#xff0c;vue3是可以兼容vue2。所以v3可以采用v2的选项式api&#xff0c;但是v2不能使用v3的组合式api&#xff0c;由于…...

Ubuntu18.04安装Vertica

目录下载安装包安装(Ubuntu18.04)配置 I/O Scheduler配置 TZSupport Tools配置 swapinessDisk ReadaheadEnabling chrony or ntpd自启动项错误处理后重装下载安装包 官网11.0版本或者10.0(deb)安装包可私信提供百度网盘链接&#xff1b; 安装(Ubuntu18.04) testvertica:~$ s…...

2.计算机基础-计算机网络面试题—基础知识、容器、面向对象、并发编程

本文目录如下&#xff1a;计算机基础-计算机网络 面试题一、基础知识简述 TCP 和 UDP 的区别&#xff1f;http与https的区别?Session 和 Cookie 有什么区别&#xff1f;URL是什么&#xff1f;由哪些部分组成&#xff1f;OSI 的 五层模型 都有哪些&#xff1f;get 和 post 请求…...

解决Mac 安装应用提示:xx已损坏,无法打开。 您应该将它移到废纸篓问题

许多新手mac 用户安装应用得时候会出现 “已损坏&#xff0c;无法打开。您应该将它移到废纸娄” 导致无法正常安装&#xff0c;其实应用软件b并没有损坏&#xff0c;只是系统安全设置&#xff0c;我们改如何解决呢&#xff1f; 1、开启允许任何来源 苹果已经取消了允许“任何…...

xpath注入[NPUCTF2020]ezlogin

[NPUCTF2020]ezlogin 打开界面 如果发现自己输入的信息由这样构成&#xff0c;可以往xpath注入上靠一下。 不管输入什么&#xff0c;很容易发现登陆就超时了&#xff0c;说明这里token是不断刷新的。 这样构造也是一样的目的都是为了闭合后面的&#xff0c;为啥有两个or呢 us…...

【Python学习笔记】22.Python3 数据结构

前言 本章节我们主要结合前面所学的知识点来介绍Python数据结构。 列表 Python中列表是可变的&#xff0c;这是它区别于字符串和元组的最重要的特点&#xff0c;一句话概括即&#xff1a;列表可以修改&#xff0c;而字符串和元组不能。 以下是 Python 中列表的方法&#xf…...

一文搞懂 什么是CPU上下文?为什么要切换?如何减少切换?

最近经常有小伙伴问到的一些问题&#xff0c;比较集中的是关于CPU切换. 实际用C/C&#xff0c;go开发&#xff0c;你会特别注意内存和CPU的使用情况&#xff0c;那些对于CPU使用情况特别关注&#xff0c;或者性能特别关注的朋友可以看看这篇文章&#xff0c;相信看完结尾的示例…...

【Python】Python学习笔记(二)基本输入输出

Python娘来源&#xff1a;https://next.rikunabi.com/tech/docs/ct_s03600.jsp?p002412 目录print()函数不进行自动换行的print()函数打印输出多个字符串只进行换行input()函数使用format方法格式化字符串字符串与数值转换字符串转换为数值数值转换为字符串总结参考资料print(…...

LeetCode刷题系列 -- 724. 寻找数组的中心下标

给你一个整数数组 nums &#xff0c;请计算数组的 中心下标 。数组 中心下标 是数组的一个下标&#xff0c;其左侧所有元素相加的和等于右侧所有元素相加的和。如果中心下标位于数组最左端&#xff0c;那么左侧数之和视为 0 &#xff0c;因为在下标的左侧不存在元素。这一点对于…...

Linux编辑器vim

本文已收录至《Linux知识与编程》专栏&#xff01; 作者&#xff1a;ARMCSKGT 演示环境&#xff1a;CentOS 7 目录 前言 正文 vim常用方式 进入vim 退出vim vim基本模式及模式功能 命令模式 插入模式 底行模式 替换模式 视图模式 配置vim 自己配置vim 自动化配置…...

基于“python+”潮汐、风驱动循环、风暴潮等海洋水动力模拟

查看原文>>>基于“python”潮汐、风驱动循环、风暴潮等海洋水动力模拟ADCIRC是新一代海洋水动力计算模型&#xff0c;它采用了非结构三角形网格广义波动连续方程的设计&#xff0c;在提高计算精确度的同时还减小了计算时间。被广泛应用于&#xff1a;模拟潮汐和风驱动…...

第19节 Node.js Express 框架

Express 是一个为Node.js设计的web开发框架&#xff0c;它基于nodejs平台。 Express 简介 Express是一个简洁而灵活的node.js Web应用框架, 提供了一系列强大特性帮助你创建各种Web应用&#xff0c;和丰富的HTTP工具。 使用Express可以快速地搭建一个完整功能的网站。 Expre…...

测试微信模版消息推送

进入“开发接口管理”--“公众平台测试账号”&#xff0c;无需申请公众账号、可在测试账号中体验并测试微信公众平台所有高级接口。 获取access_token: 自定义模版消息&#xff1a; 关注测试号&#xff1a;扫二维码关注测试号。 发送模版消息&#xff1a; import requests da…...

AtCoder 第409​场初级竞赛 A~E题解

A Conflict 【题目链接】 原题链接&#xff1a;A - Conflict 【考点】 枚举 【题目大意】 找到是否有两人都想要的物品。 【解析】 遍历两端字符串&#xff0c;只有在同时为 o 时输出 Yes 并结束程序&#xff0c;否则输出 No。 【难度】 GESP三级 【代码参考】 #i…...

深入理解JavaScript设计模式之单例模式

目录 什么是单例模式为什么需要单例模式常见应用场景包括 单例模式实现透明单例模式实现不透明单例模式用代理实现单例模式javaScript中的单例模式使用命名空间使用闭包封装私有变量 惰性单例通用的惰性单例 结语 什么是单例模式 单例模式&#xff08;Singleton Pattern&#…...

linux arm系统烧录

1、打开瑞芯微程序 2、按住linux arm 的 recover按键 插入电源 3、当瑞芯微检测到有设备 4、松开recover按键 5、选择升级固件 6、点击固件选择本地刷机的linux arm 镜像 7、点击升级 &#xff08;忘了有没有这步了 估计有&#xff09; 刷机程序 和 镜像 就不提供了。要刷的时…...

postgresql|数据库|只读用户的创建和删除(备忘)

CREATE USER read_only WITH PASSWORD 密码 -- 连接到xxx数据库 \c xxx -- 授予对xxx数据库的只读权限 GRANT CONNECT ON DATABASE xxx TO read_only; GRANT USAGE ON SCHEMA public TO read_only; GRANT SELECT ON ALL TABLES IN SCHEMA public TO read_only; GRANT EXECUTE O…...

MODBUS TCP转CANopen 技术赋能高效协同作业

在现代工业自动化领域&#xff0c;MODBUS TCP和CANopen两种通讯协议因其稳定性和高效性被广泛应用于各种设备和系统中。而随着科技的不断进步&#xff0c;这两种通讯协议也正在被逐步融合&#xff0c;形成了一种新型的通讯方式——开疆智能MODBUS TCP转CANopen网关KJ-TCPC-CANP…...

C++ Visual Studio 2017厂商给的源码没有.sln文件 易兆微芯片下载工具加开机动画下载。

1.先用Visual Studio 2017打开Yichip YC31xx loader.vcxproj&#xff0c;再用Visual Studio 2022打开。再保侟就有.sln文件了。 易兆微芯片下载工具加开机动画下载 ExtraDownloadFile1Info.\logo.bin|0|0|10D2000|0 MFC应用兼容CMD 在BOOL CYichipYC31xxloaderDlg::OnIni…...

10-Oracle 23 ai Vector Search 概述和参数

一、Oracle AI Vector Search 概述 企业和个人都在尝试各种AI&#xff0c;使用客户端或是内部自己搭建集成大模型的终端&#xff0c;加速与大型语言模型&#xff08;LLM&#xff09;的结合&#xff0c;同时使用检索增强生成&#xff08;Retrieval Augmented Generation &#…...

【Linux】Linux 系统默认的目录及作用说明

博主介绍&#xff1a;✌全网粉丝23W&#xff0c;CSDN博客专家、Java领域优质创作者&#xff0c;掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域✌ 技术范围&#xff1a;SpringBoot、SpringCloud、Vue、SSM、HTML、Nodejs、Python、MySQL、PostgreSQL、大数据、物…...