方法论

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. 阿里云发布企业云原生IT成本治理方案：五大能力加速企业 FinOps 进程

    ​简介:阿里云企业云原生 IT 成本治理方案助力企业落地企业 IT 成本治理的理念.工具与流程,让企业在云原生化的过程中可以数字化地实现企业 IT 成本管理与优化,成为 FinOps 领域的践行者与领 ...

  2. 阿里大数据云原生化实践，EMR Spark on ACK 产品介绍

    开源大数据社区 & 阿里云 EMR 系列直播 第六期   主题:EMR spark on ACK 产品演示及最佳实践   讲师:石磊,阿里云 EMR 团队技术专家 内容框架: 云原生化挑战及阿 ...

  3. Flink 和 Iceberg 如何解决数据入湖面临的挑战

    简介: 4.17 上海站 Meetup 胡争老师分享内容:数据入湖的挑战有哪些,以及如何用 Flink + Iceberg 解决此类问题. 一.数据入湖的核心挑战 数据实时入湖可以分成三个部分,分别是 ...

  4. [GPT] export, export default, import, module.exports, require

    ES6 规范:export 和 import 配对 import 的 {} 大括号里面指定要从其他模块导入的变量名, 如果 export 命令没有写 default,那么 import {} 大括号里 ...

  5. Qt Quick 工程创建

    一.简介 Qt Quick是Qt框架中的一个模块,用于创建现代.响应式的用户界面.它基于QML(Qt Meta-Object Language)语言和Qt Quick Controls库,提供了一种声 ...

  6. Maven的核心解压与配置

    ​ Maven的核心解压与配置 @ 目录 Maven的核心解压与配置 1. Maven 官网地址 2. 解压Maven核心程序 3. 指定本地仓库 4. 配置阿里云提供的镜像仓库 5. 配置 Mave ...

  7. 从SAP CRM上传设备到SAP ERP

    文档<Step by step to download equipment from ERP with hierarchy>描述了从ERP复制设备到CRM的步骤.默认情况下,ERP中的设备 ...

  8. WEB服务与NGINX（25）- LNMP架构-WEB集群部署phpmyadmin

    目录 1 LNMP架构-WEB集群部署phpmyadmin 1.1 WEB集群架构需求分析 1.2 WEB集群架构环境 1.3 部署mariadb 1.4 部署web服务器nginx 1.5 部署re ...

  9. 详解GROUP BY 如何与 SELECT 语句进行交互？

    SELECT 列表: 矢量聚合.如果 SELECT 列表中包含聚合函数,则 GROUP BY 将计算每组的汇总值.这些函数称为矢量聚合. Distinct 聚合.ROLLUP.CUBE 和 GROUP ...

  10. HTTP 报文详解

    报文的语法 所有的 HTTP 报文都可以分为两类:请求报文和响应报文.请求报文会向 Web 服务器请求一个动作,响应报文会将请求的结果返回给客户端.请求和响应报文的基本报文结构相同 请求报文的格式: ...