Flex弹性盒子与容器属性

Flex盒子模型

采用Flex布局的元素,成为Flex容器(flex container)。它的所有子元素自动成为容器成员,成为Flex项目(Flex item)

水平的轴称为主轴,竖直的轴称为交叉轴。水平轴开始的地方称为main start,结束的地方称为main end;同理,交叉轴开始的地方称为cross start,交叉轴结束的地方称为cross end。对于单个flex item而言,其所占据的主轴空间称为main size,在交叉轴所占据的空间被称为cross size。

Flex容器的属性

flex-direction;

其作用是决定主轴的方向(即项目的排列方向)

flex-wrap;

默认情况下,项目都排在一条轴线上,如果一条轴线排不下的换行方式,

flex-flow

flex-direction属性和flex-wrap属性的简写形式

justify-content;

定义了项目在主轴上的对齐方式

align-items;

定义项目在交叉轴上如何对齐。

align-content

多轴线对齐方式,如果项目只有一条轴线,则该属性不起作用。

举例

注:

以上知识囊括以及之前的css,js,响应式布局的文章总结均来自b占up主罗大富bigrich。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值