弹性盒子
CSS3的弹性盒子(flexbox),是一种当页面需要适应不同的屏幕大小以及设备类型时,确保元素拥有恰当的行为的布局方式,它会对一个容器中的子元素进行更有效地排列、对齐和分配空白。
将display
属性的值设置为flex
即可定义一个弹性容器,内部包含一个或多个弹性子元素,这些子元素的内部是正常渲染的。
行内元素可以使用inline-flex
实现弹性布局;对于webkt内核浏览器,需要加上-webkit
前缀。
默认情况下,一个容器只有一行:
<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
display: -webkit-flex;
display: flex;
width: 300px;
height: 150px;
border: 1px solid blue;
}
.flex-item {
width: 50px;
height: 50px;
margin: 10px;
border: 1px solid green;
text-align: center;
}
</style>
</head>
<body>
<div class="flex-container">
<div class="flex-item">子元素1</div>
<div class="flex-item">子元素2</div>
<div class="flex-item">子元素3</div>
</div>
</body>
</html>
增加子元素,仍是在同一行,宽度会自动缩小;若宽度已是可接受的最小值,则子元素会溢出容器:
<div class="flex-container">
<div class="flex-item">子元素1</div>
<div class="flex-item">子元素2</div>
<div class="flex-item">子元素3</div>
<div class="flex-item">子元素4</div>
<div class="flex-item">子元素5</div>
</div>
<!-- 增加了两个子元素,其余不变 -->
容器默认存在两根轴:水平的主轴(main axis)和垂直的交叉轴(cross axis)。主轴的开始位置(与边框的交叉点)叫做main start
,结束位置叫做main end
;交叉轴的开始位置叫做cross start
,结束位置叫做cross end
;
项目默认沿主轴排列。单个子元素占据的主轴空间叫做main size
,占据的交叉轴空间叫做cross size
:
(图片来自阮一峰老师)
关于排列问题,通过flex-direction
属性,我们可以设置主轴的方向,也就是项目的排列方向:
row
:元素将水平显示(默认)row-reverse
:水平显示,但是方向相反column
:元素将垂直显示column-reverse
:垂直显示,但方向相反注意,如果元素不是弹性容器,则
flex-direction
属性不起作用
关于溢出问题,通过flex-wrap
属性可以设置项目超出容器时是否换行:nowrap
:单行,可能会溢出(默认)wrap
:多行,项目的溢出部分会放到新行,项目内部会发生断行wrap-reverse
:性质与wrap
相同,但第一行在下方
justify-content
用于设置项目在主轴(横轴)方向上的对齐方式:flex-start
:左对齐(默认)flex-end
:右对齐center
:居中space-between
:两端对齐,项目之间的间隔相等space-around
:每个项目两侧的间隔相等
flex-flow
是flex-direction
和flex-wrap
的简写:
.container {
flex-flow: <flex-direction> || <flex-wrap;
/* 默认值是`row nowrap` */
}
关于对齐问题,通过align-items
可以设置项目在交叉轴上如何对齐:
flex-start
:交叉轴的起点对齐flex-end
:交叉轴的终点对齐center
:交叉轴的中点对齐baseline
:项目的第一行文字的基线对齐stretch
:如果项目未设置高度或设为auto,将占满整个容器的高度(默认)
关于多根轴线的对齐,通过align-content
属性进行定义;如果项目只有一根轴线,该属性无效:
上面是容器的属性;也还可以针对项目进行设置:
order
:定义项目的排列顺序,数值越小,排列越靠前,默认为0flex-grow
:定义项目的放大比例,默认为0flex-shrink
:缩小比例,默认为1flex-basis
:定义了在分配多余空间之前,项目占据的主轴空间(main size),浏览器根据这个属性,计算主轴是否有多余空间,默认为auto
flex
:是以上3个属性的简写
.item {
flex: none | [<flex-grow> <flex-shrink>? || <flex-basis>]
/*
有两个快捷值:
`auto` 等价于 `1 1 auto`
`none` 等价于 `0 0 auto`
*/
}
align-self
:允许单个项目有与其他项目不一样的对齐方式,可覆盖align-items
属性,默认为auto
,即不进行覆盖
详细可参考:Flex布局教程:语法篇,阮一峰