先说一下要写这篇文章的原因，由于之前习惯了使用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布局实用教程快速入门的全部内容，欢迎大家一起讨论交流哦
近期评论