首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >玩转flex布局

玩转flex布局

原创
作者头像
郭诗雅
修改于 2018-08-15 02:58:37
修改于 2018-08-15 02:58:37
1.8K0
举报
文章被收录于专栏:郭诗雅的专栏郭诗雅的专栏

H5页面如果使用了flex,就会发现处处离不开它,因为实在太多优点了!

flex实现水平垂直居中

有两种方式:

请注意这里flex-direction不同时,justify-content和align-items所代表的轴方向。

flex order使用

flex中的order属性对致力于无障碍优化的QQ空间同学来说,也很有用,例如以下这个页面:

为了实现第一名居中,我们可能如上实现,但是这样不利于数据的顺序加载和无障碍阅读,改成下面的方式会友好很多:

flex grow shrink

在最初使用flex时,我会直接敲flex:1,而没有了解其实flex是flex-grow/flex-shrink/flex-basis的简写,当不希望因为父级元素过小时子元素被扩展或压缩时,flex-grow/flex-shrink就变得重要了。如下图的对比:

图1: 蓝色和绿色元素宽度被等比例压缩

图2: 蓝色元素宽度不被压缩

flex 替代fixed布局方案

如下图当底部或者底部有fixed定位元素时,我们一般会这样实现,然而在iOS11上滚动时,fixed元素可能有短暂的消失时间

而另一种解决方案是通过flex来解决,如下图:

ps: 第二种方案也有缺点,当主体内容过长时不能使用系统的原生滚动,局部滚动会让安卓系统滚动体验不太流畅(iOS系统支持用-webkit-overflow-scrolling: touch;开启弹性滚动)。

用display:inline-flex解决display:inline-block空格问题

很多时候我们需要在同一行显示多个元素,如果在代码中这些换行了,html解析时会把这些换行转换为一个空格,于是乎显示可能是这样:

此时我们可能会用font-size:0来去掉空格,为了兼容iOS9系统以及其他低端机(系统最小fontSize为12px)还需要设置letter-spacing:-4px; 在.item内部如果有内容还需要设置回font-size和letter-spacing保证内容的正常显示。于是乎就多了四行代码。如果直接在父级采用inline-flex布局,就不存在空格这回事了:

ps:为什么不采用flex?因为很多时候需要父级的宽度受子元素的宽度影响而不是更上一层的父级影响,而内联flex可以做到。如下图的横向滚动:

flex 兼容

以下是之前用flex时遇到的一些坑:

1. 写flex:1时请带上min-width或者min-height(取决于flex-direction),这样可以避免小程序和低端机上的一些bug。

2. 不要在button元素内使用align-items,手机上可能不生效。

3. 最后最重要的当然是要记得autoprefix啦。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
R语言箱线图添加显著性--不同水平实现方法
这种试验,比如有两个品种,株高的差异,每个品种调查了10株,就构成了这样的试验数据。
邓飞
2022/01/04
2.7K0
R语言箱线图添加显著性--不同水平实现方法
scRNA分析|自定义你的箱线图-统计检验,添加p值,分组比较p值
在前面scRNA分析|使用AddModuleScore 和 AUcell进行基因集打分,可视化中,基因集评分使用小提琴图或者箱线图进行展示,那如何进行统计检验以及添加P值呢?本文主要解决以下几个问题
生信补给站
2023/03/08
5.4K0
scRNA分析|自定义你的箱线图-统计检验,添加p值,分组比较p值
绘制带显著性比较的bar图
geom_boxplot(position=position_dodge(),width=0.5)+
爱学习的小明明
2020/09/26
4.6K0
绘制带显著性比较的bar图
60-R可视化-8-用ggsignif做统计分析绘图
参考:R绘图系列-带有significant信息的boxplot | showteeth's blog[1]GitHub - const-ae/ggsignif: Easily add significance brackets to your ggplots[2][ggplot2添加p值和显著性 - 简书 (jianshu.com)](https://www.jianshu.com/p/77f12664540b "ggplot2添加p值和显著性 - 简书 (jianshu.com "ggplot2添加p值和显著性 - 简书 (jianshu.com)")")
北野茶缸子
2021/12/17
2.9K0
60-R可视化-8-用ggsignif做统计分析绘图
R语言一键批量完成差异统计和可视化
关键词:正态性检验;方差齐性;非参数检验;秩和检验;多重比较;带显著性字母柱状图或箱线图
生信宝典
2019/11/07
4.6K2
R语言一键批量完成差异统计和可视化
24种R语言新手入门之箱线图(二)
箱线图一般用于可视化基因的表达情况,常化用统计学方法计算组间基因的表达差异情况。以下主要是用boxplot和geom_boxplot
生信初学者
2023/03/14
2.4K0
24种R语言新手入门之箱线图(二)
R可视化:ggpubr的基本图形
GGPlot2(通常缩写为ggplot2)是一个在R语言中广泛使用的绘图包,以其灵活和强大的数据可视化功能而闻名。它基于"The Grammar of Graphics"一书的概念,允许用户通过组合不同的视觉元素来创建自定义的图形。而ggpubr是ggplot2的一个扩展包,它进一步简化了图形的创建过程,特别是对于初学者来说,提供了一种更为直观和易于理解的绘图方式。
生信学习者
2024/06/11
4440
R可视化:ggpubr的基本图形
十步搞定单因素方差分析
可以得出结论,我们感兴趣的基因(这里是CUL5)在乳腺癌的正常组织及癌症组织(原位和转移)表达量,使用单因素方差分析,得到了统计学显著的结果。
生信技能树
2019/05/15
1.2K0
十步搞定单因素方差分析
R语言绘图 | 给箱线图加个点
ggpubr是一个广泛应用于学术绘图的R包,可以让我们轻松绘制出用于发表的高质量图形。
生信小王子
2020/08/10
3K0
R语言绘图 | 给箱线图加个点
多组差异分析的可视化,这样做最省心!
下图是来自文献中的一个示例图,展示了不同亚型之间risk score值的差异分析结果
生信修炼手册
2022/06/09
1.6K0
多组差异分析的可视化,这样做最省心!
R语言中科研绘图神器ggpubr
在整理图像的时候会让人觉得苦恼的就是怎么让绘图风格统一、画风高级。今天就跟大家介绍一个画图的神器,据说可以直接赢得主编的好感。此包就是ggpubr,一个联合ggplot2包进行绘图工具包。首先看下包的安装:
一粒沙
2022/11/21
2K0
R语言之可视化(24)生成带P值得箱线图
R语言之可视化(24)生成带P值得箱线图 rm(list=ls()) library(ggpubr) data("ToothGrowth") library(ggsci) pal = pal_lancet("lanonc" )(9) colors = pal_lancet("lanonc")(9)[ 1:3] my_comparisons = list(c("0.5","1"),c("1","2"), c("0.5","2")) p = ggboxplot( ToothGrowth , x =
用户1359560
2019/05/20
1.7K2
24种R语言新手入门之小提琴图(三)
柱状图和箱线图的代码能理解了其实发现好多作图都是可以触类旁通的,小提琴图作为科研结果常用展示图也不可或缺,用ggplot或者vioplot。
生信初学者
2023/03/14
2.4K0
24种R语言新手入门之小提琴图(三)
R语言的画图代码及差异性分析[通俗易懂]
加载我们常用的包,如ggplot2 , 在这里我只使用R的可视化功能,前期的数据清洗及处理,将数据转化为R可识别的数据格式, 我均是通过Python的pandas包来实现的,强烈推荐使用python清洗数据!!!! 自动化加星号!!!!(显著性!!!!)
全栈程序员站长
2022/07/31
1.3K0
R语言 | 差异箱线图的绘制
本次讲的是差异箱线图的绘制,在基因表达量、生态学实验数据统计(如发芽率、产卵量、性比等等)等方面应用比较多。
生信real
2021/12/08
4.8K0
R语言 | 差异箱线图的绘制
手把手教你绘制多个基因表达值小提琴图
数据准备 #set your work directory data<-read.csv(file = "data.csv",header = T,sep = ",") colnames(data)<-c("gene",colnames(data)[-1]) test<-data[1:5,1:5] View(test) ### data<-aggregate(data[,2:ncol(data)],by=list(data$gene),FUN = mean,na.rm=T)##重复基因求平均值 genen
百味科研芝士
2020/04/30
4.1K0
手把手教你绘制多个基因表达值小提琴图
ggpubr—专为学术绘图而生
ggpubr-专为学术绘图而生 由Hadley Wickham创建的ggplot2(https://ggplot2.tidyverse.org/)非常好用的可视化包了,但是由ggplot2绘制的图形通常不能直接用于发表,还需要经过一定程度的编辑,对于不少那么会编程的研究人员而言可能并不是特别友好。 因此,ggpubr应运而生,它提供了简单易用的函数,用于绘制定制的高质量图,可以直接用于发表。 以下演示官方教程: 1Sys.setlocale('LC_ALL','C') 2library(ggpubr)
百味科研芝士
2019/10/23
3.2K0
「R」数据可视化2 : 箱形图
在生物领域我们常常使用R语言对数据可视化。在对数据可视化的时候,我们需要明确想要展示的信息,从而选择最为合适的图突出该信息。本系列文章将介绍多种基于不同R包的作图方法,希望能够帮助到各位读者。
王诗翔呀
2020/07/06
2.6K0
「R」数据可视化2 : 箱形图
用ggpubr包制图
Hadley Wickham撰写的ggplot2[1]是好用的软件包,是可视化工具的必备包。但是,需要知道ggplot2一定的理论与原理,对新手来说,入门门槛还是比较高的。
用户7010445
2020/11/13
1.8K0
用ggpubr包制图
R语言学习笔记-Day5
拼图:par里的mfrow, grid.arrange, cowplot, patchwork
用户11190095
2024/07/07
5110
推荐阅读
相关推荐
R语言箱线图添加显著性--不同水平实现方法
更多 >
LV.0
这个人很懒,什么都没有留下~
交个朋友
加入前端学习入门群
前端基础系统教学 经验分享避坑指南
加入前端工作实战群
前端工程化实践 组件库开发经验分享
加入前端趋势交流群
追踪前端新趋势 交流学习心得
换一批
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档