flex(弹性盒子布局)
2016-11-23 本文已影响144人
Jianshu9527
弹性可伸展的.让一个容器变成一个可以自由伸展(弹性)的
移动端使用较多(不用考虑IE)
1 起源
2009年.W3C提出了一种新的方案----Flex布局(现在的浏览器支持性更好,导致了现在才开始流行)
2 作用
※※举例说明↓
完美的居中
<body>
<div class="container">
<div class="item">
item
</div>
</div>
<style type="text/css">
.container{
width:200px;
height:200px;
background:#eee;
border:1px solid red;
display:flex;
}
.item{
width:50px;
height:50px;
background-color:#fff;
margin:auto;
}
</style>
</body>
chrome下的输出结果:
- 缺点:父级元素(容器)加上了display:flex后 第一子级元素(项目)都会变成块元素(嵌套的子级元素不会受影响)
- 优点
1)解决了margin重叠的问题
2)干掉的float
3 基本概念
3.1 容器&项目
-
容器：如果你给一个元素添加 display:flex，就称为这是一个容器。
-
功能 : 设置主轴的方向(项目的排列方向)
1)容器中项目会按照主轴方向进行摆放,默认的主轴方向是水平方向
2)容器的属性值 -
flex-direction(4个值)
flex-direction.png
-
flex-wrap(3个值)
flex-wrap.png
-
flex-flow
flex-flow.png
-
justify-content(5个值)
justify-content.png
-
align-items(5个值)
align-items.png
-
align -content(6个值)
align-content.png
-
项目：容器里面的直接子元素(子级第一个元素)，称为项目
1)所有项目都是block(子级元素下嵌套的元素除外)
2)项目的属性值 -
order:用于更改排列顺序。数值越小，排列越靠前，默认为0.可以为负数。
order.png
-
flex-grow
flex-grow.png
-
flex-shrink
flex-shrink.png
-
flex-basis
flex-basis.png
-
flex
flex.png
-
align-self
align-self.png
-
display:flex
display-flex.png
-
justify-content(子元素主轴的对齐方式)
子元素主轴对齐方式.png
-
align-items(子元素交叉轴对齐方式)
子元素交叉轴对齐方式.png
3.2 主轴$交叉轴
