3分钟精通flex布局 - flex布局可视化学习工具
共 5009字，需浏览 11分钟
· 2021-02-05
写在前面
现在大前端中被使用最多的布局方式非flex莫属，像h5、pc、小程序、rn、甚至native都在使用flex布局，可见掌握好flex布局是多的重要。
然而在flex布局兴起时，我们学习flex布局的方法大部分就是看一些博客文章的解析，官方文档说明，然后挨个去看各个属性的作用和示例，然后再自己手敲实践几次。这也是我当初学习flex布局的方法，常规手段，也很有效。如果愣是要说一些不足的地方，应该就是不直观，效率不太高。
那有没有一种更直观、更高效的学习方式呢？
为了能解决这个问题，flex布局可视化工具就诞生了。
这个工具适合什么人？
毕竟flex布局很简单，加起来属性也没几个，学习成本也不高，如果你在日常工作中，存在下面一种或者几种情况，那就可以继续往下看，否则就可以跳出了。
对有些属性的作用有些模糊，毕竟是web开发，写了就能即时看效果，多试几次总能对 有时候还需要百度 搞不清主轴变化后的变化，容易搞混 其他
可视化工具展示
父元素属性设置
在这里控制父元素的属性值，操作后即时渲染到下面的结果预览区。
结果预览
在这里可以添加子元素，也可以单独对其中的一个子元素设置不同的属性值。
上面实现的是一个水平垂直居中效果
图解FlexBox
以下截图均来自可视化工具，看不下去可以直接跳到到文章末尾，直接在线体验。
flex-direction:row
flex-direction:row-reverse
flex-direction:row, justify-content:space-around
flex-direction:column,justify-content:space-around
还有很多属性就不一一截图了，可以直接打开文末的网址体验下。
特别说明下
其实很多人迷惑的是justify-content和align-items的关系，很多人误认为align-items是设置垂直方向的布局，这么理解其实是有问题的。
这里要搞清楚一个概念，主轴和交叉轴。
justify-content用来设置主轴方向的布局或对齐方式align-items用来设置交叉轴方向的布局或对齐方式
主轴可以通过flex-direction来进行设置，取值为row和column。
当为row时，justify-content 控制水平方向的布局，align-items 控制垂直方向的布局。
当为column时，justify-content 控制垂直方向的布局，align-items 控制水平方向的布局。
截图演示下
flex-direction:row,justify-content:space-around,align-items:center
flex-direction:column,justify-content:space-around,align-items:center
本工具的实现方式
实现很简单，使用react开发，只遵循一个原则即可 UI=fn(state)，所以只要定义好你的state就完成了一半儿。
细节就不说了，贴下主要用到的state
const ChildEleDefaultStyle = [
{ text: 'order', type: 'number', jsxKey: 'order' },
{ text: 'flex-grow', type: 'number', jsxKey: 'flexGrow' },
{ text: 'flex-shrink', type: 'number', jsxKey: 'flexShrink' },
{ text: 'flex-basis', type: 'string', jsxKey: 'flexBasis' },
{ text: 'align-self', type: 'list', jsxKey: 'alignSelf', values: ['auto', 'flex-start', 'flex-end', 'center', 'base-line'] },
]
const initState = {
parentEleStyle: {
flexDirection: 'row',
justifyContent: 'center',
alignItems: 'center',
flexWrap: 'wrap',
},
parentFlexData: [
{
id: 1,
propertiyName: 'flex-direction',
propertiyObjName: 'flexDirection',
values: [
{ name: 'row', checked: 2, },
{ name: 'row-reverse', checked: 1 },
{ name: 'column', checked: 1 },
{ name: 'column-reverse', checked: 1 },
]
},
{
id: 2,
propertiyName: 'flex-wrap',
propertiyObjName: 'flexWrap',
values: [
{ name: 'nowrap', checked: 1 },
{ name: 'wrap', checked: 2 },
{ name: 'wrap-reverse', checked: 1 },
]
},
{
id: 3,
propertiyName: 'justify-content',
propertiyObjName: 'justifyContent',
values: [
{ name: 'flex-start', checked: 1 },
{ name: 'flex-end', checked: 1 },
{ name: 'center', checked: 2 },
{ name: 'space-between', checked: 1 },
{ name: 'space-around', checked: 1 },
]
},
{
id: 4,
propertiyName: 'align-items',
propertiyObjName: 'alignItems',
values: [
{ name: 'flex-start', checked: 1 },
{ name: 'flex-end', checked: 1 },
{ name: 'center', checked: 2 },
{ name: 'space-between', checked: 1 },
{ name: 'space-around', checked: 1 },
]
},
{
id: 5,
propertiyName: 'align-content',
propertiyObjName: 'alignContent',
values: [
{ name: 'stretch', checked: 2 },
{ name: 'flex-start', checked: 1 },
{ name: 'flex-end', checked: 1 },
{ name: 'center', checked: 1 },
{ name: 'space-between', checked: 1 },
{ name: 'space-around', checked: 1 },
]
}
],
resultItems: [
{
id: 1, elementStyle: {
order: 0,
flexGrow: 0,
flexShrink: 1,
flexBasis: 'auto',
alignSelf: 'auto'
}
},
{
id: 2, elementStyle: {
order: 0,
flexGrow: 0,
flexShrink: 1,
flexBasis: 'auto',
alignSelf: 'auto'
}
},
{
id: 3, elementStyle: {
order: 0,
flexGrow: 0,
flexShrink: 1,
flexBasis: 'auto',
alignSelf: 'auto'
}
},
{
id: 4, elementStyle: {
order: 0,
flexGrow: 0,
flexShrink: 1,
flexBasis: 'auto',
alignSelf: 'auto'
}
},
]
}
彩蛋
面试中经常被问 flex:0 1 auto，表示什么？所以特地在子元素上作了一个顺序。
flex: flex-grow、flex-shrink 、flex-basis 缩写
工具地址
http://bigerfe.com/yflex
获得更好的体验，需要在pc端访问哦。
目前只是具备的基本功能，还有一些需要优化要做，后面持续更新，欢迎体验。
今天分享到就这里，希望对你有用。
可否点个『在看』支持下 