CSS3 中弹性盒模型--容器的属性
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 中弹性盒模型--容器的属性的更多相关文章
- css3中 弹性盒模型布局之box-flex
box-flex:也就是让子容器针对父容器的宽高属性依照一定的规则来划分 Eg: html代码: <div class="wrap"> <div class=&q ...
- CSS-3 新弹性盒模型属性
flex 语法:flex:none | [ flex-grow ] || [ flex-shrink ] || [ flex-basis ] 取值: none:none关键字的计算值为: 0 0 au ...
- css3之弹性盒模型初探(一)
什么是弹性盒模型? 弹性盒模型是指在父级改变大小的时候内部的自己元素也会相应的改变大小,即子集会按照父级的大小按比例自适应大小. 弹性盒模型的提出可以解决一些响应式布局的需求 如何使用弹性盒模型? ...
- css3之弹性盒模型(Flex Box)
CSS3 弹性盒子(Flex Box) 弹性盒子是 CSS3 的一种新的布局模式. CSS3 弹性盒( Flexible Box 或 flexbox),是一种当页面需要适应不同的屏幕大小以及设备类型时 ...
- flex-shrink (适用于弹性盒模型容器子元素)
设置或检索弹性盒的收缩比率(根据弹性盒子元素所设置的收缩因子作为比率来收缩空间.) 语法 flex-shrink: <number> (default 1) flex-shrink的默认值 ...
- (转)详解css3弹性盒模型(Flexbox)
今天刚学了css3的弹性盒模型,这是一个可以让你告别浮动.完美实现垂直水平居中的新特性. Flexbox是布局模块,而不是一个简单的属性,它包含父元素和子元素的属性. Flexbox布局的主体思想是似 ...
- CSS3弹性盒模型flexbox完整版教程
http://caibaojian.com/flexbox-guide.html 来自CSS Tricks上的一个教程,原文为:A Complete Guide to Flexbox.文中详细的介绍了 ...
- css3弹性盒模型(Flexbox)
Flexbox是布局模块,而不是一个简单的属性,它包含父元素和子元素的属性. Flexbox布局的主体思想是似的元素可以改变大小以适应可用空间,当可用空间变大,Flex元素将伸展大小以填充可用空间,当 ...
- 详解css3弹性盒模型(Flexbox)
目前没有浏览器支持 box-flex 属性. Firefox 支持替代的 -moz-box-flex 属性. Safari.Opera 以及 Chrome 支持替代的 -webkit-box-flex ...
随机推荐
- day13-迭代器、三元表达式、列表推导式、字典生成式、生成器与递归
目录 迭代器 可迭代对象 迭代器对象 for循环原理 三元表达式(三目表达式) 列表推导式 字典生成式 zip()方法 生成器 生成器表达式 递归 递归的两个阶段 迭代器 迭代器即迭代的工具,迭代是一 ...
- CAD从二制流数据中加载图形(com接口)
主要用到函数说明: _DMxDrawX::ReadBinStream 从二制流数据中加载图形,详细说明如下: 参数 说明 VARIANT varBinArray 二制流数据,是个byte数组 BSTR ...
- Linux命令(文本编辑器)
vi和vim编辑器:有插入模式,一般模式,地行模式 一班模式通过(i.a.o.I.A.O)键--->进入插入模式 插入模式(按Esc键退出)---->j进入一班模式 ...
- Python 递归、匿名函数、map和filter day4
一.递归---函数自己调用自己 1.一个错误递归的例子: count=0 def hello(): global count count+=1 print("count %s"%c ...
- API开发管理平台eoLinker AMS 4.1版本发布:加入聚合空间,发布AMS专业版等
eoLinker AMS是集API文档管理.API自动化测试.开发协作三位一体的综合API开发管理平台,是中国最大的在线API管理平台. eoLinker AMS 4.1更新内容: 1.新增" ...
- Django - Ajax基本内容整理
将原来的请求结果普通字符串,变更为类字典的字符串 从这段代码中,可以看到,对原有函数,进行了一个try ...except....操作,进行异常捕捉,将捕捉过程及结果,存入在初始化的字典中,将字典通过 ...
- (C/C++学习)11.随机数组的快速查找
说明:利用随机函数生成一个随机数组,然后对数组进行排列,再利用二分查找快速查找一个数. 一.生成随机数组 time_t ts; //等价于long ts; unsigned int num = tim ...
- UID中RUID、EUID和SUID的区别
看UNIX相关的书时经常能遇到这几个概念,但一直没有好好去理清这几个概念,以致对这几个概念一直一知半解.今天好好区分了一下这几个概念并总结如下.说白了这几个UID引出都是为了系统的权限管理. 下面分别 ...
- (蓝桥杯)第八届A组C/C++方格分割
#include<iostream> #include<memory.h> #include<stack> #include<string> #incl ...
- PAT 1119 Pre- and Post-order Traversals
Suppose that all the keys in a binary tree are distinct positive integers. A unique binary tree can ...