flex布局

flex布局原理

flex布局为基于父元素flex-container弹性容器和子元素flex-item弹性子元素进行弹性布局

flex布局特性

flex布局默认使父元素flex-container弹性容器排列方式为flex-direction:row-----行方式排列

display:flex

将该元素设置为flex-container 弹性容器

Flex-container的特性

  1. 实现子元素的弹性布局
  2. 实现父元素的自动增高

Flex-direction 设置所有flex-item的排列方式

设置flex-container弹性容器下的所有flex-item的排列方式

1.row        以行方式正序排列

2.row-reverse 行方式倒序排列并将行的对齐方式改变为相反方向

3.column        列方式排列

4.column-reverse 列方式倒序排列并将列的对齐方式改变为相反方向

row弹性排列的实现原理

消除flex-container下的所有子元素flex-item的block特性-块状特效,将块元素变为了行内块元素

Justify-content 设置所有flex-item的主轴对齐方式

1.flex-start

所有flex-item向flex-container的主轴起始方向对齐

2.flex-end

所有flex-item向flex-container的主轴结束方向对齐

3.center   

所有flex-item在主轴中居中

4.space-between

第一个flex-item向主轴起点对齐,第二个flex-item向主轴末尾对齐

其他flex-item在主轴自动居中

5.space-around

所有flex-item基于主轴均分对齐

原理:

flex-item自动增加外左右外边距或自动增加上下外边距

align-items 设置所有flex-item的交叉轴对齐方式

1.flex-start

所有flex-item向flex-container的交叉轴起始方向对齐

2.flex-end

所有flex-item向flex-container的交叉轴结束方向对齐

3.center   

所有flex-item在主轴中居中

4.space-between

第一个flex-item向交叉轴起点对齐,第二个flex-item向交叉轴末尾对齐

其他flex-item在交叉轴自动居中

5.space-around

所有flex-item基于交叉轴均分对齐

6.Stretch

所有flex-item基于交叉轴自动拉伸

7.Baseline

所有flex-item基于交叉轴中的所有flex-item元素中的文字对齐

主轴

flex-item的排列方向

Flex-direction以行排列时,主轴为x轴,flex-direction以列排列时,主轴为y轴

交叉轴

flex-item的排列方向的相反方向

如果主轴为x轴时,交叉轴为y轴

如果主轴为y轴时,交叉轴为x轴

Flex-wrap Flex-item的换行特性

wrap     flex-item横向排列时溢出换行

No-wrap flex-item横向排列时溢出不换行

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值