方法论

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. 4.prometheus监控--监控linux服务器

    一.监控linux服务器 1.1 二进制安装 # 客户端操作wget https://github.com/prometheus/node_exporter/releases/download/v1. ...

  2. portainer和cadvisor图形化界面管理与监控

    一.cadvisor docker pull google/cadvisor docker run -it -p 8890:8080 -v /var/run:/var/run -v /db/docke ...

  3. 程序员天天 CURD，怎么才能成长，职业发展的思考 ？

    前言 关于程序员成长的话题,我前面写过一篇文章 - 程序员天天CURD,职业生涯怎么发展的思考. 现在回头看,对程序员这个职业发展的认识以及怎么发展还是有一些局限性.有一句话是这么说的:人的成长就是不 ...

  4. 01、Java 安全-反序列化基础

    Java 反序列化基础 1.ObjectOutputStream 与 ObjectInputStream类 1.1.ObjectOutputStream类 java.io.ObjectOutputSt ...

  5. 使用 Docker 部署 TaleBook 私人书籍管理系统

    1)项目介绍 GitHub:https://github.com/talebook/talebook Talebook 是一个简洁但强大的私人书籍管理系统.它基于 Calibre 项目构建,具备书籍管 ...

  6. java复制指定文件

    package com.cn.file; import org.junit.Test; import java.io.FileInputStream; import java.io.FileNotFo ...

  7. P3622 [APIO2007] 动物园 -题解

    好写 爱写 没事干 所以有了这篇题解 洛谷P3622 [APIO2007] 动物园 题解 $Link$ hzoi题库 洛谷 题目说的挺繁琐,其实就传达了一个很简单的信息: \(n\)个动物,\(c\) ...

  8. TCP协议分析工具TcpEngine V1.2.0使用教程

    概述 目前主流的网络数据分析工具主要有两类,一类是http协议分析工具,如fiddler,这类工具擅长对字符串类型协议分析:另一类是原始网络数据包的监听分析,如Wireshark,这类工具擅长分析网络 ...

  9. DashVector x 通义千问大模型：打造基于专属知识的问答服务

    本教程演示如何使用向量检索服务(DashVector),结合LLM大模型等能力,来打造基于垂直领域专属知识等问答服务.其中LLM大模型能力,以及文本向量生成等能力,这里基于灵积模型服务上的通义千问 A ...

  10. 微信小程序报错“Component “页面路径“ does not have a method “ 方法名“ to handle event tap的

    我遇到这个问题的原因是,data属性把methods包括在里面了,把methods当成了一个字段,所以就相当于没写methods属性,里面的方法就识别不了了.解决办法就是把data的后括号打在meth ...