容器（父元素）的属性：

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. Delphi XE2 之 FireMonkey 入门(44) - 控件基础: TTreeView、TTreeViewItem

    Delphi XE2 之 FireMonkey 入门(44) - 控件基础: TTreeView.TTreeViewItem TScrollBox -> TCustomTreeView -> ...

  2. MYSQL5.6源码包编译安装

    linux下用cmake编译安装mysql-5.6.35cmake编译安装mysql的方法:#useradd -M mysql -s /sbin/nologin#yum install -y cmak ...

  3. python学习笔记：（二）基本数据类型

    python中的变量不需要声明,每个变量中使用前都必须赋值,变量赋值以后该变量才会被创建. 在python中变量就是变量,他没有类型,我们所说的类型是变量所指的内存中对象的类型. python3中有六 ...

  4. Delphi IDE使用的一些主要技巧

    Delphi IDE使用的一些主要技巧 1.查找和替换 (1)<ctrl>+F[1]:选择页“Find”,进行查找,则根据查找方向继续查找.选择页“Findin Files”,则进行该工程 ...

  5. 【MM系列】SAP 创建工厂

    公众号:SAP Technical 本文作者:matinal 原文出处:http://www.cnblogs.com/SAPmatinal/ 原文链接:[MM系列]SAP 创建工厂   前言部分 大家 ...

  6. Our growth depends not on how many experiences we devour, but on how manywe digest.

    rot. v/n. 腐烂 vibration.n. 震动 charcoal. n 木炭 wrinkle. v. 长皱纹 geometry. n. 几何学 walnut.n. 核桃 tailor. n. ...

  7. 【Linux开发】【Qt开发】交叉编译器 arm-linux-gnueabi 和 arm-linux-gnueabihf 的区别

    一. 什么是ABI和EABI1) ABI: 二进制应用程序接口(Application Binary Interface (ABI) for the ARM Architecture)在计算机中,应用 ...

  8. Java基础/Socket.io双向通信

    Socket.io基础知识(一) (一).socket.io提供了基于事件的实时双向通讯 Web端与服务端实时数据传输方式: 1.Ajax轮询方式(最早应用)   原理:设置定时器,定时通过Ajax同 ...

  9. Javascript实现的图片隐写术

    javascript图片隐写术,感觉可以用它来干点有想法的事情   1.什么是图片隐写术? 权威的wiki说法是“隐写术是一门关于信息隐藏的技巧与科学,所谓信息隐藏指的是不让除预期的接收者之外的任何人 ...

  10. 开篇——从程序员到IT经理

    2002年~2005年我在广州的广东水力电力职业技术学院求学,主修网络工程.求学期间,我从事最多的就是玩游戏,当时就是玩MU和CS,所以有一门编程课叫C语言的“肥佬”(广东话)了,要补考,没办法,于是 ...