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. Python基础，day3

    本节内容 1. 函数基本语法及特性 2. 参数与局部变量 3. 返回值 嵌套函数 4.递归 5.匿名函数 6.函数式编程介绍 7.高阶函数 8.内置函数 1.函数基本语法及特性 如何不重复代码,其实很 ...

  2. iOS登录及token的业务逻辑(没怎么用过，看各种文章总结)

    http:是短连接. 服务器如何判断当前用户是否登录? // 1. 如果是即时通信类:长连接. // 如何保证服务器跟客户端保持长连接状态? // "心跳包" 用来检测用户是否在线 ...

  3. Verilog写一个对数计算模块Log2(x)

    网上一个能用的也没有,自己写一个把. 1.计算原理:  整数部分 网上找到了一个c语言的计算方法如下: int flog2(float x) { return ((unsigned&)x> ...

  4. 简单看看java之枚举

    枚举类这个类用的比较少,对这个不怎么熟悉,最近看源码刚好可以好好了解一下,那么,枚举Enum是什么呢?在jdk中,Enum是一个抽象类下图所示,这就说明这个类是不能进行实例化的,那么我们应该怎么使用呢 ...

  5. 【设计模式】行为型05责任链模式（Chain of responsibility Pattern）

    学习地址:http://www.runoob.com/design-pattern/chain-of-responsibility-pattern.html demo采用了DEBUG级别举例子,理解起 ...

  6. 跟我学SpringCloud | 第四篇：熔断器Hystrix

    跟我学SpringCloud | 第四篇:熔断器Hystrix 1. 熔断器 服务雪崩 在正常的微服务架构体系下,一个业务很少有只需要调用一个服务就可以返回数据的情况,这种比较常见的是出现在demo中 ...

  7. node中的session的使用

    Session不是一个天生就有的技术,它的使用需要依赖cookie. session依赖cookie,当一个浏览器禁用cookie的时候,登陆效果消失: 或者用户清除了cookie,登陆也消失,ses ...

  8. WordPress教程之初识WordPress

    你是否梦想过以极低的成本获得一个漂亮的网站,而无需聘请专业的开发和设计人员,也不必学习任何编程知识,并且网站功能可以无限扩展?对这些问题中的任何一个,如果你的答案是肯定的,那么 WordPress 将 ...

  9. Java面试题 equals()与"=="的区别？

    面试官:请问 equals() 和 "==" 有什么区别? 应聘者: equals()方法用来比较的是两个对象的内容是否相等,由于所有的类都是继承自java.lang.Object ...

  10. NetCore AutoMapper的封装

     需要引用AutoMapper的Nuget包  如果需要忽略某个字段就在字段上面打标签如下:  [IgnoreMap] public string IgnoreValue { get; set; } ...