弹性盒是CSS3中新添加的一种布局方式,通过它可以更加方便的完成对网页的布局。通过弹性盒模型,可以便捷完成网页中的各种布局。
弹性容器:
要使用弹性盒,必须先将元素设置为弹性容器,也就是要在那个元素里使用弹性盒,就把这个元素设置为弹性容器。
通过
display:flex; /*块级弹性容器*/
display:inline-flex; /*行内级弹性容器*/
弹性项(弹性子元素):
- 弹性容器内的子元素就会自动变为弹性项。
- 弹性子元素都会沿着弹性盒的主轴排列。
主轴:
主轴就是弹性子元素的默认排列方向。
通过flex-direction来设置弹性子元素的主轴方向。
flex-direction 设置主轴方向(就是弹性子元素排列的方向)
可选值:
row(默认值) 主轴为自左向右横向水平方向
row-reverse 主轴为自右向左横向水平方向
column 主轴为自上向下纵向垂直方向
column-reverse 主轴为自下向上纵向垂直方向
侧轴(辅轴):
侧轴就是与主轴垂直方向的轴。
flex-warp 设置元素是否自动换行
可选值
nowrap(默认值) 元素不换行
wrap 元素换行
wrap 元素反向换行
这两个可以通过flex-flow来简写,并且无顺序要求。
flex-flow:row nowrap; == flex-flow:row;
flex-flow:row wrap; == flex-flow:wrap;
……
主轴方向上的元素对齐方式:
justify-content 设置元素在主轴上的对齐方式
可选值:
start(默认值) 元素从主轴的起点位置开始对齐。
end 元素从主轴的结束位置开始对齐。
center 元素沿主轴方向居中对齐。 |===12345===|
space-between 将主轴方向的空白位置分配到两个元素之间。 |1=2=3=4=5|
space-around 将主轴方向的空白位置分配到每个元素周围。 |-1--2--3--4--5-|
space-evenly 将主轴方向的空白位置分配到元素的一侧。 |*1*2*3*4*5*|
侧轴上元素的对齐方式:
align-items 设置元素在辅轴上的对齐方式
可选值:
stretch(默认值) 元素在侧轴拉伸,将侧轴撑满
start 元素从侧轴的起始位置开始对齐
end 元素从侧轴的结束位置开始对齐
center 元素在侧轴居中对齐
align-content 设置元素在侧轴上的空白空间分配。
可选值:
space-between |1=2=3=4=5|
space-around |-1--2--3--4--5-|
space-evenly |*1*2*3*4*5*|