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. Swift 3到5.1新特性整理

    本文转载自:https://hicc.me/whats-new-in-swift-3-to-5-1/,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有. Hipo 2.0 重写从 Swif ...

  2. [系统资源攻略]CPU使用率和负载

    我们在搞性能测试的时候,对后台服务器的CPU利用率监控是一个常用的手段.服务器的CPU利用率高,则表明服务器很繁忙.如果前台响应时间越来越大,而后台CPU利用率始终上不去,说明在某个地方有瓶颈了,系统 ...

  3. forcedirectories和CreateDirectory

    forcedirectories和CreateDirectory都能创建文件ForceDirectories可以创建多层目录. 如果你创建一个目录为c:\mymusic\music 如果你的C盘不存在 ...

  4. [luogu1485 HNOI2009] 有趣的数列 (组合数学 卡特兰数)

    传送门 Solution 卡特兰数 排队问题的简单变化 答案为\(C_{2n}^n \pmod p\) 由于没有逆元,只好用分解质因数,易证可以整除 Code //By Menteur_Hxy #in ...

  5. models中,对于(Small)IntegerField类型字段的choices参数在前端的展示

    # models.py class UserInfo(models.Model): gender_choices = ( (1, "男"), (2, "女"), ...

  6. HTML学习笔记之HTML5新特性

    目录 1.拖放 2.画布 3.可伸缩矢量图形 4.地理定位 5.Web 存储 6.应用缓存 7.Web Worker 1.拖放 拖放是一种常见的特性,用于抓取对象以后拖到另一个位置,它是 HTML5 ...

  7. Problem 21

    Problem 21 https://projecteuler.net/problem=21 Let d(n) be defined as the sum of proper divisors of  ...

  8. 【codeforces 796B】Find The Bone

    [题目链接]:http://codeforces.com/contest/796/problem/B [题意] 一开始骨头在1号位置; 然后有m个洞,给出洞的下标; 然后有k个交换操作; 如果骨头到洞 ...

  9. noip2013 Day2 T2 花匠 解题报告

    题目: 3289 花匠 2013年NOIP全国联赛提高组 时间限制: 1 s 空间限制: 128000 KB 题目描述 Description 花匠栋栋种了一排花,每株花都有自己的高度.花儿越长越大, ...

  10. spring boot开发REST接口

    1.配置pom.xml文件的<parent>和<depencencies>,指定spring boot web依赖 <parent> <groupId> ...