Flex布局详解
传统的网站中,布局的解决方法都是通过盒模型来控制,依赖Display,float,position来进行实现的,虽然可以解决大部分的布局情况,但是一些比较特殊的布局实现起来就存在问题了,比如我们常见的垂直居中,因此Flex就被制造出来了,随着时间的考验,flex慢慢的被浏览器和开发者接受。可以非常简单的响应各种页面布局。
Flex是什么
Flex称之为弹性盒子,能够给盒子模型提供更加强大的灵活性,通过display 的 flex属性就可以指定为flex,需要注意的是转换成为flex后,一些属性也不会生效,如:float,clear ,vertical-align就没有效果了。
.context{
display : flex;
}
复制代码
Flex的属性介绍
- flex-direction
- flex-wrap
- flex-flow
- justify-content
- align-items
- align-content
flex-direction属性
direction决定了主轴的方向
它有四个值来确定位置。- row : 默认值,主轴水平方向,起点在左端
- row-reverse : 主轴为水平方向,起点在右端
- column : 主轴为垂直方向,起点在上端
- column-reverse : 主轴在垂直方向,七点在下端。
flex-wrap
默认情况下wrap都排在一条直线上
它有三个属性来确定它的行为:- nowrap(默认) : 不换行,一直排在一行
- wrap : 换行第一排在上方
- wrap-reverse : 换行第一行在下方
flex-flow
flow是flex-direction和flex-wrap的简写形式,默认值为row nowrap
justify-content
定义了项目在主轴上面的对齐方式
.content{
/* 默认 */
justify-content: flex-start;
}
复制代码
- flex-start : 默认左对齐。
- flex-end : 右对齐。
- center : 居中对齐。
- space-between : 两端对齐,元素之间间隔一样的。
- space-around : 元素之间的间隔会比头尾元素距离边框的间隔大一倍。
align-items
与justify-content不同的是,align-items是在Y轴的对齐方式,与justity-content交叉。。。。
- flex-start : 交叉轴的起点对齐,如果x与y相交,就是从y顶部开始
- flex-end : 交叉轴终点对齐,如果x和y轴相交,就是从y底部开始
- center : 交叉轴的中部对齐 ,y轴居中一般
- baseline : 元素中第一行文本的底线对齐,可以想象成串串
- stretch : 默认值,元素无明确宽度,或者为auto已经100%,将占满整个Y轴
align-content
多跟轴线对齐方法,如果只有一根轴线,那么将不起作用。 该属性有六个值:
- flex-start:与交叉轴的起点对齐。
- flex-end:与交叉轴的终点对齐。
- center:与交叉轴的中点对齐。
- space-between:与交叉轴两端对齐,轴线之间的间隔平均分布。
- space-around:每根轴线两侧的间隔都相等。所以,轴线之间的间隔比轴线与边框的间隔大一倍。
- stretch(默认值):轴线占满整个交叉轴。