1.指定容器为flex布局

display:flex

行内元素也可以使用Flex布局。

display: inline-flex;

注意,设为Flex布局以后,子元素的float、clear和vertical-align属性将失效。

容器默认存在两根轴:

水平主轴
垂直的交叉轴

2.以下6个属性设置在容器上。

flex-direction
flex-wrap flex-flow:flex-flow属性是flex-direction属性和flex-wrap属性的简写形式,默认值为row nowrap。 justify-content:定义了项目在主轴上的对齐方式。 align-items:属性定义项目在交叉轴上如何对齐。align-items: flex-start | flex-end | center | baseline | stretch; align-content:align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线,该属性不起作用。

3.以下6个属性设置在项目上。

order:定义项目的排列顺序。数值越小,排列越靠前,默认为0。

flex-grow:定义项目的放大比例,默认为0,即如果存在剩余空间,也不放大.如果所有项目的flex-grow属性都为1,则它们将等分剩余空间(如果有的话)。如果一个项目的flex-grow属性为2,其他项目都为1,则前者占据的剩余空间将比其他项多一倍。

flex-shrink:定义了项目的缩小比例,默认为1,即如果空间不足,该项目将缩小。如果所有项目的flex-shrink属性都为1,当空间不足时,都将等比例缩小。如果一个项目的flex-shrink属性为0,其他项目都为1,则空间不足时,前者不缩小。

flex-basis:定义了在分配多余空间之前,项目占据的主轴空间(main size)。浏览器根据这个属性,计算主轴是否有多余空间。它的默认值为auto,即项目的本来大小。它可以设为跟width或height属性一样的值(比如350px),则项目将占据固定空间。

flex:flex属性是flex-grow, flex-shrink 和 flex-basis的简写,默认值为0 1 auto。后两个属性可选。该属性有两个快捷值:auto (1 1 auto) 和 none (0 0 auto)。
建议优先使用这个属性,而不是单独写三个分离的属性,因为浏览器会推算相关值。 align-self:属性align-self允许单个项目有与其他项目不一样的对齐方式,可覆盖align-items属性。

4.应用

(1)通过给容器设置以下属性,从而使得子元素居中,这是针对整体子元素的

     水平居中:justify-content: center;
垂直居中:align-items: center;(单根轴线)
: align-content:center;(多根轴线)

(2)通过给子元素设置下面属性,可以把单个子元素在垂直轴居中

    垂直居中:align-self:center;

(3)根据实际空间,对子元素进行等比放大和缩小

    flex:auto;

下面是一些demo演示地址:

demo

下面是一些参考资料:

http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html

https://segmentfault.com/q/1010000004080910/a-1020000004121373

http://www.ruanyifeng.com/blog/2015/07/flex-examples.html

https://scotch.io/

https://css-tricks.com/

flex使用学习的更多相关文章

  1. flex 布局学习

    flex 布局学习 寻根溯源话布局 一切都始于这样一个问题:怎样通过 CSS 简单而优雅的实现水平.垂直同时居中.记得刚开始学习 CSS 的时候,看到 float 属性不由得感觉眼前一亮,顺理成章的联 ...

  2. 发几个Flex的学习资源

    书籍: 目前在看两本 <Essential.ActionScript.3.0> <Flex 4 In Action> 还有两本当手册翻阅,非常喜欢Cookbook这种题材的书, ...

  3. Flex的学习资源

    学习网站 http://www.adobe.com/cn/devnet/flex.html Adobe Flex开发人员中心 http://www.adobe.com/cn/devnet/flex/v ...

  4. Flex Grid学习-链接

    这些是我个人在学习这两种布局的时候参考的资料,希望对大家有用-- 1.Flex 阮一峰(flex语法讲解):http://blog.csdn.net/naruto_luoluo/article/det ...

  5. CSS flex 布局学习笔记

    写在前面 Flex 是 Flexible Box 的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性. 任何一个容器都可以指定为 Flex 布局. 采用 Flex 布局的元素 ...

  6. flex基础学习

    Flex是Adobe开发的一种RIA,富互联网应用,用Flex开发的东西都可以使用Flash做出来,但是Flex主要是面向的程序开发人员,前台使用ActionScript和MXML. 上面介绍了fle ...

  7. Flex布局学习笔记

    任何元素都可以使用Flex布局,包括行内元素 display: flex; display: inline-flex使用Flex布局之后,子元素的float, clear, vertical-alig ...

  8. flex布局学习

    教程来自阮一峰的flex布局教程实例篇 容器五大属性: flex-direction:容器内项目的排列方向 (1)row:横向从左往右排列(默认) (2)row-reverse:横向从右往左排列 (3 ...

  9. 【flex】学习笔记/总结

    CSS3 flex布局 查看兼容情况: caniuse.com 盒子模型: content-box:平时普通盒子模型,padding/border 会使盒子变大 向外扩展 border-box:盒子模 ...

  10. flex布局学习总结

    最近项目主要是小程序,小程序里面的布局主要采用flex布局,之前对flex 布局只是稍作了解,总结下flex 布局的常用套路 容器 Flex是Flexible Box的缩写,意为"弹性布局& ...

随机推荐

  1. 三角形-->九九乘法表

    使用嵌套循环打印九行*组成的三角形: * ** *** ...... *********(9个) public class Triangle { /** * 使用嵌套循环打印九行*组成的三角形 */ ...

  2. ARM体系结构和汇编指令

    第一节 可编程器件的编程原理 1. 可编程器件的特点 1 . CPU在固定频率的时钟控制下节奏运行 2 . CPU可以通过总线读取外部存储设备中的二进制指令集,然后解码执行 3 . 这些可以被CPU解 ...

  3. echarts隐藏之后的显示问题

    好久没有更新博客了,今天搞了快一天的网页自适应,头晕...因为最近开始做项目,项目中需要用到图表方面的知识,于是乎接触到了echarts,所以其实我也算是新手了.只是近几天弄了很久的关于图表隐藏之后再 ...

  4. Error no matching function for call to 'std::exception::exception(const char [15])'

    Error no matching function for call to 'std::exception::exception(const char [15])' Error 'logic_err ...

  5. 关于Redo Log的基本操作

    1.创建新的日志组 alter database add logfile group 4 ('/u01/oracle/product/10.0.2/oradata/ORCL/redo41.log') ...

  6. LGWR和DBWn的触发条件

    Rolling Forward(前滚) Oracle启动实例并加载数据库,然后通过Online Redologs中的重做日志,重现实例崩溃前对数据库的修改操作.在恢复过程中对于已经提交的事务,但尚未写 ...

  7. 3.CSS使用基础(2)

    目录 一.CSS 链接 二.CSS 列表样式(ul) 三.CSS Table(表格) 四.盒子模型 五.CSS Border(边框) 六.CSS 轮廓(outline)属性 七.CSS Margin( ...

  8. B-树特征

    在m阶B-树的定义中,要求: 1.树中每个节点至多有m棵子树. 2.若根节点不是叶子节点,则至少有两棵子树. 3.除根之外的所有非终端节点至少有棵子树.

  9. MySQL字符存储:charset-unicode-sets

    https://dev.mysql.com/doc/refman/8.0/en/charset-unicode-sets.html 10.10.1 Unicode Character Sets MyS ...

  10. python基础_特殊符号

    #\n 回车符 #\r 换行符 #\s 空格 #\t tab符号,不知道?开个txt文本,然后按电脑的tab键,就是caps lock上面那个,卧槽,看到一个大长空格(也可能是个超短空格),这个就是t ...