下载鸥 > 网站下载 > 开发教程 > JS/JQuery

CSS3之弹性盒子布局flex(文字版)

122 2023-05-26 17:02:50

收藏
CSS3 弹性盒( Flexible Box 或 flexbox),是一种当页面需要适应不同的屏幕大小以及设备类型时,确保元素拥有恰当的行为的布局方式。引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。

简单地说,弹性盒子布局是为了适配所有的设备,当用布局使用之前像素(px)的方式时,在本电脑当然没问题,但如果换个显示器,或者换个屏幕大小不一样的设备,整个页面布局就坏掉了。使用盒子布局,对每个部分占用的空间提供所占比进行约束,在设置最小压缩量,这样,在屏幕延伸或压缩的同时,每个组成部分也会对应延伸或压缩,保证了布局的一致性。

弹性盒子由弹性容器(Flex container)和弹性子元素(Flex item)组成。
弹性容器通过设置 display 属性的值为 flex 或 inline-flex将其定义为弹性容器。
弹性容器内包含了一个或多个弹性子元素。

注: 弹性容器外及弹性子元素内是正常渲染的。弹性盒子只定义了弹性子元素如何在弹性容器内布局。
弹性子元素通常在弹性盒子内一行显示。默认情况每个容器只有一行。

弹性盒子常用属性
flex-direction:指定弹性容器中子元素排列方式 如果元素不是弹性盒对象的元素,则 flex-direction 属性不起作用。 属性值:
row:默认值。元素将水平显示,正如一个行一样。

row-reverse:与 row 相同,但是以相反的顺序。
column:元素将垂直显示,正如一个列一样。
column-reverse:与 column 相同,但是以相反的顺序。
flex-wrap:设置弹性盒子的子元素超出父容器时是否换行
flex-wrap 属性规定flex容器是单行或者多行,同时横轴的方向决定了新行堆叠的方向。

属性值:
nowrap:默认值。规定元素不拆行或不拆列。 不换行。
wrap:规定元素在必要的时候拆行或拆列。换行,在第一行的上方。
wrap-reverse:规定元素在必要的时候拆行或拆列,但是以相反的顺序。 换行,在第一行的下方。
flex-flow:flex-direction和flex-wrap 的简写
flex-flow属性是flex-direction属性和flex-wrap属性的简写形式,默认值为row nowrap

align-items:设置弹性盒子元素在侧轴(纵轴)方向上的对齐方式
align-items 属性定义flex子项在flex容器的当前行的侧轴(纵轴)方向上的对齐方式。

属性值:
stretch :默认值。项目被拉伸以适应容器。
center:项目位于容器的中心。
flex-start:项目位于容器的开头。
flex-end:项目位于容器的结尾。
baseline:项目位于容器的基线上。

align-content:修改 flex-wrap 属性的行为,类似 align-items, 但不是设置子元素对齐,而是设置行对齐
justify-content:设置弹性盒子元素在主轴(横轴)方向上的对齐方式
justify-content 用于设置或检索弹性盒子元素在主轴(横轴)方向上的对齐方式。

属性:
flex-start:默认值。项目位于容器的开头。
flex-end:项目位于容器的结尾。
center:项目位于容器的中心。
space-between:项目位于各行之间留有空白的容器内。
space-around:项目位于各行之前、之间、之后都留有空白的容器内。

CSS3之弹性盒子布局flex(文字版)

弹性子元素属性
1.order:设置弹性盒子的子元素排列顺序。 用整数值来定义排列顺序,数值小的排在前面。可以为负值,默认为0。

2.flex-grow:设置或检索弹性盒子元素的扩展比率。
一个数字,规定项目将相对于其他灵活的项目进行扩展的量。默认值是 0。

3.flex-shrink:指定了 flex 元素的收缩规则。flex 元素仅在默认宽度之和大于容器的时候才会发生收缩,其收缩的大小是依据 flex-shrink 的值。
一个数字,规定项目将相对于其他灵活的项目进行收缩的量。默认值是 1。

4.flex-basis:用于设置或检索弹性盒伸缩基准值。
一个长度单位或者一个百分比,规定元素的初始长度。 auto:默认值。长度等于元素的长度。
如果该项目未指定长度,则长度将根据内容决定。

5.flex:设置弹性盒子的子元素如何分配空间。
flex 属性用于设置或检索弹性盒模型对象的子元素如何分配空间。
flex 属性是 flex-grow、flex-shrink 和 flex-basis 属性的简写属性。
flex-grow:一个数字,规定项目将相对于其他元素进行扩展的量。
flex-shrink:一个数字,规定项目将相对于其他元素进行收缩的量。
flex-basis:项目的长度。合法值:“auto”、“inherit” 或一个后跟 “%”、“px”、“em” 或任何其他长度单位的数字。
auto:与 1 1 auto 相同。
none:与 0 0 auto 相同。
initial:设置该属性为它的默认值,即为 0 1 auto。
inherit:从父元素继承该属性。

6.align-self:在弹性子元素上使用。覆盖容器的 align-items 属性。
auto:默认值。元素继承了它的父容器的 align-items 属性。如果没有父容器则为
“stretch”。

stretch:元素被拉伸以适应容器。
center:元素位于容器的中心。
flex-start :元素位于容器的开头。
flex-end:元素位于容器的结尾。
baseline:元素位于容器的基线上。
initial:设置该属性为它的默认值。
inherit:从父元素继承该属性。

本文地址:https://xzo.com.cn/develop/js/1153.html

有帮助,很赞!

信息来源:csdn
导出教程 下载word版教程
发表评论 共有条评论
关于JS/JQuery


JavaScript(简称“JS”) 是一种具有函数优先的轻量级,解释型或即时编译型的编程语言。JavaScript 基于原型编程、多范式的动态脚本语言,并且支持面向对象、命令式和声明式(如函数式编程)风格。

JavaScript十分强大,不管是前端页面开发、视觉动态渲染、数据交互还是后端逻辑处理,都可以通过JS实现。虽然它是作为开发Web页面的脚本语言而出名,但是它也被用到了很多非浏览器环境中。

推荐JS/JQuery开发教程
JavaScript过滤XSS攻击方法
JavaScript过滤XSS攻击方法

什么是XSS?XSS(Cross Site Scripting),跨站脚本攻击,是一种允许攻击者在另外一个...

1 298
jQuery怎样监听鼠标滚动是向上还是向下的状态?
jQuery怎样监听鼠标滚动是向上还是向下的状态?

知乎鼠标向下滚动显示文章标题,向上滚动显示栏目;又或者向下滚动到底部时异步...

0 474
jquery怎样获取textarea用户输入的行数?
jquery怎样获取textarea用户输入的行数?

jQuery是一个相当好用的js插件,通过jquery我们可以实现很多功能,例如今天要介...

0 472
JS点击复制data-*属性(支持多个元素)
JS点击复制data-*属性(支持多个元素)

分享一段js原生点击复制data-*属性的源码,根据onclick事件触发,复制当前元素...

0 319
JS控制输入字数的两个方案
JS控制输入字数的两个方案

我们在文章输入框中经常有用到字数控制,但字数控制有两种方案,一种是字母/空...

0 323
jQuery监听点击事件弹出关注二维码教程
jQuery监听点击事件弹出关注二维码教程

通过jQuery实现点击关注按钮弹出二维码是一个比较常用的功能,今天鸥哥讲讲这...

0 397
js点击追加信息到textarea
js点击追加信息到textarea

通过灵活运用js,我们可以轻松实现点击追加相关信息到textarea的功能。这个功...

0 498
js网站视频播放器ckplayer和dplayer优缺点分析
js网站视频播放器ckplayer和dplayer优缺点分析

dplayer和ckplayer都是非常流行的web视频播放器,二者都占有相当大的用户市场...

0 1406
推荐插件
帝国cms多栏目多数据表自动审核推送插件
帝国cms多栏目多数据表自动审核推送插件

本插件基于帝国cms帝国cms每日自动审核插件,在自动审核指定条数信息的基础上...

0 772
帝国cms百度文字识别ocr接口对接插件
帝国cms百度文字识别ocr接口对接插件

许多网站会做一些小功能小插件给客户使用以增强用户黏性,比如图片转文字,这种...

0 349
帝国cms百度AI黑白图像上色api接口对接插件
帝国cms百度AI黑白图像上色api接口对接插件

百度开放了系列AI功能api如图像上色、图像去雾、图像修复、无损放大、清晰...

0 305
帝国cms百度AI图像去雾api接口对接插件
帝国cms百度AI图像去雾api接口对接插件

通过本插件,可以实现帝国cms网站对接百度云api实现图像去雾的功能。经过实际...

0 350
帝国cms百度AI图像清晰度增强api接口对接插件
帝国cms百度AI图像清晰度增强api接口对接插件

通过本插件,可以实现帝国cms网站对接百度云api实现图像清晰度增强的功能。经...

0 393
帝国cms联想词搜索高级搜索插件下载
帝国cms联想词搜索高级搜索插件下载

帝国CMS自带的搜索功能虽然强大,但也有很强的局限性 -- 必须关键词完全匹配...

0 606
帝国cms智能自动审核按星期几审核指定栏目带推送插件
帝国cms智能自动审核按星期几审核指定栏目带推送插件

采集站的必备资源是自动审核,要做到日收录也离不开定时发布。而本插件的自动...

0 1122
帝国cms网站会员登录与退出历史记录日志插件
帝国cms网站会员登录与退出历史记录日志插件

帝国cms默认只有上次登录时间与ip,没有一个记录清单,所以今天,我们分享这个帝...

0 259
客服QQ:341553759
扫码咨询 常见问题 >
官方交流群:90432500
点击加入