css3弹性盒模型(Flexbox)
2016-06-21 11:49
585 查看
Flexbox是布局模块,而不是一个简单的属性,它包含父元素和子元素的属性。
Flexbox布局的主体思想是似的元素可以改变大小以适应可用空间,当可用空间变大,Flex元素将伸展大小以填充可用空间,当Flex元素超出可用空间时将自动缩小。总之,Flex元素是可以让你的布局根据浏览器的大小变化进行自动伸缩。
创建Flex容器
flexbox布局首先需要创建一个
flex容器。为此给元素设置
display属性的值为
flex。对于IE10来说,我们需要在开头的地方添加
-ms-flexbox。
水平或垂直分布
box-orient定义分布的坐标轴:vertical和horizional。这两个值分别定义盒子垂直显示和水平显示:
语法:
box-orient:horizontal|vertical|inline-axis|block-axis|inherit;
|值|描述|
|-------------|:-------------:|
|inline-axis(轴线)|沿着行内轴来排列子元素(即从左往右)。
|block-axis|沿着块轴来排列子元素(即从上往下)。
案例
启用Flexbox
因为body元素包含了想要居中的标题元素,所以我们将他的
display属性值设置为“flex”:
主要作用是让元素body使用
flexbox布局,而不是普通的块布局。在文档流中的所有子元素(即不是绝对定位的元素)现在都变成了伸缩项目。
反向分布
设置弹性框对齐方式
还可以指定在解析了任何灵活长度和自动页边距之后,弹性容器的内容与主轴和横轴(与主轴垂直)的对齐方式。你可以通过justify-content、align-items、align-self和
align-content属性调整此对齐方式。
使用
justify-content属性,可以设置在解析了任何灵活长度和自动页边距之后,弹性项目与弹性容器主轴的对齐方式。下图显示了
justify-content的值以及这些值对弹性容器(含三个弹性项目)的影响。
align-items是一个和
justify-content相呼应的属性。
align-items调整伸缩项目在侧轴上的定位方式。可能的值有:
flex-wrap伸缩行换行
目前为止,每个伸缩容器都有且只有一个伸缩行。使用flex-wrap你可以为伸缩容器创建多个伸缩行。这个属性接受以下值:
如果flex-wrap设置为wrap,在一个伸缩行容不下所有伸缩项目时,伸缩项目会换行到一条新增的伸缩行上。新增的伸缩行根据侧轴的方向添加。
align-content会更改
flex-wrap的行为。它和
align-items相似,但是不是对齐伸缩项目,它对齐的是伸缩行。可能你已经想到了,它接受的值也很相似:[/code]
align-self侧轴对齐
伸缩项目的
align-self属性会覆盖该项目的伸缩容器的
align-items属性。它的值和
align-items一样:
属性讲解
box-direction属性规定框元素的子元素以什么方向来排列。
语法:
box-direction:normal|reverse|inherit;
box-pack属性规定当框大于子元素的尺寸,在何处放置子元素。
语法
box-pack:start|end|center|justify;
box-align属性规定如何对齐框的子元素。
语法
box-align:start|end|center|baseline|stretch; start:子容器从父容器顶部开始排列 end:子容器从父容器底部开始排列 center:子容器横向居中(有点奇怪) baseline:所有子容器沿同一基线排列(很难理解) stretch:所有子容器和父容器保持同一高度(默认值)
box-flex属性规定框的子元素是否可伸缩其尺寸。
语法
box-flex:value;
看下面一个实例:
<divstyle="display:-webkit-box;border:1pxsolid#ccc;width:500px;height:50px;"> <divstyle="-webkit-box-flex:1;</div> <divstyle="-webkit-box-flex:2;</div> <divstyle="width:100px;</div> </div>
与传统的盒模型一样,
overflow属性用来决定其显示方式。为了避免溢出,你可以设置
box-lines为
multiple使其换行显示。
flex:initial
一个
flex属性值被设为
initial的伸缩项目,在有剩余空间的情况下不会有任何变化,但是在必要的情况下会被收缩。
flex:auto
一个flex属性值被设为
auto的伸缩项目,会根据主轴自动伸缩以占用所有剩余空间。
auto目前仅在Opera12.11尚有效,在Chrome23.0.1271.95上无效。你可以通过使用flex:1;来达到一样的效果。
flex:none
一个
flex属性值被设为
none的伸缩项目,在任何情况都不会发生伸缩。
先了解到这里吧,之后的再深入学习便会陆续更新。不得不说css3的弹性盒模型为前端开发者带来了福音,让烦人的浮动见鬼去吧……
相关文章推荐
- css布局讲解
- css3常用样式集锦
- CSS中的空白效果属性使用小结
- CSS padding margin border属性详解
- 本人经过测试认为最简单最好的popupwindow样式
- DIV CSS 鼠标事件
- 横向滚动条的css样式
- CSS---关于内层DIV设置margin-top不起作用的解决方案
- 一个漂亮的滑动条样式
- CSS文本过长显示省略号
- 使用css3写一朵云
- datagrid中 formatter 的formatter样式不生效解决方案
- Css 浏览器兼容性及其其他常见问题
- js引入多个js、css文件
- 如何选择 class有空格的元素
- iOS 主流搜索界面下的Tag标签布局框架,各种样式任君挑选,包您满意(SKTagView)
- CSS3新属性box-sizing
- css之transform属性
- 粘连 Footer 的 5 种方法 | CSS-Tricks
- CSS——样式设置技巧(居中和隐藏)