带交互的 flex 布局教程,想不懂都难

370 阅读1分钟

flex 布局对于新手来说并不友好,学起来有点困难,而今天的文章通过可交互的方式告诉你每个属性的具体表现。

比如 flex-direction 这个属性,你可以点击下面的 row、row-reverse、column 和 column-reverse 来观察这 5 个元素的布局。

当点击 column 这个属性的时候,布局如下(元素从上到下布局):

再来看下 justify-content 这个属性,它表示元素在「主轴」的对齐方式,尤其是 space-between、space-around、space-evenly 这三个属性最容易搞混,你可以点击下面的按钮实时可以看到具体的表现形式:

flex 布局中设置多个属性的时候,会对布局结果产生很大的变化,比如改变 flex-direction,row 和 column 布局效果会发生天翻地覆的变化,而通过下面这个例子,你会很容易掌握各个布局属性的影响:

我把 flex-container 容器属性放到了一起,你只需要点击各个属性值即可看到布局的实时效果。体验一下:

想体验的小伙伴,访问下面任意一个连接均可,电脑端访问效果更佳:

前端小课(国内):lefex.gitee.io/

前端小课(国外):lefex.github.io/