容器（父元素）的属性：

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. 分布式任务队列 Celery

    目录 目录 前言 简介 Celery 的应用场景 架构组成 Celery 应用基础 前言 分布式任务队列 Celery,Python 开发者必备技能,结合之前的 RabbitMQ 系列,深入梳理一下 ...

  2. Linux常用命令梳理——文件管理（一）

    由于本人目前仍是萌新一枚,所以<Linux常用命令梳理>系列仅依照个人目前掌握的知识,对一部分命令进行梳理,目的是为了对之前学到的知识进行巩固.当然了,如果机缘巧合被大家看到了,也欢迎各位 ...

  3. Java多线程学习——wait方法（信号灯法/生产者消费者模式）

    信号灯法:以一个标志位来判断是否执行还是等待 public class TV { private String voice; //内容 private boolean flag=false; //信号 ...

  4. [转帖]使用ping钥匙临时开启SSH:22端口，实现远程安全SSH登录管理就这么简单

    使用ping钥匙临时开启SSH:22端口,实现远程安全SSH登录管理就这么简单 https://www.cnblogs.com/martinzhang/p/5348769.html good good ...

  5. C++中的class和struct区别

    1,经过不停的改进,结构体 struct 变得原来越不像它在 C 语言中的样子了: 1,struct 在 C 语言中仅为了定义一个变量的集合,仅此而已,不能定义函数: 2,struct 在 C++ 中 ...

  6. getopt_long函数解析命令行参数

    转载:http://blog.csdn.net/hcx25909/article/details/7388750 每一天你都在使用大量的命令行程序,是不是感觉那些命令行参数用起来比较方便,他们都是使用 ...

  7. Maven快速安装配置

    环境:windows7_x86  maven3.3.3   maven是管理项目的常用工具,不用安装,直接配置即可.在配置maven前,需要先安装JDK.   1,安装JDK(注意此版本的Maven要 ...

  8. spring data jpa Specification 复杂查询+分页查询

    当Repository接口继承了JpaSpecificationExecutor后,我们就可以使用如下接口进行分页查询: /** * Returns a {@link Page} of entitie ...

  9. java中的四种引用方式（强引用，软引用，弱引用，虚引用）

    java内存管理主要有内存分配和内存回收,都不需要程序员负责,垃圾回收的机制主要是看对象是否有引用指向该对象. java中对象的引用主要有四种:强引用,软引用,弱引用,虚引用. Java中提供这四种引 ...

  10. C# 同比缩放图片

    /** * 无损缩放图片 * bitmap 需要缩放的图片 * w 需要缩放的宽度 * h 需要缩放的高度 * */ public static System.Drawing.Bitmap TBSca ...