共计 3343 个字符，预计需要花费 9 分钟才能阅读完成。
当初大前端中被应用最多的布局形式非 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 端拜访哦。
目前只是具备的基本功能，还有一些须要优化要做，前面继续更新，欢送体验。
明天分享到就这里，心愿对你有用。
即时获取更多精彩文章，请关注公众号『前端技术江湖』
