拒绝烂大街——Flexbox布局演示站了解一下

Posted jlfw

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了拒绝烂大街——Flexbox布局演示站了解一下相关的知识,希望对你有一定的参考价值。

前言

最近学到Flexbox布局,当时就感觉真是一个布局的神器。终于摆脱了利用各种定位浮动布局的日子。想写文章总结一下吧,发现介绍Flexbox布局类的文章都被写烂了,各种大神写的也是生动形象,单单写一个布局用法感觉除了自己记录方便本地查并没有什么意义,于是就想到了之前在一个视频中看到了这样的网站,但是那个网址我当时打不开就产生了自己也写一个的想法。既能自己巩固还能给初学者使用。

Flexbox演示站

大概就是张这个样子:
技术图片

  1. 点击设置Flex容器和Flex项目的各个属性的值以及项目的宽度,右边实时看到效果初学时更容易理解各个属性的作用。
  2. 友好的提示:初学者不易记全所有的属性和值的左右,鼠标放在属性名上即可显示相应属性的作用。

查看Flexbox演示站

只是简单了写了几个响应式CSS,移动端看的效果可能不是太好,建议PC端食用

GitHub地址

最后

放上几个我学Flexbox布局时看的博客:
阮一峰——Flex 布局教程:语法篇
阮一峰——Flex 布局教程:实例篇
通过动图形象地为你介绍 flexbox 是如何工作的(一)

最后的最后,厚颜无耻求Star(逃)
如果恰好你正在学Flexbox,这个小网站对你有那么一点儿帮助给我点一个Star吧

以上是关于拒绝烂大街——Flexbox布局演示站了解一下的主要内容,如果未能解决你的问题,请参考以下文章

浅谈Flex布局

无法使此 flexbox 布局响应足够快

Android面试题集:以前烂大街的四大组件-Activity,面试重提这些知识点你还记得吗?

Android面试题集:以前烂大街的四大组件-Activity,面试重提这些知识点你还记得吗?

聊聊Flexbox布局中的flex的演算法

使用 flexbox 如何防止特定元素继承 flex 布局?