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。