現在大前端中被使用最多的布局方式非flex莫屬，像h5、pc、小程序、rn、甚至native都在使用flex布局，可見掌握好flex布局是多的重要。
然而在flex布局興起時，我們學習flex布局的方法大部分就是看一些博客文章的解析，官方文檔說明，然後挨個去看各個屬性的作用和示例，然後再自己手敲實踐幾次。這也是我當初學習flex布局的方法，常規手段，也很有效。如果愣是要說一些不足的地方，應該就是不直觀，效率不太高。
那有沒有一種更直觀、更高效的學習方式呢？
為了能解決這個問題，flex布局可視化工具就誕生了。
這個工具適合什麼人？畢竟flex布局很簡單，加起來屬性也沒幾個，學習成本也不高，如果你在日常工作中，存在下面一種或者幾種情況，那就可以繼續往下看，否則就可以跳出了。
對有些屬性的作用有些模糊，畢竟是web開發，寫了就能即時看效果，多試幾次總能對可視化工具展示父元素屬性設置在這裡控制父元素的屬性值，操作後即時渲染到下面的結果預覽區。
結果預覽在這裡可以添加子元素，也可以單獨對其中的一個子元素設置不同的屬性值。
上面實現的是一個水平垂直居中效果
圖解FlexBox以下截圖均來自可視化工具，看不下去可以直接跳到到文章末尾，直接在線體驗。
flex-direction:rowflex-direction:row-reverseflex-direction:row, justify-content:space-aroundflex-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:centerflex-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端訪問哦。
目前只是具備的基本功能，還有一些需要優化要做，後面持續更新，歡迎體驗。
今天分享到就這裡，希望對你有用。