Flex布局(弹性布局)
flex可以简便,完整,响应式地实现各种页面布局,目前,它已经得到了所有浏览器的支持。
任何容器都可以指定为flex布局
.box {
display: flex;
}
行内样式也可以使用flex布局
.box {
display:inline-flex;
}
webkit内核的浏览器,必须加上-webkit前缀。
.box {
display:-webkit-flex;
display:flex
}
扩展:浏览器内核主要有
Trident内核:主要代表为ie浏览器, 前缀:-ms
Gecko内核:主要代表firefox, 前缀:-moz
Presto内核:主要代表为Opera, 前缀:-o
Webkit内核:主要代表为chrome和safari, 前缀:-webkit
设为flex布局以后,子元素的float,clear和verti-align属性将失效
设置了display:flex的盒子称为flex容器,他的所有子元素自动成为容器成员(也称为项目)
容器默认存在两根轴:水平的主轴和垂直的交叉抽,里面的子元素默认沿主轴排列
容器有6个属性:
flex-direction:决定主轴的方向(子元素的排列方向)
.box {
flex-direction: row | row-reverse | colum | column-reverse;
}
- row主轴为水平方向,起点在左侧
- column:主轴为垂直方向,起点在上沿
- reverse:相反的方向
如图:
flex-wrap:默认情况下,子元素(又称项目)都在都在一条线上(又称“轴线”)上。flex-wrap属性定义,如果一条轴线排不下,如何换行
.box {
flex-wrap: nowrap | wrap | wrap-reverse;
}
- nowrap(默认):不换行,(所有子元素平分父元素的宽度,子元素设置宽无效,高有效)
- wrap:换行,第一行在上方 (根据父元素的宽度,放置子元素的个数)
- wrap-reverse:换行,第一行在下方
如图:
flex-flow:是flex-direction属性和flex-wrap属性的简写形式,默认值为 row nowrap
.box{
flex-flow: <flex-direction> || <flex-wrap>;
}
此情况就演示一个,如图:
justify-content:属性定义了项目在主轴上的对齐方式。
.box {
justify-content: flex-start | flex-end | center | space-between | space-around;
}
- flex-start(默认值):左对齐
- flex-end:右对齐
- center: 居中
- space-between: 两端对齐,之间的间隔都相等
- space-around:每个子元素两侧的间隔相等,所以,子元素之间的间隔与边框的间隔大一倍
如图:
align-items:定义子元素在交叉轴上如何对齐。
.box {
align-items: flex-start | flex-end | center | baseline | stretch;
}
具体的对齐方式与交叉的方向有关,下面假设交叉抽从上到下:
- flex-start:交叉轴的起点对齐
- flex-end:交叉轴的终点对齐
- center:交叉轴的中点对齐
- baseline:子元素的第一行文字的基准对齐
- stretch(默认值):如果子元素未设置高度或设为auto,将占满整个容器的高度
如图:
align-content:属性定义了多根轴线的对齐方式。如果项目只有一根轴线,该属性不起作用。
.box {
align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}
flex-start:与交叉轴的起点对齐。
flex-end:与交叉轴的终点对齐。
center:与交叉轴的中点对齐。
space-between:与交叉轴两端对齐,轴线之间的间隔平均分布。
space-around:每根轴线两侧的间隔都相等。所以,轴线之间的间隔比轴线与边框的间隔大一倍。
stretch(默认值):轴线占满整个交叉轴。
如图: