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. css3的基础知识

    transfrom的应用: 1.旋转:transform: rotate(30deg): 2.阴影效果:box-shadow: 10px 10px 5px #888888: 3.鼠标移入放大:tran ...

  2. uvalive 3231

    3231 - Fair ShareAsia - Seoul - 2004/2005You are given N processors and M jobs to be processed. Two ...

  3. React 服务器渲染原理解析与实践

    第1章 服务器端渲染基础本章主要讲解客户端与服务器端渲染的概念,分析客户端渲染和服务器端渲染的利弊,带大家对服务器端渲染有一个粗浅认识. 1-1 课程导学1-2 什么是服务器端渲染1-3 什么是客户端 ...

  4. Linux之网络ping(unknown host)故障及yum no more mirrors to try

    1.ping外网出现ping:unknown host   字样故障 鉴于网上大多都是提供临时生效的解决办法,这里不再赘述,并提供下永久生效的方案: 永久生效: 1)添加DNS地址和下一跳网关地址至网 ...

  5. Restful传递数组参数的两种方式

    第一种,直接传递数组 js直接传递数组 var data = ["123","456"];that.loadDictionarys(data).subscrib ...

  6. 基于JavaScript封装的Ajax工具类

    前段是件由于工作需要无奈编写了一个给予JavaScript封装的工具类,技术有限,误喷,感谢大家的支持. 1.以下是JavaScript 的 Ajax 工具类. function createXMLH ...

  7. 清北学堂模拟赛d4t2 b

    分析:比较复杂的一题. 首先要求k个mod m互不相同且和为n的数ai,我们可以转化为求和为k个bi,并且(Σbi) % m = n % m 其中bi=ai % m,接下来可以用dp求出选了i个b,和 ...

  8. NEMA-0183(GPRMC GPGGA)详细解释

    NEMA-0183(GPRMC GPGGA)详细解释 nmea数据如下:  $GPGGA,121252.000,3937.3032,N,11611.6046,E,1,05,2.0,45.9,M,-5. ...

  9. 使用JQUERY的flexselect插件来实现将SELECT下拉菜单变成自动补全输入框

    这也是下拉列表太长了之后,使用的同事提出来的意见, 然后,本来开始想将DJANGO的那个后台下拉菜单移植过来的,但发现不现实,也麻烦, 就找了几个JQUERY的插件测试了一下,最后选中了flexsel ...

  10. SpringMVC项目

    一.说明该项目是为了演示SpringMVC框架中涉及到的一些知识点,相对独立,掌握这些,基本上就能够解决工作中遇到的一些问题.整个项目的构建规划如下: 1.创建一个标准的Maven Web项目;2.使 ...