css-flex使用

文章目录

  • flex
    • 弹性容器
      • 属性
        • flex-direction
        • flex-wrap
        • flex-flow
        • align-items
        • justify-content
        • align-content
          • 主轴和侧轴
    • 弹性元素
      • 默认大小
      • 属性
        • flex-grow
        • flex-shrink
        • align-self
        • flex-basis
        • flex
        • order
    • 高度坍塌
    • flex布局子元素宽度超出父元素

flex

弹性盒,伸缩盒,一种新的布局方法,主要是用来代替浮动来完成页面的布局
flex可以使元素具有弹性,让元素可以跟随页面的大小改变而改变

弹性容器

要使用弹性盒,必须要先将一个元素设置为弹性容器:

  • display: flex 设置为块级弹性容器
  • display: inline-flex 设置为行级弹性容器

属性

父元素规定了宽度或高度、如果弹性元素整体的宽度或高度超过了父元素的宽度或高度,默认情况不会换行,而是发生弹性元素压缩

flex-direction

弹性元素排布方向

  • row 默认方式,水平、靠左排列,主轴从左向右
  • row-reverse 水平、靠右、反向排列,主轴从右向左
  • column 纵向排列,主轴从上到下
  • column-reverse 纵向、靠下、反向排列,主轴从下到上

flex-wrap

弹性元素的换行

  • nowrap 默认方式,不换行,不换行如果超出父元素大小,那么父元素主轴方向出现滚动条
  • wrap 换行,沿着主轴方向排列,主轴空间不够沿着侧轴方向换行然后继续排列弹性元素;
  • wrap-reverse 反向换行,整体沿着侧轴方向排列,主轴方向依旧按照顺序排列

flex-flow

flex-directionflex-wrap的简写属性

align-items

弹性元素在分割单元中如何进行布局;

当设置了flex-wrap: wrap;,且发生了换行:

  • 如果弹性容器没有指定弹性容器侧轴方向上的长度
    这种情况下,弹性元素在侧轴方向上的长度由弹性元素本身内容决定;但是主轴上的所有弹性元素在侧轴上的占据的空间的长度都一样(实际弹性元素的大小由align-items决定)

  • 如果弹性容器指定了弹性容器侧轴方向上的长度
    首先按照没有指定弹性容器在侧轴方向上的长度的方法对弹性元素在侧轴方向进行空间分配,然后将弹性容器在侧轴方向上的剩余空间分配给不同主轴上的弹性元素。

  • 分割单元
    也就是说,整体上,弹性容器最终会被几条主轴和侧轴进行分割,每个分割的单元容纳一个弹性元素,但是这个分割出来的单元并不一定是弹性元素的大小;

  • stretch
    默认方式,弹性元素拉伸铺满分割单元,保证主轴方向上一行的弹性元素的长度在侧轴方向上是一样的;
    先按照弹性元素本身需要的空间大小进行空间分配,然后将弹性容器侧轴方向的剩余空间平均分配给不同行的弹性容器。

  • flex-start
    弹性元素侧轴方向不会拉伸铺满分割单元,他在侧轴方向位于分割单元的顶边

  • flex-end
    弹性元素侧轴方向不会拉伸铺满分割单元,他在侧轴方向位于分割单元的终边

  • center
    弹性元素侧轴方向不会拉伸铺满分割单元,他在侧轴方向居中

  • baseline
    弹性元素侧轴方向不会拉伸铺满分割单元,他在侧轴方向沿着第一行的基线进行对齐

justify-content

justify可以理解为 – 水平的
当主轴上存在剩余空间,且弹性元素不发生flex-grow,主轴方向如何排列主轴上的元素

  • flex-start 弹性元素沿着主轴起边排列
  • flex-end 弹性元素沿着主轴终边排列
  • center 弹性元素居中排列
  • space-around 空白环绕分布到元素两侧
  • space-evenly evenly – 均匀,空白均匀分布到元素两侧
  • space-between 空白均匀分布到元素之间,元素边界不留空白

align-content

侧轴上空白空间的分布,这个同样用在当align-items不为stretch的情况;此时侧轴方向会出现空白,然后一行主轴的所有弹性元素视为一个元素,然后进行侧轴方向上的布局。
参数和justify-content一样

主轴和侧轴
  • 主轴 弹性元素的排列方向
  • 侧轴 与主轴垂直方向称为侧轴

弹性元素

弹性容器的子元素都是弹性元素(弹性项),不包括后代元素;
一个元素可以同时是弹性容器和弹性元素;

默认大小

  • 主轴方向 弹性元素主轴方大小跟随内容变化;
  • 侧轴方向 如果弹性容器指定了长度,那么弹性元素会铺满侧轴方向;如果弹性容器没有指定大小,那么弹性元素会跟随内容大小变化。

属性

flex-grow

指定弹性元素的伸展系数,也就是当父元素主轴方向存在剩余空间(主轴方向,父元素减去子元素flex-basis的剩余部分),子元素分配这些剩余空间时占比大小;

  • 0 默认值,不参与剩余空间分配
  • 1 以比例1参与分配
  • 2 以比例2参与分配

flex-shrink

指定弹性元素的收缩系数,也就是当父元素主轴方向无法容纳所有子元素(主轴方向,子元素flex-basis超过了父元素本身的大小),对子元素进行收缩时的单个子元素提供收缩空间的占比大小;

  • 0 不参与收缩
  • 1 默认值,以比例1进行收缩
  • 2 以比例2进行收缩

align-self

用来覆盖弹性容器中align-items的属性,也就是弹性元素在分割单元中如何进行布局。

flex-basis

分割单元宽度设置,和width类似
和width区别:

  • 如果主轴是横向的,则该值指定的就是元素的宽度
  • 如果主轴是纵向的,则该值指定的就是元素的高度
  • auto 默认值,表示参考元素自身的高度或宽度。
  • 如果传递了一个具体数值,则以该值为准

flex

简写属性:flex-grow flex-shrink flex-basis

  • initial 0 1 auto
  • auto 1 1 auto
  • none 0 0 auto

order

决定元素的排列顺序

  • 0 默认值
    调整顺序的时候不需要调整结构了;
    相同order按照顺序排列,可以为负数。

高度坍塌

弹性容器和不会高度坍塌。

flex布局子元素宽度超出父元素

flex布局子元素会超出父元素显示,有两种方式避免超出显示的问题:


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

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

相关文章

micropython SSD1306/SSD1315驱动

目录 简介 代码 功能 显示ASCII字符 ​编辑 画任意直线 画横线 画竖线 画矩形 画椭圆 画立方体 画点阵图 翻转 反相 滚动 横向滚动 纵向滚动 奇葩滚动 简介 我重新写了一个驱动,增加了一些功能,由于我的硬件是128*64oled单色I2C,我只…

【数据结构】如何用队列实现栈?图文详解(LeetCode)

LeetCode链接:225. 用队列实现栈 - 力扣(LeetCode) 本文默认读者已经掌握栈与队列的基本知识 或者先看我的另一篇博客:【数据结构】栈与队列_字节连结的博客-CSDN博客 做题思路 由于我们使用的是C语言,不能直接使用队…

vue中使用html2canvas+jsPDF实现pdf的导出

导入依赖 html2canvas依赖 npm install html2canvasjspdf依赖 npm install jspdfpdf导出 以导出横向,A4大小的pdf为例 规律:1. html2canvas 中,在保持jsPDF中的宽高不变的情况下,设置html2canvas中的 width 和 height 值越小&a…

npm 不是内部或外部命令,也不是可运行的程序或批处理文件。

遇到问题: 1.遇到问题:npm 不是内部或外部命令,也不是可运行的程序或批处理文件。 2.遇到问题:或者使用npm安装插件时会出现 XXX\node\node_modules\npm不可用 情况 如下图: 分析问题: nodejs在nodejs官网…

分布式ID

分布式ID 背景Snowflake(雪花算法)背景 分布式系统,用什么做为主键呢? uuid 太长(MySQL官方有明确的建议主键要尽量越短越好[4],36个字符长度的UUID不符合要求。)、 无规律(在InnoDB引擎下,UUID的无序性可能会引起数据位置频繁变动,严重影响性能。)SnowflakeLeaf h…

GO学习之 数据库(mysql)

GO系列 1、GO学习之Hello World 2、GO学习之入门语法 3、GO学习之切片操作 4、GO学习之 Map 操作 5、GO学习之 结构体 操作 6、GO学习之 通道(Channel) 7、GO学习之 多线程(goroutine) 8、GO学习之 函数(Function) 9、GO学习之 接口(Interface) 10、GO学习之 网络通信(Net/Htt…

【vue3】同个页面引入多个图表组件实现自适应的方法

首先说明,此方案仅针对vue3项目在同一个页面引入了多个图表组件,因为我发现不能框架不同的引入,resize的写法还不同 window.addEventListener("resize", function() {...// 在此处重新调用即可 }以下是具体写法: 循环…

前端实习第五周周记

前言 每一天做了什么还是要记录一下,不然过两天后就会发现,慢慢遗忘自己的收获与做过的东西。 这周做的是医学检验系统的样本库部分。由于是公司的代码所以不能交代具体,那么久聊一下每天具体做了些什么以及我的一些收获。 周一 周一上午…

【C++】四种强制类型转换

内容来自《C Primer(第5版)》4.11.3 显示转换、6.4 函数重载、19.2.1 dynamic_cast运算符 目录 1. static_cast 2. const_cast 3. reinterpret_cast 4. dynamic_cast 4.1 指针类型的dynamic_cast 4.2 引用类型的dynamic_cast C语言的强制类型转换&…

Unity进阶–通过PhotonServer实现人物选择和多人同步–PhotonServer(四)

文章目录 Unity进阶–通过PhotonServer实现人物选择和多人同步–PhotonServer(四)服务端客户端 Unity进阶–通过PhotonServer实现人物选择和多人同步–PhotonServer(四) 服务端 服务端结构如下: UserModel using System; using System.Collections.Generic; usin…

Qt 编译使用Bit7z库接口调用7z.dll、7-Zip.dll解压压缩常用Zip、ISO9660、Wim、Esd、7z等格式文件(二)

修改qt5 7zip源码编译及使用(含展示进度)一文中的封装类ZlibHelper代码类,继承多线程,使解压,压缩时进度条不影响界面,同时添加压缩文件中的文件预览功能,建议直接看源码 导读 相关代码内容扩展预览内容时获取文件修改…

深入探究arthas的命令

Arthas是一个Java诊断工具,用于在线诊断Java应用程序,以便更轻松地监控和分析应用程序的性能和行为。Arthas中有许多用于诊断Java应用程序的命令。 1. jvm 和 dashboard 命令的区别: jvm:该命令用于显示当前的JVM信息&#xff0c…

pointnet C++推理部署--tensorrt框架

classification 如上图所示,由于直接export出的onnx文件有两个输出节点,不方便处理,所以编写脚本删除不需要的输出节点193: import onnxonnx_model onnx.load("cls.onnx") graph onnx_model.graphinputs graph.inpu…

【C++】C++入门基础:引用详解

本篇继续分享关于C入门的相关知识,有关命名空间、缺省参数和函数重载的部分欢迎阅读我的上一篇文章【C】C入门基础详解(1)_王笃笃的博客-CSDN博客 继续我们的学习 引用 在C语言中我们接触过指针,很多人都或多或少为他感到头痛过…

使用SSH隧道将Ubuntu云服务器Jupyter Notebook端口映射到本地

本文主要实现了在Ubuntu云服务器后台运行Jupyter Notebook,并使用SSH隧道将服务器端口映射到本地 1. 生成配置文件 运行以下命令生成Jupyter Notebook的配置文件: jupyter notebook --generate-config这将在用户主目录下生成一个名为.jupyter的文件夹&…

MySQL索引ES索引

MySQL MySQL索引的种类 按照索引列值的唯一性:索引可分为唯一索引和非唯一索引; 唯一索引:此索引的每一个索引值只对应唯一的数据记录,对于单列唯一性索引,这保证单列不包含重复的值。对于多列唯一性索引,保证多个值的组合不重复。主键索引是唯一索引的特定类型。该索引…

【傅里叶级数与傅里叶变换】数学推导——3、[Part4:傅里叶级数的复数形式] + [Part5:从傅里叶级数推导傅里叶变换] + 总结

文章内容来自DR_CAN关于傅里叶变换的视频,本篇文章提供了一些基础知识点,比如三角函数常用的导数、三角函数换算公式等。 文章全部链接: 基础知识点 Part1:三角函数系的正交性 Part2:T2π的周期函数的傅里叶级数展开 P…

【Rust日报】2023-08-18 RustShip:一个新的 Rust 播客

探索 Rust 编译器基准测试套件 在最近关于 Rust 编译器 CI(持续集成)和基准测试基础设施的文章中,作者承诺写一篇关于运行时基准测试的博客文章,这是 Rust 编译器基准测试套件的新补充。然而,在这样做之前,…

信息熵,信息增益,增益率的理解

西瓜数据集D如下: 编号色泽根蒂敲声纹理脐部触感好瓜1青绿蜷缩浊响清晰凹陷硬滑是2乌黑蜷缩沉闷清晰凹陷硬滑是3乌黑蜷缩浊响清晰凹陷硬滑是4青绿蜷缩沉闷清晰凹陷硬滑是5浅白蜷缩浊响清晰凹陷硬滑是6青绿稍蜷浊响清晰稍凹软粘是7乌黑稍蜷浊响稍糊稍凹软粘是8乌黑稍蜷浊响清晰…

回归预测 | MATLAB实现SSA-SVM麻雀搜索算法优化支持向量机多输入单输出回归预测(多指标,多图)

回归预测 | MATLAB实现SSA-SVM麻雀搜索算法优化支持向量机多输入单输出回归预测(多指标,多图) 目录 回归预测 | MATLAB实现SSA-SVM麻雀搜索算法优化支持向量机多输入单输出回归预测(多指标,多图)效果一览基…