方法论

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. 基于信通院 Serverless 工具链模型的实践：Serverless Devs

    简介: Serverless Devs 作为开源开放的开发者工具,参编中国信通院<基于无服务器架构的工具链能力要求>标准,为行业统一规范发挥助推作用!​ 作者 | 江昱(阿里云 Serve ...

  2. 关于CDN的原理、术语和应用场景那些事

    关于CDN,想必你一定看过很多官方的解释.今天,CDN百科第七期,将用一篇3844字的文章,来带你了解CDN的诞生.术语.原理.特征以及应用场景,看完这篇文章,相信你将会对CDN这项互联网基础设施有更 ...

  3. 开源自建/托管与商业化自研 Trace，如何选择？

    ​简介: 随着微服务架构的兴起,服务端的调用依赖愈加复杂,为了快速定位异常组件与性能瓶颈,接入分布式链路追踪 Trace 已经成为 IT 运维领域的共识.但是,开源自建.开源托管或商业化自研 Trac ...

  4. [GPT] 哪些职业面临 AI 威胁？

      随着人工智能技术的不断发展和应用,一些重复性.机械化或标准化程度高的职业可能会面临被自动化取代的威胁.例如: 工厂生产线上的装配工人,因为许多工厂已经开始使用自动化机器人完成装配任务: 行政助理, ...

  5. [FAQ] FinalCutPro 添加转场提示“片段边缘之外没有足够的额外媒体可用来创建转场”

    可以把前镜头素材的结尾和后镜头素材的开始减去一部分即可添加转场了. 怎么剪?时间线中有个播放线,快捷键 i 表示选中开始点,快捷键 o 表示选中结束点,使用 delete 键删除选取的部分即可. &g ...

  6. 【AI新趋势期刊#2】AI发明计算机算法，如何给大模型排行，照片秒变二维码，视频一键动漫风

    前言 每天都要浏览大量AI相关新闻,是不是感到信息量爆炸,有效信息少? 这么多新产品和新工具,到底哪些是真正是有价值的,哪些只是浮躁的一时热点? 想参与AI产品和工具的开发,从哪里能够获得大量的灵感和 ...

  7. 一个支持Sora模型文本生成视频的Web客户端

    大家好,我是 Java陈序员. 最近 Open AI 又火了一把,其新推出的文本生成视频模型 -- Sora,引起了巨大的关注. Sora 目前仅仅只是发布预告视频,还未开放出具体的 API. 今天, ...

  8. 数仓OLAP技术

    数据应用,是真正体现数仓价值的部分,包括且又不局限于 数据可视化.BI.OLAP.即席查询,实时大屏,用户画像,推荐系统,数据分析,数据挖掘,人脸识别,风控反欺诈,ABtest等等 OLAP(On-L ...

  9. 【git】建立分支

    1.git clone现有的项目 git clone git@github.com:zhangshengdong/Zflask.git 2.建立关联 git remote add origin git ...

  10. 关于sql server导出csv格式文件的身份证号乱码问题处理办法

    1.使用SQL Server数据库经常会遇到导出大量数据的情况,例如导出40万条数据,虽然EXCL支持可以放入百万的数据,但是使用数据库复制,粘贴到EXCL表格时,数据库会提示溢出的情况,如下图所示: ...