先说一下要写这篇文章的原因,由于之前习惯了使用float布局,但是不明白flex布局的便捷性,所以很长一段时间都不愿意去花时间了解flex,有段时间想去了解吧,但是一看到里面众多的属性值,又望而却步。但是后来学会使用后,有爱不释手,所以写这篇文章想说两件事,第一,flex布局很好用,第二,聊一下flex布局的常用属性。
先说一下我用flex布局经常想实现的效果:
1、不使用float left right,直接实现左右布局
2、子元素高度不一致时,实现垂直居中效果

以上的效果就是借助flex布局实现实现的,代码如下:

图片中可以到到使用到了一下属性和值:(本文由前端开发https://www.liuyanla.com/原创)
父元素:
display: flex;(flex模型)
flex-direction: row;(子元素排成一行,column:子元素排成多行)
justify-content: space-around;(子元素等分为4列,前提是子元素文本内容长度一致的时候)
align-items: center;(子元素以父元素的高度为标准垂直居中)
子元素:
flex: 1;(我的理解是开启等分栅格)
这里面有个关键就是在子元素中设置:word-break: break-all;为什么要设置这个呢?元素内如果有英文字符(包括数字),而且很长的时候,如果没有换行,他们会把当前的子元素撑开,这样看到的就不是等分栅格了,效果如下:

所以防止我们的子元素被撑开,加上可以保一方平安。不过有的时候我们想设置子元素的宽度,但是发现对子元素设置宽度后不生效,这是为什么呢?经过我的测试发现,设置flex:1后,是无法修改宽度的,如果不设置flex:1,同时在子元素上添加flex-shrink: 0;此时元素的宽度即可设置。
其实flex布局的属性值还有很多,我这里知识介绍一下常规用法中设计到的5个属性,如果想全面深入学习,推荐看阮一峰老师的这篇文章http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html,说的很详细
以上就是flex布局实用教程快速入门的全部内容,欢迎大家一起讨论交流哦
近期评论