博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
Flex很难?一文就足够了
阅读量:5824 次
发布时间:2019-06-18

本文共 4252 字,大约阅读时间需要 14 分钟。

Flexible Box 是什么

  布局的传统解决方案,基于,依赖  属性 + 属性 + 属性。它对于那些特殊布局非常不方便,比如,就不容易实现。所以在2009年,w3c提出了一种可以简洁、快速弹性布局的属性,主要思想是给予容器控制内部元素高度和宽度的能力,这就是今天要说的Flexible Box,弹性布局。

  由于浏览器的限制,在写代码之前推荐查询一下兼容模式,了解下目前flex的支持程度,我们可以通过这个网站来进行查询,如下图,可以看到,除了对于IE支持一般之外,其他浏览器大多没啥毛病,但为了以防万一,在写代码的时候还是加上-webkit-这一前缀以防万一。

.box{  display: -webkit-flex; /* Safari */  display: flex;}复制代码

重点!flex一共有两根轴:main axis(主轴)和cross axis(交叉轴),大家一般认为主轴就是水平,交叉轴就是垂直的。但是!这是错误的!请与水平垂直这两个方位的概念区分开,这是一个方位,如果说当年定义的时侯为什么不命名为vertical&horizon??原因就是main axis没有一个固定的方位,所以请不要再通过水平垂直的方位来理解了。那么主轴是怎么区分的呢?其实很简单按照当前flex的方向,是水平排列还是垂直排列。如果是水平排列(row),主轴就是水平的,交叉轴就是垂直的,反之亦然。这是一个很重要的概念。

注意,设为 Flex 布局以后,子元素的float、clear和vertical-align属性将失效。

属性描述

父容器的属性

flex-direction :该元素决定主轴的方向(即子元素的排列方向) 默认值 :row 适用于 :flex 容器

属性 描述
row 主轴为水平方向,起点在左端。
row-reverse 主轴为水平方向,起点在右端。
column 主轴为垂直方向,起点在上沿。
column-reverse 主轴为垂直方向,起点在下沿。

flex-wrap :设置或检索伸缩盒对象的子元素超出父容器时是否换行 默认值 :nowrap 适用于 :flex 容器

属性 描述
nowrap 不换行(默认)
wrap 换行,第一行在上方
wrap-reverse 换行,第一行在下方

PS: flex-flow 属性是 flex-direction 属性和 flex-wrap 属性的简写形式,默认值为 row nowrap

.box {  flex-flow: flex-direction flex-wrap|initial|inherit;}复制代码

justify-content :定义了子元素在主轴上的对齐方式。 默认值 :flex-start 适用于 :flex 容器

属性 描述
flex-start 左对齐
flex-end 右对齐
center 居中
space-between 两端对齐,项目之间的间隔都相等
space-around 每个项目两侧的间隔相等。所以,项目之间的间隔比项目与边框的间隔大一倍

align-items :定义了子元素在交叉轴上的对齐方式 默认值 :stretch 适用于 :flex 容器

属性 描述
flex-start 交叉轴的起点对齐
flex-end 交叉轴的终点对齐
center 交叉轴的中点对齐
baseline 子元素第一行文字的基线对齐,如果子标签内没有内容,将按照每个 div 的底部对齐
stretch 如果项目未设置高度或设为auto,将占满整个容器的高度

align-items: stretch 时每个子元素的 height 必须为 auto 否则 height 属性会覆盖 stretch 的效果

如果 div 内没有内容,或者子标签内没有内容,将按照每个 div 的底部对齐

align-content :定义多根轴线的对齐方式,如果子元素只有一根轴线,该属性不起作用 默认值 :stretch 适用于 :多行的弹性盒模型容器

属性 描述
flex-start 与交叉轴的起点对齐
flex-end 与交叉轴的终点对齐
center 与交叉轴的中点对齐
space-between 与交叉轴两端对齐,轴线之间的间隔平均分布
space-around 每根轴线两侧的间隔都相等。所以,轴线之间的间隔比轴线与边框的间隔大一倍
stretch 轴线占满整个交叉轴

PS: 在上面的例子 flex-wrap 需设为 wrap, 且数量超出一行, 父容器的高度相对于子容器有多余,才能看到效果

子元素的属性

order :定义子元素的排列顺序,数值越小,排列越靠前 默认值:0 适用于:flex子项和flex容器中的绝对定位子元素

PS:用整数值来定义排列顺序,数值小的排在前面。元素的值可以为负值

flex-grow :定义子元素的放大比例 默认值 :0 适用于 :flex子项

  • a
  • b
  • c
复制代码
.flex{
display:flex;width:600px;margin:0;padding:0;list-style:none;}.flex li {
text-align:center;height:100px;}.flex li:nth-child(1){
width:200px;background-color:green;}.flex li:nth-child(2){
flex-grow:1;width:50px;background-color:yellow;}.flex li:nth-child(3){
flex-grow:3;width:50px;background-color:red;}复制代码

flex-grow的默认值为0,如果没有显示定义该属性,是不会拥有分配剩余空间权利的。 本例中b,c两项都显式的定义了flex-grow,flex容器的剩余空间分成了4份,其中b占1份,c占3分,即1:3 flex容器的剩余空间长度为:600-200-50-50=300px,所以最终a,b,c的长度分别为: a: 50+(300/4)=200px b: 50+(300/4*1)=125px c: 50+(300/4*3)=275px

flex-shrink :定义子元素的收缩比例(与flex-grow相反) 默认值 :1 适用于 :flex子项

  • a
  • b
  • c
复制代码
.flex{
display:-webkit-flex;display:flex;width:400px;margin:0;padding:0;list-style:none;}.flex li{
width:200px;}.flex li:nth-child(1){
background:#888;}.flex li:nth-child(2){
background:#ccc;}.flex li:nth-child(3){
-webkit-flex-shrink:3;flex-shrink:3;background:#aaa;}复制代码

flex-shrink的默认值为1,如果没有显示定义该属性,将会自动按照默认值1在所有因子相加之后计算比率来进行空间收缩。

本例中c显式的定义了flex-shrink,a,b没有显式定义,但将根据默认值1来计算,可以看到总共将剩余空间分成了5份,其中a占1份,b占1份,c占3分,即1:1:3
我们可以看到父容器定义为400px,子项被定义为200px,相加之后即为600px,超出父容器200px。那么这么超出的200px需要被a,b,c消化
通过收缩因子,所以加权综合可得200*1+200*1+200*3=1000px;
于是我们可以计算a,b,c将被移除的溢出量是多少:
a被移除溢出量:(200*1/1000)*200,即约等于40px
b被移除溢出量:(200*1/1000)*200,即约等于40px
c被移除溢出量:(200*3/1000)*200,即约等于120px
最后a,b,c的实际宽度分别为:200-40=160px, 200-40=160px, 200-120=80px

PS:如果所有项目的 flex-shrink 属性都为 1,当空间不足时,都将等比例缩小。如果一个项目的 flex-shrink 属性为0,其他项目都为 1,则空间不足时,前者不缩小。负值对该属性无效。

flex-basis :设置或检索弹性盒伸缩基准值 默认值 :auto 适用于 :flex子项

flex-basis 控制元素的默认尺寸,然后再由其他 Flexbox 属性控制,可以覆盖 width 属性

flex-basis 可以和 width 属性互换

PS:flex-basis 是通过主轴 (main axis) 来影响元素尺寸的

align-self:允许单个子元素有与其他项目不一样的对齐方式,可覆盖align-items属性 默认值 :auto 适用于 :flex子项

属性 描述
auto 继承父元素的"align-items"值,如果其没有父元素,等同于"stretch"
flex-start 交叉轴的起点对齐
flex-end 交叉轴的终点对齐
center 交叉轴的中点对齐
baseline 第一行文字的基线对齐
stretch 如果项目未设置高度或设为auto,将占满整个容器的高度

父元素: align-items:flex-end

a: align-self: flex-end
b: align-self: center
c: align-self: flex-start
d: align-self: baseline; padding: 20px 10px
e: align-self: baseline
f: align-self: stretch
g: align-self: auto

未完待续...

参考

转载于:https://juejin.im/post/5c2dd3a96fb9a04a0441255c

你可能感兴趣的文章
docker 下 安装rancher 笔记
查看>>
spring两大核心对象IOC和AOP(新手理解)
查看>>
数据分析相关
查看>>
Python LDAP中的时间戳转换为Linux下时间
查看>>
微信小程序蓝牙连接小票打印机
查看>>
环境错误2
查看>>
C++_了解虚函数的概念
查看>>
全新jmeter视频已经上架
查看>>
Windows 8下如何删除无线配置文件
查看>>
解决Windows 7中文件关联和打开方式
查看>>
oracle系列(五)高级DBA必知的Oracle的备份与恢复(全录收集)
查看>>
hp 服务器通过串口重定向功能的使用
查看>>
国外10大IT网站和博客网站
查看>>
android第十一期 - SmoothSwitchLibrary仿IOS切换Activity动画效果
查看>>
zabbix 批量web url监控
查看>>
MongoDB CookBook读书笔记之导入导出
查看>>
shell如何快速锁定所有账号
查看>>
HTML 5实现的手机摇一摇
查看>>
Linux 文件IO理解
查看>>
Ninject 2.x细说---2.绑定和作用域
查看>>