div弹性布局

关于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弹性布局不可以用了。

声明:本内容不属于本人

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值