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

2、flex-direction属性 决定主轴的方向(即项目的排列方向)
flex-direction: row | row-reverse | column | column-reverse;

3、flex-wrap属性,定义子元素是否换行显示
flex-wrap: nowrap | wrap | wrap-reverse;

4、 flex-flow
flex-flow属性是flex-direction属性和flex-wrap属性的简写形式,默认值为row nowrap;

5、 justify-content属性 定义了项目在主轴()上的对齐方式。
justify-content: flex-start | flex-end | center | space-between | space-around;

6、align-items属性定义项目在交叉轴上如何对齐。
align-items: flex-start | flex-end | center | baseline | stretch(默认值);

7、align-content属性定义了多根轴线的对齐方式。对于单行子元素,该属性不起作用。
align-content: flex-start | flex-end | center | space-between | space-around | stretch;

align-content在侧轴上执行样式的时候,会把默认的间距给合并。对于单行子元素,该属性不起作用

CSS3 中弹性盒模型--容器的属性的更多相关文章

  1. css3中 弹性盒模型布局之box-flex

    box-flex:也就是让子容器针对父容器的宽高属性依照一定的规则来划分 Eg: html代码: <div class="wrap"> <div class=&q ...

  2. CSS-3 新弹性盒模型属性

    flex 语法:flex:none | [ flex-grow ] || [ flex-shrink ] || [ flex-basis ] 取值: none:none关键字的计算值为: 0 0 au ...

  3. css3之弹性盒模型初探(一)

    什么是弹性盒模型? 弹性盒模型是指在父级改变大小的时候内部的自己元素也会相应的改变大小,即子集会按照父级的大小按比例自适应大小. 弹性盒模型的提出可以解决一些响应式布局的需求   如何使用弹性盒模型? ...

  4. css3之弹性盒模型(Flex Box)

    CSS3 弹性盒子(Flex Box) 弹性盒子是 CSS3 的一种新的布局模式. CSS3 弹性盒( Flexible Box 或 flexbox),是一种当页面需要适应不同的屏幕大小以及设备类型时 ...

  5. flex-shrink (适用于弹性盒模型容器子元素)

    设置或检索弹性盒的收缩比率(根据弹性盒子元素所设置的收缩因子作为比率来收缩空间.) 语法 flex-shrink: <number> (default 1) flex-shrink的默认值 ...

  6. (转)详解css3弹性盒模型(Flexbox)

    今天刚学了css3的弹性盒模型,这是一个可以让你告别浮动.完美实现垂直水平居中的新特性. Flexbox是布局模块,而不是一个简单的属性,它包含父元素和子元素的属性. Flexbox布局的主体思想是似 ...

  7. CSS3弹性盒模型flexbox完整版教程

    http://caibaojian.com/flexbox-guide.html 来自CSS Tricks上的一个教程,原文为:A Complete Guide to Flexbox.文中详细的介绍了 ...

  8. css3弹性盒模型(Flexbox)

    Flexbox是布局模块,而不是一个简单的属性,它包含父元素和子元素的属性. Flexbox布局的主体思想是似的元素可以改变大小以适应可用空间,当可用空间变大,Flex元素将伸展大小以填充可用空间,当 ...

  9. 详解css3弹性盒模型(Flexbox)

    目前没有浏览器支持 box-flex 属性. Firefox 支持替代的 -moz-box-flex 属性. Safari.Opera 以及 Chrome 支持替代的 -webkit-box-flex ...

随机推荐

  1. CDR软件-CorelDRAW软件下载,618活动

    618我有诚意,你呢? 不花钱的618,是残缺的618 给自己一个放肆shopping的机遇 活动力度不够大? 继续升级,终极体验 618疯狂倒计时! 同志们,如果你错过了之前的抢先购和升级活动 那么 ...

  2. 用 ilasm 反编译、修改.net dll文件

    有些.net dll我们没有源码,如果要修改某些东西,可以用ilasm.exe反编译为il代码,修改后再编译回dll ilasm通常放在以下路径 C:\Windows\Microsoft.NET\Fr ...

  3. CAD插入非等比例的图块

    主要用到函数说明: _DMxDrawX::InsertBlock 向控件数据库中插入一个图块,不用它插入匿名块.详细说明如下: 参数 说明 BSTR pszDwgFileName 图块定义的dwg 文 ...

  4. uva 202(Repeating Decimals UVA - 202)

    题目大意 计算循环小数的位数,并且按照格式输出 怎么做 一句话攻略算法核心在于a=a%b*10,用第一个数组记录被除数然后用第二个数组来记录a/b的位数.然后用第三个数组记录每一个被除数出现的位置好去 ...

  5. Linux 实用指令(4)

    目录 实用指令 1.指定运行级别 2.切换到指定运行级别的指令 3.帮助指令 3.1man获得帮助信息 3.2help指令 4.文件目录类 4.1pwd指令 4.2 ls指令 4.3 cd指令 4.4 ...

  6. RSAROLL

    题目:http://www.shiyanbar.com/ctf/1918 # -*- coding: utf-8 -*- import gmpy2 ciper = [704796792, 752211 ...

  7. Intellij Idea 13:导入openfire源代码

    网络上已经有篇关于openfire导入到Intellij Idea的文章(http://www.th7.cn/Program/java/201404/187018.shtml),不过在我导入的过程中, ...

  8. [PWA] Check Online Status by using the NavigatorOnLine API

    Even if you have your application fully cached, you couldn’t perform any external request without in ...

  9. cacti安装和第三方模块的导入

    Cacti是一套基于PHP,MySQL,SNMP及RRDTool开发的网络流量监測图形分析工具.Cacti是通过 snmpget来获取数据,使用 RRDtool绘绘图形,并且你全然能够不须要了解RRD ...

  10. AFNetworking 3.0携带參数上传文件Demo

    一.服务端代码: 服务端是java用国产nutz搞的,实际mvc框架都大同小异.就是提交文件的同一时候还带了个表单參数 @AdaptBy(type=UploadAdaptor.class, args= ...