Flexbox Guide
Flexible Box 模型,通常被称为 flexbox,是一种一维的布局模型。它给 flexbox 的子元素之间提供了强大的空间分布和对齐能力。
- 基本介绍
- 浏览器兼容性
- 启用Flexbox
容器属性
- 行||列 对齐 ==row and columns==
- 水平||垂直 对齐 ==Vertical and horizontal==
- 更改水平对齐 ==change horizontal alignment==
更改垂直对齐 ==change vertical alignment==
- 关于基准线 ==about baseline==
- 换行 ==wrap==
flex元素上的属性
- order
- align-self
- flex-grow
- flex-shrink
- flex-basis
- flex
介绍
Flexbox,也称为灵活盒模块,是两个现代布局系统之一,还有CSS Grid。与CSS Grid(二维)相比,flexbox是一维布局模型。它将基于行或列控制布局,但不能同时控制布局。flexbox的主要目标是允许项目填充其容器提供的整个空间,具体取决于您设置的一些规则。Flexbox不兼容IE10以下,IE10以下可以使用如下方式:
- Table layouts
- Floats
- clearfix hacks
- display: table hacks
兼容性
IE10以下不兼容,一些浏览器需要使用-webkit或者display:-webkit-box兼容处理。
使用flexbox
display:flexbox
或者
display:inline-flexbox
容器属性
- flex-direction
- justify-content
- align-items
- flex-wrap
- flex-flow
行对齐或者列对齐
flex-direction决定容器以行对齐还是列对齐。
- flex-direction:row,行对齐,从左到右
- flex-direction:row-reverse,行对齐,从右到左
- flex-direction:column,列对齐,从上到下
- flex-direction:column-reverse,列对齐,从下到上
如下图所示:
水平对齐或者垂直对齐
flex-direction默认是row,从左向右,当其属性值为column时,是从上到下,可以使用justify-content和align-items改变水平和垂直对齐。
改变水平对齐方式
justify-content有5个属性值:
- flex-start 左对齐
- flex-end 右对齐
- center 居中对齐
- space-between 首尾对齐容器左右侧,中间间距相等
- space-around 每个元素的间距相等
改变垂直对齐方式
align-items有5个属性值:
- flex-start 顶部对齐
- flex-end 底部对齐
- center 居中对齐
- baseline 基线对齐
- stretch 拉伸以适应容器
关于align-items:baseline,可以看看codepen:https://codepen.io/flaviocopes/pen/oExoJR
换行
默认情况下,flexbox容器中的项目保留在一行中,缩小它们以适合容器。
可以使用flex-wrap:wrap或者flex-wrap:wrap-reverse对容器中的元素进行换行处理。
一种简写方式:flex-flow:row wrap;即flex-direction:row && flex-wrap:wrap
适用于flexbox容器内每个元素的属性
- order
- align-self
- flex-grow
- flex-shrink
- flex-basis
- flex
order-改变元素的顺序,如下图所示,可以指定某个元素的order值,以改变其位置,默认值为0
align-self-元素使用align-self覆盖容器的align-items对当前元素的对齐方式
flex-grow || flex-shrink 如有必要,可以增加或缩小某个元素
flex-grow:默认值为0,当某个元素flex-grow为1,另一个为2,则为flex-grow:2的元素占用flex-grow:1的空间的2倍。
flex-shrink:默认值为1,如果没有显示定义该属性,将会自动按照默认值1在所有因子相加之后计算比率来进行空间收缩。
比如:有这么一个容器,div>.box13+.box22父容器定义宽度为500px,子元素定义宽度为120px,box1的flex-shrink为1,.box2的flex-shrink为2,那么子项相加之后即为 600 px,超出父容器 100px。那么超出的 100px 需要被 A、B、C、D、E 消化 通过收缩因子,所以加权综合可得 1001+1001+1001+1002+100*2=700px。
于是我们可以计算 A、B、C、D、E 将被移除的溢出量是多少:
A 被移除溢出量:(100*1/700)*100,即约等于14px
B 被移除溢出量:(100*1/700)*100,即约等于14px
C 被移除溢出量:(100*1/700)*100,即约等于14px
D 被移除溢出量:(100*2/700)*100,即约等于28px
E 被移除溢出量:(100*2/700)*100,即约等于28px最后A、B、C、D、E的实际宽度分别为:120-14=106px, 120-14=106px, 120-14=106px, 120-28=92px,120-28=92px
flex-basis-用于设置或检索弹性盒伸缩基准值,默认值为auto,其与width的区别可以参考这篇文章:https://www.jianshu.com/p/17b...
flex:有三个属性值
- flex-grow
- flex-shrink
- flex-basis
flex: 0 1 auto
分别对应flex-grow、flex-shrink、flex-basis
结尾
友情献上小游戏,通过游戏学习flexbox
http://flexboxfroggy.com/#zh-cn
Flexbox Guide相关推荐
- Bootstrap 4:您需要知道的一切
深入解决常见的响应式Web设计问题 (A deep dive into solving common responsive web design problem) This article will ...
- flexbox布局_Flexbox vs Grid-如何构建最常见HTML布局
flexbox布局 There are so many great CSS resources all over the internet. But what if you just want a s ...
- css flexbox模型_CSS Flexbox在全国范围内的公路旅行中得到了解释
css flexbox模型 by Kevin Kononenko 凯文·科诺年科(Kevin Kononenko) CSS Flexbox在全国范围内的公路旅行中得到了解释 (CSS Flexbox ...
- React Native Styling:样式化的组件,Flexbox布局等
React Native provides an API for creating stylesheets and styling your components: StyleSheet. React ...
- css flexbox模型_Flexbox-Ultimate CSS Flex速查表(带有动画图!)
css flexbox模型 This comprehensive CSS flexbox cheatsheet will cover everything you need to know to st ...
- vux flexbox使用_指南针与Flexbox结合使用入门
vux flexbox使用 There is no doubt that flexbox is an effective solution for laying out web pages. Howe ...
- 深度学习所需显存_只需10分钟即可学习基本的Flexbox
深度学习所需显存 by Justin Yek 贾斯汀·耶克(Justin Yek) 只需10分钟即可学习基本的Flexbox (Learn basic Flexbox in just 10 minut ...
- Structured Streaming编程 Programming Guide
Structured Streaming编程 Programming Guide • Overview • Quick Example • Programming Model o Basic Conc ...
- Technology Document Guide of TensorRT
Technology Document Guide of TensorRT Abstract 本示例支持指南概述了GitHub和产品包中包含的所有受支持的TensorRT 7.2.1示例.Tensor ...
最新文章
- html 字母列表通讯录,仿微信通讯录字母排序列表
- zookeeper版本更新_Zookeeper归纳
- python文件读写r+_python文件读写操作(r/r+/rb/w/w+/wb/a/a+/ab)
- 正则表达式下——相关方法
- 什么是高并发,如何避免高并发
- UI设计素材|app表单模板,临摹学习,有效提高设计水平!
- Junit4.x扩展:运行指定方法
- OpenCV 图像金字塔buildPyramid、pyrDown、pyrUp
- java认证考试试卷_java认证考试试题及答案
- 西安80北京54,2000和WGS84互转C#程序
- 如何去管理Java项目
- Win11 如何跳过微软注册界面
- 赵小楼《天道》《遥远的救世主》深度解析(80)强者用逻辑支配行为,弱者用情绪支配行为
- php whois查询,php whois查询API制作方法
- 尼古拉斯·凯奇:名门传奇
- kobo glo安装koreader(刷ksm后)
- MySQL8 NDB Cluster安装部署
- PDF转docx转md
- 高价NFT不利于流动性
- 300张现场照片,揭秘移动云大会!
热门文章
- 后浪优秀!21 岁小伙兼职程序员养家,大三存款达 6 位数
- 爱奇艺一程序员用 10 万元“买”了个北京户口
- 64 岁的 Python 之父:我不退休了,我要去微软!
- 探讨ASP.NET 2.0中的Web控件改进技术(3)
- 这才是GraphQL最详尽的解释
- rpm 查看安装包 信息 时间 目录
- 【iCore3 双核心板】例程十七:USB_MSC实验——读/写U盘(大容量存储器)
- Rabbitmq后台运行命令
- 非常详细的测试unity与android之间的通讯操作
- 多线程程序 怎样查看每个线程的cpu占用