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.rhkb.cn/news/224477.html

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

相关文章

力扣题目学习笔记(OC + Swift)21. 合并两个有序链表

21. 合并两个有序链表 将两个升序链表合并为一个新的 升序 链表并返回。新链表是通过拼接给定的两个链表的所有节点组成的。 链表解题经典三把斧: 哑巴节点栈快慢指针 此题比较容易想到的解法是迭代法,生成哑巴节点,然后迭代生成后续节点。…

【C++】string

文章目录 1. 标准库中的string类1.1 string类 2 string类的常用接口说明2.1 string类对象的常见构造2.2 string类对象的容量操作2.3. string类对象的访问及遍历操作2.4 string类对象的修改操作2.5 string类非成员函数2.6 vs和g下string结构的说明 1. 标准库中的string类 1.1 s…

Redis缓存穿透、缓存击穿、缓存雪崩介绍

一、Redis的缓存穿透 1.什么是缓存穿透? 缓存穿透是指:客户端请求的数据在缓存中和数据库中都不存在,这时缓存就永远不会生效,这些请求都打到数据库从而导致数据库压力过大。 2.出现缓存穿透的解决方案,以下是常用的两…

Matlab仿真2ASK/OOK、2FSK、2PSK、QPSK、4QAM在加性高斯白噪声信道中的误码率与归一化信噪比的关系

本文为学习所用,严禁转载。 本文参考链接 https://zhuanlan.zhihu.com/p/667382398 QPSK代码及高斯白噪声如何产生 https://ww2.mathworks.cn/help/signal/ref/butter.html 滤波器 https://www.python100.com/html/4LEF79KQK398.html 低通滤波器 本实验使用matlab仿…

Node.js(二)-模块化

1. 模块化的基本概念 1.1 什么是模块化 模块化是指解决一个复杂问题时,自顶向下逐层将系统拆分成若干模块的过程。对于整个系统来说,模块是可组合、分解和更换的单元。 1.2 编程领域中的模块化 编程领域中的模块化,就是遵守固定的规则&…

解决log4j多个日志都写到一个文件

之前客户端程序由于Websockt包依赖的log4j,就用log4j写日志了,Web用的log4j2没毛病。用log4j的多个logger的日志都写到一个文件里了,查了很多资料都没解决。今天闲了解决一下。 最后好使的配置 # 设置日志根 log4j.rootLogger INFO,Except…

谷歌Gemini造假始末

💡大家好,我是可夫小子,《小白玩转ChatGPT》专栏作者,关注AIGC、读书和自媒体。 在过去一年中,OpenAI ChatGPT引发了一股AI新浪潮,而谷歌则一直处于被压制的状态,迫切需要一款现象级的AI产品来…

Mysql(2)

目录 一.外键约束属性 创建主键表: ​编辑 创建外键表: 插入数据,先插入主表在插入外表: 删数数据记录时,要先从表再主表: 删除外键属性: 二.数据库的用户权限管理 看数据库中的用户&a…

Flutter详解及案例代码

概念 Flutter是由Google开发的开源UI框架,旨在快速构建高质量的移动应用程序。与传统的移动应用开发方式不同,Flutter使用单一代码库构建应用程序,可以同时在iOS和Android上运行。 Flutter的核心是使用Dart语言编写的,并且具有自…

C语言操作符if语句好习惯 详解分析操作符(详解4)

各位少年: 前言 还记得我们上一章讲过一个比较抽象的代码,它要比较两次都是真的情况下才能打印,那么很显然这样写代码是有弊端的?哪我们C语言之父丹尼斯.里奇,先介绍一下上次拉掉了if语句的好习惯 好再分享一些操作符…

大数据Doris(三十九):Duplicate 模型中的 ROLLUP

文章目录 Duplicate 模型中的 ROLLUP 一、前缀索引

SPFA算法总结

知识概览 SPFA算法是Bellman_Ford算法的优化。时间复杂度一般是O(m),最坏时间复杂度是O(nm)(遇到网格图、菊花图),其中n是点数,m是边数。SPFA算法其实是单源最短路限制最小的算法,只要图中没有负环&#xf…

C++ Qt开发:Charts绘制各类图表详解

Qt 是一个跨平台C图形界面开发库,利用Qt可以快速开发跨平台窗体应用程序,在Qt中我们可以通过拖拽的方式将不同组件放到指定的位置,实现图形化开发极大的方便了开发效率,本章将重点介绍TreeWidget与QCharts的常用方法及灵活运用。 …

Java之Synchronized与锁升级

Synchronized与锁升级 一、概述 在多线程并发编程中 synchronized 一直是元老级角色,很多人都会称呼它为重量级锁。但是,随着 Java SE 1.6 对 synchronized 进行了各种优化之后,有些情况下它就并不那么重了。 本文详细介绍 Java SE 1.6 中为…

《运维人员的未来:IT界的“万金油“如何继续闪耀光芒》

文章目录 每日一句正能量前言35岁被称为运维半衰期,究竟为何?如何顺利过渡半衰期运维的职业发展路径后记 每日一句正能量 凡事顺其自然,遇事处于泰然,得意之时淡然,失意之时坦然,艰辛曲折必然,历…

详解Java反射机制reflect(一学就会,通俗易懂)

1.定义 #2. 获取Class对象的三种方式 sout(c1)结果为class com.itheima.d2_reflect.TestClass 获取到了Class对象就相当于获取到了该类 2.获取类的构造器 3.获取全部构造器对象 2.根据参数类型获取构造器对象 类型后必须加.class 3.构造器对象调用构造器方法 4.暴力访问 4.获…

Maven私服

1 Maven私服简介 Maven 私服是一种特殊的Maven远程仓库,它是架设在局域网内的仓库服务,用来代理位于外部的远程仓库(中央仓库、其他远程公共仓库)。 1.1 下载构件顺序 建立私服后,当局域网内的用户需要某个构件时&a…

图灵日记之java奇妙历险记--输入输出方法数组

目录 输入输出输出到控制台从键盘输入使用 Scanner 读取字符串/整数/浮点数使用 Scanner 循环读取 猜数字方法方法定义方法调用的执行过程实参和形参的关系(重要)方法重载 数组数组的创建数组的初始化动态初始化静态初始化 数组的使用元素访问遍历数组 数组是引用类型null数组应…

esp32-s3训练自己的数据进行目标检测、图像分类

esp32-s3训练自己的数据进行目标检测、图像分类 一、下载项目二、环境三、训练和导出模型四、部署模型五、存在的问题 esp-idf的安装参考我前面的文章: esp32cam和esp32-s3烧录human_face_detect实现人脸识别 一、下载项目 训练、转换模型:ModelAssist…

Django之DRF框架三,序列化组件

一、序列化类的常用字段和字段参数 常用字段 字段名字段参数CharFieldmax_lengthNone, min_lengthNone, allow_blankFalse, trim_whitespaceTrueIntegerFieldmax_valueNone, min_valueNoneFloatFieldmax_valueNone, min_valueNoneBooleanFieldNullBooleanFieldFloatFieldmax_…