方法论

flex布局有多个属性，时常会忘记。我们复习的话，单纯看一些博客文章，不能直观的理解，也比较枯燥。

因此如果有一种用写代码闯关的方式来复习(学习)flex布局，那也许会更有意思。

FLEXBOX FROGGY

复习的话可以在settings里面改变difficulty，关闭提示，并设置成随机出题。

我对flex属性的理解

flex布局中的justify-content和align-items这两个属性可以说是基本相同的，它们的属性值相同。唯一的不同点就是方向，justify是flex盒子堆叠方向，align是与之垂直的方向。

其中flex盒子堆叠的方向，可以通过flex-direction来改变。如果对其中某个盒子的排列顺序不满意，可以单独改变order属性，flex盒子的默认order值是0。

align-content改变flex盒子每一行之间的间距，flex盒子是否换行可以根据flex-wrap来选择。

flex-flow可以同时指定flex-direction, flex-wrap的属性值，因为这两个属性经常一块用。

一种复习flex布局的方法的更多相关文章

  1. flex布局使用方法简要汇总

    近期因为使用inline-block,在项目部署后出现了一点小问题,几番解决未果,遂使用flex布局,于是借此机会对flex布局的用法做一个简要的汇总. 遇到的bug如下: 本想两个div使用inli ...

  2. 通过游戏来学习CSS的Flex布局

    在复习Flex 布局的时候发现的了几个有趣的小游戏,在这里分享并记录几个有难度的答案 1. Flexbox Froggy 通过调整CSS样式来使各种青蛙回到对应的荷叶上,游戏默认难度为Beginner ...

  3. sticky footer 和 flex布局的原理

    Sticky footers设计是最古老和最常见的效果之一,大多数人都曾经经历过.它可以概括如下:如果页面内容不够长的时候,页脚块粘贴在视窗底部:如果内容足够长时,页脚块会被内容向下推送. 一.使用f ...

  4. 让CSS flex布局最后一行列表左对齐的N种方法

    原文链接https://mp.weixin.qq.com/s?__biz=MjM5MDA2MTI1MA==&mid=2649091838&idx=1&sn=fa4e1ed1e0 ...

  5. FLEX布局的一些问题和解决方法

    前言 露珠最近研究了一下flex的布局方式,发现项w3c推出的这套布局解决方案对于日益复杂的前端开发布局来说是确实是一利器,并且在不同的屏幕上实现了真正的响应式布局:不再单纯地依赖百分比和float的 ...

  6. CSS里总算是有了一种简单的垂直居中布局的方法了

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...

  7. es6 Object.assign ECMAScript 6 笔记（六） ECMAScript 6 笔记（一） react入门——慕课网笔记 jquery中动态新增的元素节点无法触发事件解决办法 响应式图像 弹窗细节 微信浏览器——返回操作 Float 的那些事 Flex布局 HTML5 data-* 自定义属性 参数传递的四种形式

    es6 Object.assign   目录 一.基本用法 二.用途 1. 为对象添加属性 2. 为对象添加方法 3. 克隆对象 4. 合并多个对象 5. 为属性指定默认值 三.浏览器支持 ES6 O ...

  8. flex 布局 初次接触这个好使又不是特别好用的布局方法

    刚开始学前端的童鞋们应该也是一样先学习的table然后再学习了盒子模型,感觉终于学会了简单的网页布局,使用各种display,float,position绞尽脑汁给页面布局成自己想要的页面样式,然而, ...

  9. Flex 布局相关用法

    前言: 布局的传统解决方案,基于盒状模型,依赖 display属性 + position属性 + float属性.它对于那些特殊布局非常不方便,比如,垂直居中 就不容易实现. 2009年,W3C提出了 ...

  10. 微信小程序开发:Flex布局

    微信小程序页面布局方式采用的是Flex布局.Flex布局,是W3c在2009年提出的一种新的方案,可以简便,完整,响应式的实现各种页面布局.Flex布局提供了元素在容器中的对齐,方向以及顺序,甚至他们 ...

随机推荐

  1. 从原理到操作，让你在 Apache APISIX 中代理 Dubbo3 服务更便捷

    简介: 本文为大家介绍了如何借助 Apache APISIX 实现 Dubbo Service 的代理,通过引入 dubbo-proxy 插件便可为 Dubbo 框架的后端系统构建更简单更高效的流量链 ...

  2. 开源相机管理库Aravis例程学习（四）——multiple-acquisition-signal

    目录 简介 例程代码 函数说明 g_main_loop_new g_main_loop_run g_main_loop_quit g_signal_connect arv_stream_set_emi ...

  3. Java面试题：你知道Spring的IOC吗？那么，它为什么这么重要呢？

    Spring的IOC(控制反转)是一种设计模式,它允许开发者将对象的创建和管理交给Spring框架来完成.在Spring中,IOC允许开发者将对象依赖关系从代码中分离出来,从而使代码更加灵活.可重用和 ...

  4. linux安装nvm和node

    linux安装nvm和node 一.环境 debian10 nodejs 二.安装 2.1 安装NVM 运行以下命令下载并运行 NVM 安装脚本: curl https://raw.githubuse ...

  5. shell 去掉逗号_shell替换和去掉换行符

    用shell处理文件的时候我们常常需要去掉或者加上换行符,name问题就来了怎么才能快速的替换呢? 我们有这样一个文件[root@hxy working]# cat 1 GD200A16C013493 ...

  6. Linux备忘手册

    资料来源:技术胖 jspang.com 下载linux学习路径:https://newimg.jspang.com/linux-image01.png Linux备忘手册: 百度网盘 链接:https ...

  7. docker-compose搭建的Mysql主从复制

    设置前注意下面几点: 1)要保证同步服务期间之间的网络联通.即能相互ping通,能使用对方授权信息连接到对方数据库(防火墙开放3306端口). 2)关闭selinux. 3)同步前,双方数据库中需要同 ...

  8. .NET 缓存：内存缓存 IMemoryCache、分布式缓存 IDistributedCache（Redis）

    .NET缓存里分了几类,主要学习内存缓存.分布式缓存 一.内存缓存 IMemoryCache 1.Program注入缓存 builder.Services.AddMemoryCache(); 2.相关 ...

  9. JS制作日历小事件和数码时钟--JavaScript实例集锦（初学）

    运用JS的innerHTML,和for循环实现日历小部件内容和日期的转换. <!DOCTYPE html> <html> <head> <title>日 ...

  10. URP(Universal Render Pipeline)渲染管线在使用中的一些分享

    本篇文章整理了URP管线使用中的一些简单的心得记述 1.使用ScriptableRendererFeature自定义渲染特性 在内建(Build-in)管线中可以使用CommandBuffer并添加到 ...