flex布局

Posted 2021-02-14 annely

 

 

flex的基本概念

采用 Flex 布局的元素，称为 Flex 容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称"项目"。

容器的6个属性

flex-direction

flex-wrap

flex-flow

justify-content

aign-items

align-content

flex-direction属性

决定主轴的方向（即项目的排列方向）

flex-wrap属性

 　　默认情况下，项目都排在一条线上（又称为“轴线”）。flex-wrap属性定义，如果一条轴线排列不下，应该如何换行

flex-flow

　　其属性是flex-direction属性和flex-wrap属性的简写形式，默认值为 row  nowrap

 justify-content属性

　　justify-content属性定义了项目在主轴上的对齐方式。

可能取5个值，其具体对齐方式与轴的方向有关。

flex-start(默认值)：左对齐

flex-end：右对齐

center：居中

space-between：两端对齐，项目之间的间隔都相等

space-around:每个项目的两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍

 

align-items属性

align-items属性定义项目在交叉轴上如何对齐。