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. string.format("%s",name)

    TCHAR name[40]; acedGetString(0, _T("输入名字"), name); acutPrintf(name); CString na; na.Forma ...

  2. webstorm_completion

    js 使用yarn 安装声明定义文件 @types/xxx koa ==> @types/koa koa-router ==> @types/koa-router 安装webstorm中的 ...

  3. Day 27 网络编程

    目录 网络架构及演变过程 网络架构 互联网和互联网的组成 互联网的组成(教材版) 互联网的组成(科普版) 互联网的硬件组成 互联网的软件组成 OSI七层协议 物理层 数据链路层 网络架构及演变过程 网 ...

  4. kswapd和pdflush

    首 先,它们存在的目的不同,kswap的作用是管理内存,pdflush的作用是同步内存和磁盘,当然因为数据写入磁盘前可能会换存在内存,这些缓存真正写 入磁盘由三个原因趋势:1.用户要求缓存马上写入磁盘 ...

  5. 破解js中的this指向

    首先必须要说的是,this的指向在函数定义的时候是确定不了的,只有函数执行的时候才能确定this到底指向谁,实际上this的最终指向的是那个调用它的对象(这句话有些问题,后面会解释为什么会有问题,虽然 ...

  6. 优化yum下载安装慢,不断换mirror

    不停地换mirror,为了解决这个问题,在网上搜了好多资料,总结出一个基于aliyun的mirror源 先检查:是否能正常上网,DNS是否正常,网关gw是否正常,若通过ping 不正常,则解决好网络, ...

  7. python - 函数的定义和使用

    目录 函数的定义和使用 一. 为什么要用函数? 二. 函数的参数 三. 函数的变量 global和nolocal 四. 递归函数 五. lamabda匿名函数 函数的定义和使用 1 def test( ...

  8. hdu 5175 Misaki's Kiss again

    Misaki's Kiss again  Accepts: 75  Submissions: 593  Time Limit: 2000/1000 MS (Java/Others)  Memory L ...

  9. 分布式服务框架Dubbo入门案例和项目源码

    本项目源代码:http://download.csdn.net/detail/fansunion/9498406 Dubbo是一个分布式服务框架,致力于提供高性能和透明化的RPC远程服务调用方案, 是 ...

  10. 清北学堂模拟赛d2t6 分糖果(candy)

    题目描述总共有n颗糖果,有3个小朋友分别叫做L,Y,K.每个小朋友想拿到至少k颗糖果,但这三个小朋友有一个共同的特点:对3反感.也就是说,如果某个小朋友拿到3颗,13颗,31颗,333颗这样数量的糖果 ...