方法论

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. [FAQ] 如何避免过度依赖百度, 甚至超越百度

    查找信息,你不依赖百度,势必要依赖其它. 那么如何超越百度搜索,也必须要站在巨人的肩膀上. 搜索市场已有不少巨头,最简单的超越办法是:站在所有巨人的肩膀上. Other:搜索的超越 Link:http ...

  2. 【GUI软件】小红书指定博主批量采集笔记，支持多博主同时采集！

    目录 一.背景介绍 1.1 爬取目标 1.2 演示视频 1.3 软件说明 二.代码讲解 2.1 爬虫采集模块 2.2 软件界面模块 2.3 日志模块 三.获取源码及软件 一.背景介绍 1.1 爬取目标 ...

  3. python Requests 库的使用

    目录 1. 介绍 2. 安装 3. 基本请求 3.1 get请求 3.2 post请求 3.3 自定义请求头部 3.4 设置超时时间 3.5 代理访问 3.6 session自动保存cookies 3 ...

  4. python教程5：函数编程

    函数编程 特性: 1.减少重复代码 2.让程序变的可扩展 3.使程序变得易维护 定义:  默认参数 要求:默认参数放在其他参数右侧 指定参数(调用的时候) 正常情况下,给函数传参数要按顺序,如果不想按 ...

  5. 智慧城市three.js数字孪生三维展示城市建筑轮廓数据获取方法分析和AI算法方案剖析

    一.目前世面上有的2种免费方案是 1.OpenStreetMap开源网站下载, 2.blender的gis插件获取城市建筑轮廓. 缺点是:只有重点城市和省会城市,一些地级市或者县级市基本没有数据. 二 ...

  6. cesium教程4-用entity加载glb和gltf格式的小模型

    示例完整代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...

  7. 洛谷P3543 [POI2012] WYR-Leveling Ground

    题目描述 给定 \(n\) 个数和 \(a,b\) 每次可以选择一段区间 \(+a,-a,+b ,或 -b\),问最少操作几次能把它们都变成 \(0\).如果无解请输出 \(-1\). 样例输入 5 ...

  8. Django国际化与本地化指南

    title: Django国际化与本地化指南 date: 2024/5/12 16:51:04 updated: 2024/5/12 16:51:04 categories: 后端开发 tags: D ...

  9. 4G 信令中的 PCO 字段

    目录 文章目录 目录 Protocol Configuration Option Protocol Configuration Option PCO(Protocol Configuration Op ...

  10. java学习之旅（day.14）

    可变字符串 StringBuffer:可变长字符串,运行效率慢,线程安全 StringBuilder:可变长字符串,运行效率快,线程不安全 package com.zhang.lei; //Strin ...