乐趣区

关于前端:2021还不会flex试试这个方法分分钟精通flex布局

当初大前端中被应用最多的布局形式非 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-contentalign-items的关系,很多人误认为 align-items 是设置垂直方向的布局,这么了解其实是不对的。

这里要搞清楚一个概念,主轴和穿插轴。

  • justify-content 用来设置主轴方向的布局形式
  • align-items 用来设置穿插轴方向的布局形式

主轴能够通过 flex-direction 来进行设置,取值为 rowcolumn

当为 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 端拜访哦。

目前只是具备的基本功能,还有一些须要优化要做,前面继续更新,欢送体验。

明天分享到就这里,心愿对你有用。

即时获取更多精彩文章,请关注公众号『前端技术江湖』

退出移动版