布局的传统解决方案,基于盒状模型,依赖 display
属性 + position
属性 + float
属性。它对于那些特殊布局非常不方便,比如,垂直居中就不容易实现。
flex布局,可以简便,完整,响应式的实现各种页面的布局。所有浏览器都支持。
flex是弹性布局的缩写,用来为盒状模型提供最大的灵活性。
任何一个容器都可以指定为flex布局。
.box{
display: flex;
}
行内元素也可以使用flex布局。
.box{
display: inline-box;
}
webkit内核的浏览器 必须加上-webkit前缀
.box{
display: -webkit-flex; /* Safari */
display: flex;
}
注意:设置为flex布局以后,子元素的float,clear和vertical-algn等均无效。
采用flex布局的元素,称为容器,内部元素都成为项目
容器默认存在2根轴,水平的主轴和垂直的交叉轴,
。主轴的开始位置(与边框的交叉点)叫做main start
,结束位置叫做main end
;交叉轴的开始位置叫做cross start
,结束位置叫做cross end
。
项目默认沿主轴排列。单个项目占据的主轴空间叫做main size
,占据的交叉轴空间叫做cross size
。
以下6个属性设置在容器上
- flex-direction
- flex-wrap
- flex-flow
- justify-content
- align-items
- align-content
下面进行简要介绍:
flex-dirction属性决定主轴的方向 默认为row 即为水平方向。
默认情况下,项目都排在一条线(又称"轴线")上。flex-wrap
属性定义,如果一条轴线排不下,如何换行。
nowwrap(默认) 不换行,wrap 换行 第一行在上方。
justify-content
属性定义了项目在主轴上的对齐方式。 可以设置水平对齐center
align-items
属性定义项目在交叉轴上如何对齐。若不改变主轴方向,则可以设置垂直对齐。
以下6个属性设置在项目上。
order
flex-grow
flex-shrink
flex-basis
flex
align-self
order属性定义项目的排列顺序,数值越小,越排在前面,默认为0
.item {
order: <integer>;
}
flex-grow
属性定义项目的放大比例,默认为0
,即如果存在剩余空间,也不放大。
flex-shrink
属性定义了项目的缩小比例,默认为1,即如果空间不足,该项目将缩小。
align-self属性允许单个项目有与其他项目不一样的对齐方式,可覆盖align-items
属性。默认值为auto
,表示继承父元素的align-items
属性,如果没有父元素,则等同于stretch
。
具体教程可参见阮一峰的教程。其也有实战篇。
http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html
实战篇:http://www.ruanyifeng.com/blog/2015/07/flex-examples.html
自己实现的简单实例。html代码
<body>
<div class="content">
<p class="cao">曹</p>
<p class="chen">陈</p>
</div>
</body>
css代码:
.content{
border: solid 2px;
height: 300px;
display:flex;
justify-content: center;
align-items: center;
}
.cao{
order: 2;
color: blue;
}
.chen{
order: 1;
align-self:flex-start
}
可以水平垂直居中,并且陈可以设置自己的对齐方式,这里设置成了开始对齐。