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