flex-direction：决定主轴的排列方向
flex-wrap:项目都排列在一条轴线上，若排不下，如何换行
flex-flow=flex-direction+flex-wrap

align-items:定义项目在交叉轴上如何对齐
align-content：定义多跟轴线的对齐方式（属性值均与交叉轴有关）

justify-content：定义了项目在主轴上的对齐方式

另外，我在学习flex过程中不理解的一个概念就是多轴指的是什么，通过一篇博客了解到了这个概念，分享出来

https://www.cnblogs.com/strangerqt/p/5094968.html#undefined

没有排版，但应该不影响阅读，抱歉！

flex布局知识总结的更多相关文章

  1. flex布局浅谈和实例

    阿基米德曾说给我一个支点我可以撬动地球,而拥有flex基本可以撬动所有的布局. 1.flex布局基本介绍及效果展示 工欲善其事必先利其器,来来来,一起看下基础知识先(呵~,老掉牙,但是有用啊). ** ...

  2. CSS3弹性伸缩布局（二）——flex布局

    上一篇博客<CSS3弹性伸缩布局(一)——box布局>介绍了旧版本的box布局,而这篇博客将主要介绍最新版本的flex布局的基础知识. 新版本简介 新版本的Flexbox模型是2012年9 ...

  3. CSS 学习笔记 - Flex 布局

    传统布局方式的局限性 传统的网页布局方式,采用 display + position + float 的方式来实现.这种方式,无法实现一些复杂的布局,并且在实现某些布局时,会有一些局限性. 比如,最常 ...

  4. “妄”眼欲穿-CSS之flex布局和边框阴影

    妄:狂妄: 不会的东西只有怀着一颗狂妄的心,假装能把它看穿吧. 作为一个什么都不会的小白,为了学习(zb),特别在拿来主义之后写一些对于某些css布局的总结,进一步加深对知识的记忆.知识是人类的共同财 ...

  5. flex布局嵌套之高度自适应

    查遍各大资源无任何flex嵌套布局的例子,经过自己折腾完成了项目中的高度自适应需求(更多应用于前端组件) 效果图: html代码:(关键地方已经用颜色特别标识 ^_^) <!DOCTYPE ht ...

  6. CSS实例详解：Flex布局

    本文由云+社区发表 本文将通过三个简单的实例,实际应用上篇文章的基础理论知识,展示下Flex布局是如何解决CSS布局问题. 一．垂直居中 这里同时用非flex布局和flex布局两种方式来实现,可以对比 ...

  7. 30分钟彻底弄懂flex布局

    欢迎大家前往腾讯云+社区,获取更多腾讯海量技术实践干货哦~ 本文由elson发表于云+社区专栏 目前在不考虑IE以及低端安卓机(4.3-)的兼容下,已经可以放心使用flex进行布局了.什么是flex布 ...

  8. flex布局浅谈

    flex布局浅谈和实例 阿基米德曾说给我一个支点我可以撬动地球,而拥有flex基本可以撬动所有的布局. 1.flex布局基本介绍及效果展示 工欲善其事必先利其器,来来来,一起看下基础知识先(呵~,老掉 ...

  9. 【Taro】363- 玩转 Taro 跨端之 flex 布局篇

    Taro 是一套遵循 React 语法规范的跨平台开发解决方案,但是目前当我们使用 Taro 的时候,在不同平台上的开发体验还有不一致的地方,所以我们也都期待有一套跨平台统一的解决方案,能够以最小差异 ...

随机推荐

  1. 使用熔断器仪表盘监控(hystrix)

    概述 在 Ribbon 和 Feign 项目增加 Hystrix 仪表盘功能,两个项目的改造方式相同. 在 pom.xml 中增加依赖 <dependency> <groupId&g ...

  2. python集合的内建函数

    s.issubset(t) 如果s 是t 的子集,则返回True,否则返回False s.issuperset(t) 如果t 是s 的超集,则返回True,否则返回False s.union(t) 返 ...

  3. 解决Linux和Windos不同步的问题

    两种方式: 一:在windos上进行操作      (1).cmd中输入如下命令      Reg add HKLM\SYSTEM\CurrentControlSet\Control\TimeZone ...

  4. 网站压力测试工具 Webbench简单介绍

    Webbech能测试处在相同硬件上,不同服务的性能以及不同硬件上同一个服务的运行状况.Webbench的标准测试可以向我们展示服务器的两项内容:每秒钟相应请求数和每秒钟传输数据量.Webbench不但 ...

  5. Python Re 模块超全解读！

    re模块下的函数 compile(pattern):创建模式对象 import repat=re.compile('A')m=pat.search('CBA')                     ...

  6. 解决kali linux 2016.2实体机安装后root用户没有声音

    Kali Linux系统默认状态下,root用户是无法使用声卡的,也就没有声音.启用的方法如下:(1)在终端执行命令:systemctl --user enable pulseaudio (2)在/e ...

  7. Redi缓存注意事项

    缓存使用的场景 在一个高频访问的应用系统中,每次用户的请求需要去存储中获取数据,会对数据库造成很大的压力.容易导致数据库的奔溃.所以才会出现缓存来分担一部分的数据库的压力. 具体会产生数据库访问压力的 ...

  8. 【Webkit Blog翻译】深入研究WebRTC | 内有福利

    本文译自 A Closer Look Into WebRTC” 我们在最近的一篇 WebKit博客中宣布了对High Sierra平台和iOS中Safari的WebRTC支持.现在,我们希望能够带领大 ...

  9. Storm 学习之路（一）—— Storm和流处理简介

    一.Storm 1.1 简介 Storm 是一个开源的分布式实时计算框架,可以以简单.可靠的方式进行大数据流的处理.通常用于实时分析,在线机器学习.持续计算.分布式RPC.ETL等场景.Storm具有 ...

  10. 【数据结构】红黑树-Java实现

    WIKI:https://en.wikipedia.org/wiki/Red%E2%80%93black_tree 转:红黑树(五)之 Java的实现 总结的比较精炼的: http://www.cnb ...