容器（父元素）的属性：

flex-direction属性决定主轴的方向

flex-wrap 属性决定项目在一行排不下的情况下是否换行

flex-flow flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。

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

align-items 属性定义了每行项目在側轴方向上的对齐方式\

align-content属性 align-content属性定义了容器在側轴方向上有额外空间时怎样排布

子容器

order属性     order属性定义项目的排列顺序。数值越小排列越靠前，默觉得0，可能的值为随意整数。

flex-grow属性 flex-grow属性定义项目的放大比例，默觉得0，即假设存在剩余空间也不放大。

flex-shrink属性 flex-shrink属性定义了项目的缩小比例，默觉得1。即假设空间不足该项目将缩小。

flex-basis 属性定义了在分配多余空间之前，项目占领的主轴空间（main-size）。

flex属性   flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。

align-self属性 align-self属性同意单个项目有与其它项目不一样的側轴对齐方式，可覆盖align-items属性。

flex的12个属性的更多相关文章

  1. 关于flex，好像有12个属性非常重要

    关于Flex,有12个属性非常重要 这几天在学习Flex布局,发现Flex真的好厉害! Flex是Flexible Box的缩写,意为"弹性布局",用来为盒模型提供最大的灵活性. ...

  2. Flex的 Event中属性currentTarget与target的区别

    Flex的 Event中属性currentTarget与target的区别 1.区别 (1)currentTarget是事件的处理对象(event processor) (2)target是事件的调用 ...

  3. Flex的 Event中属性currentTarget与target的差别

    Flex的 Event中属性currentTarget与target的差别 1.差别 (1)currentTarget是事件的处理对象(event processor) (2)target是事件的调用 ...

  4. flex三个对齐属性的记忆方式

    今天在群里聊天有人说 flex的那几个居中属性好难记,时不时都要尝试一下,或者查看一下文档,现在我把我自己的记忆方式分享一下... 1. flex的居中主要是通过这三个属性来实现的: justify- ...

  5. Flex布局教程及属性速查

    一.Flex布局介绍 伸缩盒模型(flexbox)是一个新的盒子模型,意为"弹性布局",用来为盒状模型提供最大的灵活性,主要优化了UI布局.Flexbox的功能主要包手:简单使用一 ...

  6. CSS3动画属性和flex弹性布局各个属性

    [CSS3动画的使用] 1.声明一个关键帧(动画): @keynames name{ from{} to{} } 每个阶段的写法: ①可以直接使用from-to的写法 ②可以设置0%-100%的写法, ...

  7. 12.vue属性.监听.组件

    1.计算属性 https://cn.vuejs.org/v2/guide/computed.html new Vue({ computed:{//定义 show(){ } } }) ++计算属性1.h ...

  8. Flex布局-项目的属性

    Flex项目有以下6个属性: order flex-grow flex-shrink flex-basis flex align-self order属性定义项目的排列顺序.数值越小,排列越靠前,默认 ...

  9. Flex布局-容器的属性

    本文部分内容参考阮一峰大神博客,原文地址:http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html Flex布局即弹性布局,使用起来十分方便灵活 ...

随机推荐

  1. Java使用JDBC连接Impala

    前段时间,有一个项目在连接Impala的时候,可以测试连接成功,但是查询不出表.但是通过impala-shell的时候,是可以查询出来的,我觉的这种方式查询出来的话,可能和jdbc的方式不一样,因为i ...

  2. Failure to find com.oracle:ojdbc6:jar:11.2.0.1.0

    报错原因:oracle的ojdbc.jar是收费的,maven的中央仓库是没有的,需要下载到本地,然后打包进maven仓库 1.下载ojdbc6-11.2.0.1.0.jar包 http://cent ...

  3. Java ——补充：构造方法 super()与构造方法 无参 有参构造方法 this()与构造方法

    参考文章: https://blog.csdn.net/qq_33322074/article/details/86030836 https://blog.csdn.net/HD243608836/a ...

  4. GCC 环境变量 & eclipse CDT 头文件配置

     转:http://blog.csdn.net/statdm/article/details/7751000 GCC 环境变量 & eclipse CDT 头文件配置   在unix 下使用e ...

  5. 2019JAVA第一次編程总结

    2019第二周实验报告 Java实验报告 班级 计算机科学与技术二班 学号 20188442 姓名 吴怡君 完成时间 2019/9/7 评分等级 实验一 Java开发环境与简单Java程序 一. 实验 ...

  6. C/C++ 内存模型

    C分为四个区:堆,栈,静态全局变量区,常量区 C++内存分为5个区域(堆栈全常代 ): 堆 heap : 由new分配的内存块,其释放编译器不去管,由我们程序自己控制(一个new对应一个delete) ...

  7. Maven 项目中的groupId和artifactId

    maven进行项目管理,如果我们要将项目加入到maven到本地仓库中,则需要对项目进行唯一性标示,而groupId和artifactId就起到这样对作用. groupId为项目组织对唯一标识符,可以理 ...

  8. 只使用非递归的mutex

    mutex分为递归(以下简写为rm)和非递归(以下简写为nrm)两种,它们的唯一区别在于:同一个线程可以重复对rm加锁,但是不能重复对nrm加锁. 虽然rm使用起来要更加方便一些,并且不用考虑一个线程 ...

  9. 计算机系统结构总结_Memory Hierarchy and Memory Performance

    Textbook: <计算机组成与设计——硬件/软件接口>  HI <计算机体系结构——量化研究方法>       QR 这是youtube上一个非常好的memory syst ...

  10. gulp程序怎么跑起来 及 使用中遇到的常见错误

    gulp常见问题 问题一:Error: cannot find module 'gulp-concat' #16 解答:需要先npm install,然后执行gulp gulp安装及使用 一.安装no ...