容器属性：
1.flex-direction:项目的排列方向
(1)row 主轴方向排列
(2)row-reverse 主轴反方向排列
(3)column 纵向排列
(4)column-reverse 纵向反方向排列
2.flex-wrap:项目的换行方式
(1)nowrap:不换
(2)wrap:换行，第一行在上方
(3)wrap-reverse:换行，第一行在下方
3.flex-flow：是flex-direction和flex-wrap 的简写，默认 row nowrap
4.justify-content:项目在主轴上的对齐方式
(1)flex-start 左对齐
(2)flex-end 右对齐
(3)center 居中
(4)space-between 两端对齐，项目之间的间隔相等
(5)space-around 每个项目两侧的间距相等
5.align-items:项目在交叉轴上对齐方式
(1)flex-start 交叉轴的起点对齐
(2)flex-end 交叉轴的终点对齐
(3)center 交叉轴的中点对齐
(4)baseline 项目第一行文字的基线对齐
(5)stretch (默认值)如果项目未设置高度，或者为auto，将占满整个容器的高度。

项目属性：

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title></title>

     <style>

         .con{

             width: 500px;

             height: 300px;

             outline: 1px solid black;

             display: flex;

         }

         .con div{

             width: 50px;

             height: 50px;

             outline: 1px solid black;

         }

         .one{background: red;} .two{background: orange} .three{background: yellow} .four{background: green} .five{background: blueviolet}

              /*容器属性                                                                                               */

         .con{

             /*flex-direction: row;row-reverse;column;column-reverse*/

             /*flex-wrap:wrap-reverse;wrap;nowrap*/

             /*justify-content:space-between;flex-start;flex-end;center;spance-around*/

             /*align-items: flex-end;flex-start;center;baseline;stretch;*/

         }

         /*项目属性*/

         .one{

             /*order: 1;  数越小越往前排列*/

             /*flex-grow: 2;  默认为0，将剩余空间分给不为0的元素*/

             /*flex-shrink:2; 默认为1，当父级空间不足，都将按比例减小，如果一个元素为0，其余为1，则这个元素不减小*/

             /*align-self: flex-end;  可以覆盖父级的align-items属性，默认为auto，表示继承父级的align-items属性，如没有父元素则表现stretch*/

         }

     </style>

 </head>

 <body>

 <div class="con">

     <div class="one">1</div>

     <div class="two">2</div>

     <div class="three">3</div>

     <div class="four">4</div>

     <div class="five">5</div>

 </div>

 </body>

 </html>

1.order:项目的排列顺序。数值越小，排列越靠前，默认为0
2.flex-grow:属性定义项目的放大比例，默认为0，即：如果存在剩余空间，也不放大
3.flex-shrink 属性定义了项目缩小比例，默认为1，即如果空间不足，该项目将缩小。
4.flex 是flex-grow，flex-shrink flex-basis简写
5.align-self 属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性，默认值为auto，表示继承父类的align-items属性，如果没有父级，等同于stretch。

flex弹性盒模型布局的更多相关文章

  1. 87.CSS Flex 弹性盒模型布局教程（共用的css在48篇文章gird）

    CSS Flex 弹性盒模型布局教程 Flex 是 Flexible Box 的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性. flex布局就是给任何一个容器添加 dis ...

  2. 彻底搞懂flex弹性盒模型布局

    为什么要用flex 基于css3简单方便,更优雅的实现,浏览器兼容性好,传统的css实现一个div居中布局要写一堆代码,而现在几行代码就搞定了,没有理由不用flex. 兼容性: Base Browse ...

  3. CSS3弹性盒模型布局模块介绍

    来源:Robert’s talk原文:http://robertnyman.com/2010/12/02/css3-flexible-box-layout-module-aka-flex-box-in ...

  4. Flex 弹性盒模型

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. Web的Flex弹性盒模型

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. box flex 弹性盒模型（转载）

    css3引入了新的盒模型——弹性盒模型,该模型决定一个盒子在其他盒子中的分布方式以及如何处理可用的空间.这与XUL(火狐使用的用户交互语言)相似,其它语言也使用相同的盒模型,如XAML .GladeX ...

  7. columns分栏与flex弹性盒模型

    columns  分栏 值:column-width:设置每列的宽度        column-count:设置列数   例:columns{200px 3}   列数和宽度固定        co ...

  8. flex弹性盒模型

    flex 意思是弹性布局,用来给盒模型提供最大的灵活度,指定容器中的项目为弹性布局,类似于float:left; 比float的好处是容器没有设置高度,会根据项目来自适应高度,我们都知道,设置floa ...

  9. 彻底弄懂css3的flex弹性盒模型

    由于在日常工作中使用css或者bootstrap的栅格系统已经能很好的满足业务需求,所以一直以来对css3的弹性布局不是很感冒. 近日有幸在一篇文章中领略了flex的魅力--简洁优雅.随试之. /*容 ...

随机推荐

  1. Java内存管理及GC算法

    概述 内存划分 虚拟机规范中将内存分为六大部分,分别为PC寄存器.JAVA虚拟机栈.JAVA堆.方法区.运行时常量及本地方法栈. 1.PC寄存器:线程独占: 2.JAVA虚拟机栈:线程独有:JAVA虚 ...

  2. 解决上一篇jquery中on的疑惑

    内容都是来自:http://www.365mini.com/page/jquery-on.htm.这里做一下收藏.文章的最后  疑问和解答可以解决所有的疑惑  看了之后能更好的整篇文章. on()函数 ...

  3. HDU 1166 敌兵布阵 线段树单点更新求和

    题目链接 中文题,线段树入门题,单点更新求和,建一棵树就可以了. #include <iostream> #include <cstdio> #include <cmat ...

  4. STM32学习及应用笔记一：SysTick定时器学习及应用

    这几年一直使用STM32的MCU,对ARM内核的SysTick计时器也经常使用,但几乎没有仔细了解过.最近正好要在移植一个新的操作系统时接触到了这块,据比较深入的了解了一下. 1.SysTick究竟是 ...

  5. CISCO VLAN ACL

    对于cisco VLAN ACL 首先得定义 standard ACL或 extented ACL用于抓取流量 注意这里的抓取流量不是最终的对流量的操作,而是决定什么样的流量用VLAN ACL 来处理 ...

  6. Vim配置文件

    转载 原文网址:http://www.cnblogs.com/ma6174/archive/2011/12/10/2283393.html 花了很长时间整理的,感觉用起来很方便,共享一下. 我的vim ...

  7. ORACLE 迁移MYSQL 随笔

    1.把服务器上的ORALCE 数据库导成DMP,然后导入本机的临时库 2.先把ORACLE 表中的DATE 改为TIMESTAMP; a.先建立个表 create table type_table_i ...

  8. swift之inout

    在swift中,我们常常对数据进行一些处理.因为swift的计算属性,所以如果不是大量重复性处理,基本可以在set及didSet中改变原数据的一些状态.但需要用到同样的算法处理大量数据的时候,仍然需要 ...

  9. 使用AFNetWorking上传图片

    AFHTTPSessionManager *manager   = [AFHTTPSessionManager manager]; NSString *string                  ...

  10. embed chrome 无法播放问题

    火狐下<embed src='1.mp3' autostart='false' hidden='true' loop='false' ></embed>正常, chrome 不 ...