CSS-布局-flex

CSS3 新增了弹性盒子模型( Flexible Box 或 FlexBox ),是一种新的用于在 HTML 页面实现布局的方式。使得 HTML 页面适应不同尺寸的屏幕和不同的设备时,元素是可预测地运行。

基本概念

  • 容器:使用 display:flexdisplay:inline-flex 声明的元素,称为 Flex 容器(flex container),简称 容器
  • 项目:容器中所有子元素自动成为容器成员,称为 Flex 项目(flex item),简称 项目
  • 主轴:项目沿其一次排列的轴被称为 主轴
  • 侧轴:垂直于主轴的轴被称为 侧轴

容器的属性

  • flex-direction
    • 定义了 主轴 的方向
      • row:主轴为水平方向,起点在左端(默认
      • row-reverse:主轴为水平方向,起点在右端
      • column:主轴为垂直方向,起点在上沿
      • column-reverse:主轴为垂直方向,起点在下沿
  • flex-wrap
    • 默认情况,所有项目会在一行显示,如需换行,使用 flex-wrap
      • nowrap:不换行(默认
      • wrap:换行,第一行在上方
      • wrap-reverse:换行,第一行在下方
  • flex-flow
    • 该属性是 flex-directionflex-wrap 的简写,默认值row nowrap,水平排列,不换行。
  • justify-content
    • 定义了项目沿着 主轴线 的对齐方式
      • flex-start: 项目左对齐(默认
      • flex-end: 项目右对齐
      • center: 项目居中对齐
      • space-between: 项目两端对齐,容器首尾不留距离,项目之间的间隔都相等
      • space-around: 项目两端对齐,容器首尾留有距离
  • align-items适用于不换行的情况
    • 定义了项目所在 侧轴线 的对齐方式
      • flex-start: 侧轴 起点对齐,如果 flex-direction:row,则项目顶部对齐
      • flex-end: 侧轴 终点对齐,如果 flex-direction:row,则项目尾部对齐
      • center: 项目居中对齐
      • baseline: 项目的 第一行文字的基线 对齐
      • stretch: 如果项目 未设置高度 或者 设为auto,拉伸与容器同高(默认
  • align-content多行情况时适用
    • 定义了项目所在侧轴线的对齐方式
      • flex-start: 侧轴 起点对齐
      • flex-end: 侧轴 终点对齐
      • center: 侧轴 居中对齐
      • space-between: 两端对齐,容器首尾不留距离
      • space-around: 两端对齐,容器首尾留有距离
      • stretch: 如果项目 未设置高度 或者 设为auto,拉伸与容器同高(默认

项目属性

  • order:项目的排列顺序
    • 数值越小,排列越靠前,可以为负值
      • order:0,保持项目原来的位置(默认)
  • flex-grow(扩大):定义项目的放大比例
    • 默认为0:如果容器存在剩余空间,保持原大小,不放大
    • 项目flex-grow属性都为1:项目平均分配剩余空间
    • 某个项目flex-grow属性为2,其他项目都为1,那么为2的项目宽度为1的2倍
  • flex-shrink(缩小):定义项目的缩小比例
    • 默认为1:如果容器空间不足,项目缩小
    • 项目flex-shrink属性都为1,当容器空间不足时,所有项目等比缩小
    • 某个项目flex-shrink属性为0,其他项目都为1,当容器空间不足时,为0的项目不缩小
  • flex-basis:分配多余空间之前,项目占据主轴空间的大小,相当于为项目设置宽度
    • 默认值:auto,保持项目的本来大小,不作任何宽度改变
    • 可以定义项目的宽度(如200px)
    • 也可以设置 flex-basis:10%,将占据空间的10%
  • flex:flex-grow flex-shrink flex-basis的缩写
    • 默认值:0 1 auto,不放大,但缩小;
    • auto(1 1 auto):等分放大缩小
    • none(0 0 auto):不放大,不缩小
    • flex:1 相当于只设置了flex-grow
  • align-self:定义项目在侧轴的对齐方式。该属性可覆盖 align-items 属性。
    • 默认值为 auto,表示继承父元素的 align-items 属性
    • center: 伸缩项目向侧轴的中间位置对齐。
    • flex-start: 伸缩项目向侧轴的起点位置对齐。
    • flex-end: 伸缩项目向侧轴的终点位置对齐。
    • baseline: 伸缩项目根据伸缩项目的基线对齐。
    • stretch: 默认值,伸缩项目拉伸填充整个伸缩容器。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/pingmian/24257.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

抢人!抢人!抢人! IT行业某岗位已经开始抢人了!

所谓抢滩鸿蒙,人才先行。鸿蒙系统火力全开后,抢人已成鸿蒙市场的主题词! 智联招聘数据显示,春节后首周,鸿蒙相关职位数同比增长163%,是去年同期的2.6倍,2023年9-12月鸿蒙相关职位数同比增速为3…

Qt Graphics View Framework 使用教程

欢迎来到 Qt Graphics View Framework 的世界!本教程将引导您了解这一强大工具的基础知识,并教您如何开始使用它来创建丰富的 2D 图形界面。无论您是编程新手还是经验丰富的开发者,本教程都将帮助您快速上手。 基本概念 Qt Graphics View F…

前端开发常用的工具和软件,提高编程效率

目录 1. 文本编辑器与IDE (集成开发环境)2. 版本控制工具3. 构建工具与包管理器4. 前端框架与库5. 设计与原型工具6. 测试与调试工具7. 代码协作与项目管理8. 自动化部署与持续集成/持续部署(CI/CD)相关链接: 前端开发过程中使用的工具和软件种类繁多,可…

salesforce case 创建时提取 description 中的链接自动下载并且保存在 attachment 中

要在Salesforce中实现创建案例时提取描述中的链接并自动下载并保存在附件中,可以使用Apex触发器结合HttpRequest和HttpResponse类来实现: 步骤概述 创建触发器:当案例(Case)被创建时触发。编写Apex类:提取…

Python实现调用并执行Linux系统命令

😎 作者介绍:我是程序员洲洲,一个热爱写作的非著名程序员。CSDN全栈优质领域创作者、华为云博客社区云享专家、阿里云博客社区专家博主。 🤓 同时欢迎大家关注其他专栏,我将分享Web前后端开发、人工智能、机器学习、深…

【Node】node的Events模块(事件模块)的介绍和使用

文章目录 简言EventsPassing arguments and this to listeners 向监听器传递参数Asynchronous vs. synchronous 异步和同步Handling events only once 只一次处理事件Error events 错误事件Capture rejections of promises 捕捉拒绝承诺的情况Class: EventEmitter 事件类Event:…

聊聊二叉堆、红黑树、时间轮在定时任务中的应用

定时任务作为常用的一种调度方式,在各大系统得到了广泛的应用。 笔者也曾写过两篇关于定时任务框架介绍的文章: 《介绍一下,spring cloud下的另一种定时任务解决方案》《四叉堆在GO中的应用-定时任务timer》 之前都是以如何使用为主,这次从…

【高频】如何优化一个SQL语句

使用合适的索引:确保查询中涉及的字段上有合适的索引,避免全表扫描。可以通过 EXPLAIN 命令来查看查询执行计划,判断是否使用了索引。 避免使用通配符查询:尽量避免在查询条件中使用通配符(如 %)&#xff…

Vue项目安装axios报错npm error code ERESOLVE npm error ERESOLVE could not resolve解决方法

在Vue项目中安装axios时报错 解决方法:在npm命令后面加--legacy-peer-deps 例如:npm install axios --save --legacy-peer-deps 因为别的需求我把node版本重装到了最新版(不知道是不是这个原因),后来在项目中安装axi…

在推荐四款软件卸载工具,让流氓软件无处遁形

Revo Uninstaller Revo Uninstaller是一款电脑软件、浏览器插件卸载软件,目前已经有了17年的历史了。可以扫描所有window用户卸载软件后的残留物,并及时清理,避免占用电脑空间。 Revo Uninstaller可以通过命令行卸载软件,可以快速…

【C++】植物大战僵尸杂交版自动存档——防闪退存档消失

植物大战僵尸杂交版现已更新到v2.0.88,闪退问题还是偶有发生,参考网上现有的方案,简单实现了一个。 原理就是监控存档目录的文件变化,一旦有新的存档,则将其备份。如发生闪退,则还原备份即可。 原目录&…

前端生成海报图技术选型与问题解决

作者:vivo 互联网大前端团队 - Tian Yuhan 本篇文章主要聚焦海报图分享这个形式,探讨纯前端在H5&小程序内,合成海报到下载到本地、分享至社交平台整个流程中可能遇到的问题,以及如何解决。 一、引言 绝大多数的电商平台都会…

30、matlab现代滤波:维纳滤波/LMS算法滤波/小波变换滤波

1、信号1和信号2的维纳滤波 实现代码 N 2000; %采样点数 Fs 2000; %采样频率 t 0:1 / Fs:1 - 1 / Fs; %时间序列 Signal1 sin(2*pi*20* t) sin(2*pi*40* t) sin(2*pi*60* t); Signal2[2*ones(1,50),zeros(1,50),-1*ones(1,100),zeros(1,50),-2*ones(1,50),zeros(1,50),1…

【C语言】05.数组

一、数组的概念 本文来介绍数组,首先我们需要了解数组是什么? 数组是⼀组相同类型元素的集合。 • 数组中存放的是1个或者多个数据,但是数组元素个数不能为0。 • 数组中存放的多个数据,类型是相同的。 数组分为⼀维数组和多维数组…

Go源码--sync库(2)

简介 这边文章主要讲解 Sync.Cond和Sync.Rwmutex Sync.Cond 简介 sync.Cond 经常用来处理 多个协程等待 一个协程通知 这种场景, 主要 是阻塞在某一协程中 等待被另一个协程唤醒 继续执行 这个协程后续的功能。cond经常被用来协调协程对某一资源的访问 ants协程池…

Win10 Edge提示兼容性问题打不开|解决浏览器兼容性问题

Edge有时候会与某些安全软件不兼容,导致报错 报错代码:STATUS_INVALID_IMAGE_HASH 解决Edge浏览器兼容性问题方法/步骤: 1、按 Win R 组合键,打开运行,并输入 regedit 命令,确定或回车,可以…

SAP ERP系统主要模块简介

SAP系统通过提供一系列高度灵活的模块,满足企业在不同业务领域的需求。这些模块不仅功能齐全且相对独立,但它们之间又能紧密协作,共同构筑一个协同高效的工作环境。 财务会计(FI)模块 它涵盖了总账、应收账款、应付账…

C语言中typedef的四种用法(附带详细解析!!)

1)typedef基本数据类型取“别名” typedef unsigned int size; typedef unsigned int16 u16; typedef unsigned int8 u8;2)typedef为自定义数据类型取“别名” typedef struct{menu_f btn1; // make arraymenu_f btn2;menu_f btn3;draw_f draw;itemLoader_f loade…

DexCap——斯坦福李飞飞团队泡茶机器人:更好数据收集系统的原理解析、源码剖析

前言 2023年7月,我司组建大模型项目开发团队,从最开始的论文审稿,演变成目前的两大赋能方向 大模型应用方面,以微调和RAG为代表 除了论文审稿微调之外,目前我司内部正在逐一开发论文翻译、论文对话、论文idea提炼、论…

k8s:优雅关闭pod的简单例子

先通过Dockerfile创建一个image vim Dockerfie <<<< 内容如下&#xff1a; FROM centosRUN sed -i -e "s|mirrorlist|#mirrorlist|g" /etc/yum.repos.d/CentOS-* RUN sed -i -e "s|#baseurlhttp://mirror.centos.org|baseurlhttp://vault.centos.o…