CSS新手入门笔记整理:CSS3弹性盒模型

特点

  • 子元素宽度之和小于父元素宽度,所有子元素最终的宽度就是原来定义的宽度。
  • 子元素宽度之和大于父元素宽度,子元素会按比例来划分宽度。
  • 在使用弹性盒子模型之前,必须为父元素定义“display:flex;”或“display:inline-flex;”。

弹性盒子模型属性

属性

说明

flex-grow

定义子元素的放大比例

flex-shrink

定义子元素的缩小比例

flex-basis

定义子元素的宽度

flex

flex-grow、flex-shrink、flex-basis 的复合属性

flex-direction

定义子元素的排列方向

flex-wrap

定义子元素是单行显示,还是多行显示

flex-flow

flex-direction、flex-wrap的复合属性

order

定义子元素的排列顺序

justify-content

定义子元素在“横轴”上的对齐方式

align-items

定义子元素在上的对齐方式“纵轴”


放大比例:flex-grow

flex-grow属性用来定义弹性盒子内部子元素的放大比例。当所有子元素宽度之和小于父元素的宽度时,子元素如何分配父元素的剩余空间。

语法

父元素{display:flex;}子元素{flex-grow: 数值;}

flex-grow属性取值是一个数值,默认值为0。当取值为0时,表示不索取父元素的剩余空间;当取值大于0时,表示索取父元素的剩余空间(即子元素放大)。取值越大,索取得越多。


缩小比例:flex-shrink

flex-shrink属性用于定义弹性盒子内部子元素的缩小比例。当所有子元素宽度之和大于父元素的宽度时,子元素如何缩小自己的宽度。

语法

父元素{display:flex;}子元素{flex-shrink: 数值;}

flex-shrink属性取值是一个数值,默认值为1。当取值为0时,表示子元素不缩小;当取值大于1时,表示子元素按一定的比例缩小。取值越大,缩小得越厉害。


元素宽度:flex-basis

  • flex-basis属性用于定义弹性盒子内部的子元素在分配空间之前,该子元素所占的空间大小。浏览器会根据这个属性,计算父元素是否有多余空间。
  • flex-basis相当于width,用来定义子元素的宽度。在弹性盒子中,flex-basis的语义会比width更好。
  • 如果某一个子元素同时设置flex-basis和width,那么flex-basis的值会覆盖width的值。

语法

父元素{display:flex;}子元素{flex-basis: 取值;}

flex-basis属性取值有两个:一个是“auto”,即该子元素的宽度是根据内容多少来定的;另一个是“长度值”,单位可以为px、em和百分比等。


复合属性:flex

flex属性可以同时设置flex-grow、flex-shrink、flex-basis这3个属性。

语法

父元素{display:flex;}子元素{flex: grow shrink basis;}

参数grow是flex-grow的取值,参数shrink是flex-shrink的取值,参数basis是flex-basis的取值。flex属性的默认值为“0 1 auto”。


排列方向:flex-direction

  • flex-direction属性用来来定义弹性盒子内部“子元素”的排列方向。即定义子元素是横着排,还是竖着排。
  • flex-direction属性是在弹性盒子(即父元素)上定义的。

语法

父元素{display:flex;flex-direction: 取值;
}

flex-direction属性取值

属性值

说明

row

横向排列(默认值)

row-reverse

横向反向排列

column

纵向排列

column-reverse

纵向反向排列


多行显示:flex-wrap

flex-wrap属性用来定义弹性盒子内部“子元素”是单行显示还是多行显示。

语法

父元素{display:flex;flex-wrap: 取值;
}

flex-wrap属性取值

属性值

说明

nowrap

单行显示(默认值)

wrap

多行显示,也就是换行显示

wrap-reverse

反向多行显示


复合属性:flex-flow

flex-flow属性用来同时设置flex-direction、flex-wrap这两个属性。

语法

父元素{display:flex;flex-flow: direction wrap;
}

参数direction是flex-direction的取值,参数wrap是flex-wrap的取值。flex-flow属性的默认值为“row nowrap”。


排列顺序:order

order属性用来定义弹性盒子内部“子元素”的排列顺序。

语法

父元素{display:flex;}
子元素{order:整数;}

order属性取值是一个正整数,即1、2、3等。


水平对齐:justify-content

justify-content属性来定义弹性盒子内部子元素在“横轴”上的对齐方式。

语法

父元素{display:flex;justify-content: 取值;
}

属性值

说明

flex-start

所有子元素在左边(默认值)

center

所有子元素在中间

flex-end

所有子元素在右边

space-between

所有子元素平均分布

space-around

所有子元素平均分布,但两边留有一定间距


垂直对齐:align-items

align-items属性用来定义弹性盒子内部子元素在“纵轴”上的对齐方式。

语法

父元素{display:flex;align-items: 取值;
}

属性值

说明

flex-start

所有子元素在上边(默认值)

center

所有子元素在中部

flex-end

所有子元素在下边

baseline

所有子元素在父元素的基线上

stretch

拉伸子元素以适应父元素高度


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

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

相关文章

一款基于.NET Core的快速开发框架、支持多种前端UI、内置代码生成器

前言 经常看到有小伙伴在技术群里问有没有什么好用且快速的开发框架推荐的,今天就给大家分享一款基于MIT License协议开源、免费的.NET Core快速开发框架、支持多种前端UI、内置代码生成器、一款高效开发的利器:WalkingTec.Mvvm框架(简称WTM…

阿里云常用配置:日志采集、OSS、RAM 权限策略

文章目录 引言I 日志采集1.1 具体查询语法1.2 查询示例1.3 设置token时间(登录过期时间)II OSS2.1 设置防盗链2.2 验证Referer防盗链是否生效III 通义灵码 (智能编码)IV RAM 权限策略4.1 短信策略4.2 内容风险检测引言 SLS I 日志采集

CyclicBarrier实战应用——实现异步多线程业务处理,异常情况回滚全部子线程

😊 作者: 一恍过去 💖 主页: https://blog.csdn.net/zhuocailing3390 🎊 社区: Java技术栈交流 🎉 主题: CyclicBarrier实战应用——实现异步多线程业务处理,异常情况…

Python办公自动化 -- Python发送电子邮件和Outlook的集成

Python办公自动化 – Python发送电子邮件和Outlook的集成 文章目录 Python办公自动化 -- Python发送电子邮件和Outlook的集成前言一、使⽤Python发送电⼦邮件1、导⼊所需的模块2、设置邮箱参数3、 创建邮件内容4、连接到SMTP服务器并发送邮件 二、Python与Outlook的集成1、使⽤…

K-均值聚类算法及其优缺点

K-均值聚类算法是一种常用的无监督学习算法,用于将数据集划分为 K 个不同的类别,每个类别由其内部的数据点表示。该算法通过将每个数据点分配到离其最近的聚类中心,并且根据新的聚类中心更新聚类的位置来迭代地优化聚类的结果。 算法步骤&am…

Linux笔记本电脑投屏到电视,用网页浏览器就能投屏到电视!

Linux系统的电脑如果要投屏到安卓电视屏幕上,可以使用投屏工具AirDroid Cast的网页版和TV版一起实现。 首先,在Linux系统的电脑里用chrome浏览器或edge浏览器打开网址webcast.airdroid.com。这个网址就是AirDroid Cast的网页版。你可以看到中间白色框框的…

Canal使用详解

Canal介绍 Canal是阿里巴巴开发的MySQL binlog增量订阅&消费组件,Canal是基于MySQL二进制日志的高性能数据同步系统。在阿里巴巴集团中被广泛使用,以提供可靠的低延迟增量数据管道。Canal Server能够解析MySQL Binlog并订阅数据更改,而C…

cilium原理之ebpf尾调用与trace

背景 在深入剖析cilium原理之前,有两个关于epbf的基础内容需要先详细介绍一下: 1. ebpf尾调用 尾调用类似于程序之间的相互跳转,但它的功能更加强大。 2. trace 虽然之前使用trace_printk输出日志,但这个函数不能多用&#x…

视觉学习(1)—— 理论

一、提问 初入视觉的几个问题: 1、视觉是怎么被控制的 2、怎么让视觉启动 3、视觉需要完成什么东西 4、视觉启动如何将完成的东西反馈给我 二、回答 1、视觉都是通过通讯协议控制,如串口、Modbus TCP等协议 2、视觉中的所有功能块都在流程中&…

使用StableDiffusion进行图片Inpainting原理

论文链接:RePaint: Inpainting using Denoising Diffusion Probabilistic Models代码链接:RePaint Inpainting任务是指在任意一个二进制的掩码指定的图片区域上重新生成新的内容,且新生成的内容需要和周围内容保持协调。当前SOTA模型用单一类…

js-cookie的使用以及存储token安全的注意要点

js-cookie的使用以及存储token安全的注意要点 npm 安装 npm i js-cookie -S // https://www.npmjs.com/package/js-cookie引入使用 import Cookies from js-cookie获取 Cookies.get(token); // 读取token Cookies.get() // 读取所有可见的 Cookie > { token: value }设置…

高级算法设计与分析(四) -- 贪心算法

系列文章目录 高级算法设计与分析(一) -- 算法引论 高级算法设计与分析(二) -- 递归与分治策略 高级算法设计与分析(三) -- 动态规划 高级算法设计与分析(四) -- 贪心算法 高级…

FATFS文件系统

文件系统是为了存储和管理数据,而在存储设备上建立的一种组织结构。 Windows常用的文件系统: 1、FAT12 2、FAT16 3、FAT32 4、exFAT 5、NTFS FAT:File Alloction Table 文件分配表 在小型的嵌入式存储设备大多…

Ubuntu 常用命令之 ping 命令用法介绍

📑Linux/Ubuntu 常用命令归类整理 ping命令是一种网络诊断工具,用于测试主机之间网络的连通性。它发送ICMP Echo Request消息到指定的网络主机,并等待接收ICMP Echo Reply。通过这种方式,我们可以知道两台主机之间的网络是否畅通…

pycharm修改项目文件夹名称

目录 1 修改项目文件夹名称 2 修改代码中的项目名称 1 修改项目文件夹名称 选中项目文件夹,右键,选择refactor-rename。 选择rename project: 然后输入新的项目名称。 此时进入资源管理器,修改项目文件夹的名字,完成…

IntelliJ IDEA 2023.3 新功能介绍

IntelliJ IDEA 2023.3 在众多领域进行了全面的改进,引入了许多令人期待的功能和增强体验。以下是该版本的一些关键亮点: IntelliJ IDEA mac版下载 macappbox.com/a/intellij-idea-for-mac.html 1. AI Assistant 的全面推出 IntelliJ IDEA 2023.3 中&am…

ES-mapping

类似数据库中的表结构定义,主要作用如下 定义Index下的字段名( Field Name) 定义字段的类型,比如数值型、字符串型、布尔型等定义倒排索引相关的配置,比如是否索引、记录 position 等 index_options 用于控制倒排索记录的内容,有如…

钓鱼与木马实践(仅供参考不可实践)

声明:内容仅供学习,请勿违法使用,违者后果自负 一.部署云服务器 购买一台云服务器,Windows( 中文 )版本即可 华为云官网:https://www.huaweicloud.com/ 登录后进入控制台购买完成后远程登录云服务器 二.部署WEB运行…

【Python百宝箱】图像魔法师:Python数据可视化的艺术之旅

视觉盛宴:畅游Python数据可视化的瑰丽星空 前言 在当今数据驱动的世界中,数据可视化是解读和传达信息的强大工具。Python生态系统中涌现出众多优秀的可视化库,本文将深入探讨其中的五大明星库:Ggplot、PyQtGraph、VisPy、Bqplot…

QQ群发邮件的技巧?QQ邮箱邮件群发怎么发?

QQ群发邮件怎么设置?QQ邮件群发必备利器有哪些? QQ群发邮件,作为当下最流行的通讯方式之一,已经被广大网友所熟知。但是,要想真正掌握QQ群发邮件的技巧,却不是一件容易的事情。下面,就让蜂邮ED…