关于flex弹性布局的属性决定主轴的方向的复习,老师讲过的
flex-direction
flex-wrap
flex-flow
justify-content
align-items
align-content
1,flex-direction属性
.box {
flex-direction: row | row-reverse | column | column-reverse;
}有4个值。
row(默认值):主轴为水平方向,起点在左端。
row-reverse:主轴为水平方向,起点在右端。
column:主轴为垂直方向,起点在上沿。
column-reverse:主轴为垂直方向,起点在下沿。
2 flex-wrap属性
默认情况下,项目都排在一条线(又称"轴线")上。flex-wrap属性定义,如果一条轴线排不下,如何换行。
.box{
flex-wrap: nowrap | wrap | wrap-reverse;
它可能取三个值。
(1)nowrap(默认):不换行。
(2)wrap:换行,第一行在上方。
(3)wrap-reverse:换行,第一行在下方。
flex-flow
flex-flow属性是flex-direction属性和flex-wrap属性的简写形式,默认值为row nowrap。
.box {
flex-flow: || ;
flex弹性布局的打法可以让我们设计前端或者布局更加的方便,
flex布局不像以前晋通布局不一样它可以让布局更加的容易不过也有许多的以前div布局可以用的在flex弹性布局不可以用了。
声明:本内容不属于本人