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.mfbz.cn/a/265274.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

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

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

一文搞懂 java8 reduce操作

什么是 reduce Java8 中有两大最为重要的改变,其一是 Lambda 表达式,另一个就是 Stream API 了。 Stream 是 Java8 中处理集合的关键抽象概念,它将数据源流化后,可以执行非常复杂的查找、过滤和映射数据、排序、切片、聚合统计等…

中国化妆品头部企业环亚集团携美肤宝、法兰琳卡、滋源、肌肤未来等“新朋友”加入实在智能数智生态圈

广州环亚化妆品科技股份有限公司(以下简称“环亚集团”)是一家综合性美容化妆品高新技术企业,旗下拥有美肤宝、法兰琳卡、滋源、肌肤未来等多个品牌,产品涵盖洁肤护肤、洗护发、身体护理、精油等多个领域。在中国、澳大利亚、美国…

27 redis 的 sentinel 集群

前言 redis 的哨兵的相关业务功能的实现 哨兵的主要作用是 检测 redis 主从集群中的 master 是否挂掉, 单个哨兵节点识别 master 下线为主管下线, 超过 quorum 个 哨兵节点 认为 master 挂掉, 识别为 客观下线 然后做 failover 的相关处理, 重新选举 master 节点 我们这里…

【C++刷题】前缀和

【C刷题】前缀和 一、前缀和1、题目链接2、解析3、代码 二、二位前缀和1、题目链接2、解析3、代码 三、寻找数组的中心下标1、题目链接2、解析3、代码 四、除自身以外数组的乘积1、题目链接2、解析3、代码 五、和为K的子数组1、题目链接2、解析3、代码 六、和可被K整除的子数组…

Linux Shell 001-Bash简介

Linux Shell 001-Bash简介 本节关键字:Linux、Bash Shell、shell分类 相关指令:bash、sh、cat Shell的介绍 计算机只能认识(识别)机器语言(0和1),如(11000000 这种)。但是,我们的…

手写MapReduce实现WordCount

水善利万物而不争,处众人之所恶,故几于道💦 文章目录 需求分析编写MapReduce实现上述功能Mapper类Reducer类Driver类 查看输出结果 需求 假设有一个文本文件word.txt,我们想要统计这个文本文件中每个单词出现的次数。 文件内容如下…

【内存泄露】记一次内存泄露排查,罪魁祸首是HttpClient

📢欢迎点赞 :👍 收藏 ⭐留言 📝 如有错误敬请指正,赐人玫瑰,手留余香!📢本文作者:由webmote 原创📢作者格言:新的征程,我们面对的不仅仅是技术还有人心,人心不可测,海水不可量,唯有技术,才是深沉黑夜中的一座闪烁的灯塔 !序言 很久很久以前,曾经的青葱…

docker构建镜像及项目部署

文章目录 练习资料下载一、docker基础1. 基本概念2. docker常见命令3. 命令别名4. 数据卷 二、docker自定义镜像1. 了解镜像结构2. 了解Dockerfile3. 构建Dockerfile文件,完成自定义镜像 三、网络1. docker常见网络命令2. docker自带虚拟网络3. 自定义网络 四、dock…

【3D Max】入门

文章目录 概述界面介绍常用功能保存和导入基本建模编辑模型材质和贴图光源和阴影动画制作渲染设置导出和打印来源 概述 3 ds MAX是由 Discreet (后来被 Autodesk (Autodesk)合并)开发的一款基于 PC系统的3 d Max或3 ds MAX三维动画绘制和制作软件,其主要功能有建模…

【精选】vulnhub CTF6 linux udev提权 (青铜门笔记)

一、信息收集 1.主机探测 发现靶机的IP地址是:192.168.103.130 ┌──(root💀kali)-[~] └─# arp-scan -l2.访问web页面 发现有个登录的页面,尝试了弱口令,但是发现没有成功; 所以,我们需要在后面的信…

Go 泛型发展史与基本介绍

Go 泛型发展史与基本介绍 Go 1.18版本增加了对泛型的支持,泛型也是自 Go 语言开源以来所做的最大改变。 文章目录 Go 泛型发展史与基本介绍一、为什么要加入泛型?二、什么是泛型三、泛型的来源四、为什么需要泛型五、Go 泛型设计的简史六、泛型语法6.1 …

Netty RPC 实现(二)

Netty RPC 实现 概念 RPC,即 Remote Procedure Call(远程过程调用),调用远程计算机上的服务,就像调用本地服务一样。RPC 可以很好的解耦系统,如 WebService 就是一种基于 Http 协议的 RPC。这个 RPC 整体…

机器视觉兄弟们,出身寒微,不是耻辱,能屈能伸,方为丈夫

人生过往,当时只道是寻常。 可以说,“社会边角料”这个词,即刺耳,又是那么难听。只是,无数的年轻人和中年人,都喜欢用这个词来自嘲。 特别是出身寒微,没啥资源的80后和90后,他们总是…

C语言的分支和循环语句

各位少年,今天和大家分享的是分支语句循环体语句,C语言是结构体的程序设计语言,这里的结构指的是(顺序结构)(选择结构)(循环结构)C语言是能够实现这三种结构的&#xff0…

docker容器内 获取宿主机ip

可以使用命令 --add-host jargatewayip:192.168.0.47 \ 需要注意,这里不能是 127.0.0.1 ,所以要找到服务器局域网的ip 命令示例 docker run -it \-p 80:80 \-p 443:443 \--name nginx \--network app --hostname nginx \-e TZAsia/Shanghai \--add-host jargatewayip:192.16…

fabs函数与fmax函数

目录 fabs函数 fmax函数 fabs函数 包含头文件&#xff1a;<math.h> C90函数原型&#xff1a;double fabs (double x); C99函数原型&#xff1a; double fabs (double x); float fabsf (float x);long double fabsl (long double x); C98函数原型&#xff1a; doubl…

第11章 GUI Page421~422 步骤六 支持文字

运行效果&#xff1a; 关键代码&#xff1a; 新增头文件&#xff1a; //item_text.hpp #ifndef ITEM_TEXT_HPP_INCLUDED #define ITEM_TEXT_HPP_INCLUDED #include "item_i.hpp"class TextItem : public IItem { public:TextItem(): _startPosition(0, 0), _endPos…

ssm基于BS的库存管理软件设计与实现论文

目 录 目 录 I 摘 要 III ABSTRACT IV 1 绪论 1 1.1 课题背景 1 1.2 研究现状 1 1.3 研究内容 2 2 系统开发环境 3 2.1 vue技术 3 2.2 JAVA技术 3 2.3 MYSQL数据库 3 2.4 B/S结构 4 2.5 SSM框架技术 4 3 系统分析 5 3.1 可行性分析 5 3.1.1 技术可行性 5 3.1.2 操作可行性 5 3…

【操作系统】补充:你看到的所有地址都不是真的

补充&#xff1a;你看到的所有地址都不是真的 写过打印出指针的 C 程序吗&#xff1f;你看到的值&#xff08;一些大数字&#xff0c;通常以十六进制打印&#xff09;是虚拟地址&#xff08;virtual address&#xff09;。有没有想过你的程序代码在哪里找到&#xff1f;你也可以…