网页布局是css的一个重要应用,以前的布局方法(基于盒子模型),采用浮动(float)、定位(position)和display属性去布局,难以实现如垂直居中这样的效果。而新增的flex布局方式可以更简便,灵活的处理这种布局。
1.什么是flex布局?
flex是flex box的缩写,意为“弹性布局”,使容器拥有更灵活的布局方式
任意一个容器都可以设置成flex布局
.box{
display:flex;
}
【注意】:设置为flex布局后,子元素的float、clear和vertical-align属性都会失效。
2.flex布局的概念
容器(container):设置flex布局的盒子;项目(item):flex布局盒子的第一级子项
弹性布局默认有两根轴,水平主轴(main axis)和垂直主轴(cross axis)
概念示意图如下:
3.flex的容器属性
1)flex-direction:主轴的方向(项目排列的方向),有四个值
.box{
flex-direction: row | row-reverse | column | column-reverse
}
row:默认,主轴为水平方向,起点在左侧
column:主轴为垂直方向,起点在上沿
row-reverse:主轴为水平方向,起点在右侧
column-reverse:主轴为垂直方向,起点在下沿
2)flex-wrap:换行的方式(当项目排不下时)
.box{
flex-wrap: nowrap | wrap | wrap-reverse;
}
nowrap:默认,不换行
wrap:换行,第一行在上面
wrap-reverse:换行,第一行在下面
3)justify-content:项目在主轴上的对齐方式
flex-start:起点对齐
flex-end:终点对齐
center:居中对齐
space-between:两端对齐
space-around:间隔对齐
space-evenly:均匀对齐