3分鐘精通flex布局 - flex布局可視化學(xué)習(xí)工具
寫在前面
現(xiàn)在大前端中被使用最多的布局方式非flex莫屬，像h5、pc、小程序、rn、甚至native都在使用flex布局，可見掌握好flex布局是多的重要。
然而在flex布局興起時，我們學(xué)習(xí)flex布局的方法大部分就是看一些博客文章的解析，官方文檔說明，然后挨個去看各個屬性的作用和示例，然后再自己手敲實踐幾次。這也是我當(dāng)初學(xué)習(xí)flex布局的方法，常規(guī)手段，也很有效。如果愣是要說一些不足的地方，應(yīng)該就是不直觀，效率不太高。
那有沒有一種更直觀、更高效的學(xué)習(xí)方式呢？
為了能解決這個問題，flex布局可視化工具就誕生了。
這個工具適合什么人？
畢竟flex布局很簡單，加起來屬性也沒幾個，學(xué)習(xí)成本也不高，如果你在日常工作中，存在下面一種或者幾種情況，那就可以繼續(xù)往下看，否則就可以跳出了。
對有些屬性的作用有些模糊，畢竟是web開發(fā)，寫了就能即時看效果，多試幾次總能對 有時候還需要百度 搞不清主軸變化后的變化，容易搞混 其他
可視化工具展示
父元素屬性設(shè)置
在這里控制父元素的屬性值，操作后即時渲染到下面的結(jié)果預(yù)覽區(qū)。
結(jié)果預(yù)覽
在這里可以添加子元素，也可以單獨對其中的一個子元素設(shè)置不同的屬性值。
上面實現(xiàn)的是一個水平垂直居中效果
圖解FlexBox
以下截圖均來自可視化工具，看不下去可以直接跳到到文章末尾，直接在線體驗。
flex-direction:row
flex-direction:row-reverse
flex-direction:row, justify-content:space-around
flex-direction:column,justify-content:space-around
還有很多屬性就不一一截圖了，可以直接打開文末的網(wǎng)址體驗下。
特別說明下
其實很多人迷惑的是justify-content和align-items的關(guān)系，很多人誤認為align-items是設(shè)置垂直方向的布局，這么理解其實是有問題的。
這里要搞清楚一個概念，主軸和交叉軸。
justify-content用來設(shè)置主軸方向的布局或?qū)R方式align-items用來設(shè)置交叉軸方向的布局或?qū)R方式
主軸可以通過flex-direction來進行設(shè)置，取值為row和column。
當(dāng)為row時，justify-content 控制水平方向的布局，align-items 控制垂直方向的布局。
當(dāng)為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
本工具的實現(xiàn)方式
實現(xiàn)很簡單，使用react開發(fā)，只遵循一個原則即可 UI=fn(state)，所以只要定義好你的state就完成了一半兒。
細節(jié)就不說了，貼下主要用到的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'
????????????}
????????},
????]
}
彩蛋
面試中經(jīng)常被問 flex:0 1 auto，表示什么？所以特地在子元素上作了一個順序。
flex: flex-grow、flex-shrink 、flex-basis 縮寫
工具地址
http://bigerfe.com/yflex
獲得更好的體驗，需要在pc端訪問哦。
目前只是具備的基本功能，還有一些需要優(yōu)化要做，后面持續(xù)更新，歡迎體驗。
今天分享到就這里，希望對你有用。
可否點個『在看』支持下?