flex 布局

Posted 2023-03-09

参考技术A 一、Flex 布局是什么？

Flex 是 Flexible Box 的缩写 ，意为“弹性布局” 用来为盒状模型提供最大的灵活性

任何一个容器都可以指定为 Flex 布局   （行内元素也可以）

二、基本概念

采用 Flex 布局的元素，称为Flex 容器 它的所有子元素自动成为容器成员，称为Flex项目

三、容器的属性 （重点记忆）

以下6个属性设置在容器上。

3.1 flex-direction 属性决定主轴的方向（即项目的排列方向）

flex-direction:row | row-reverse | colume | colume-reverse;

1）row：横向从左到右排列（左对齐），默认的排列方式。

2）row-reverse：反转横向排列（右对齐，从后往前排，最后一项排在最前面。

3）column：纵向排列

4）column-reverse：反转纵向排列，从后往前排，最后一项排在最上面。

flex-wrap 定义如果一条轴线排不下，如何换行

flex-wrap: nowrap  |  wrap  |  wrap-reverse

1) nowrap (默认)不换行 

2）wrap 换行，第一行排列在上方 

3）wrap-reverse: 换行，第一行在下方

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

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

justify-content : flex-start | flex-end | center | space0-between | space-around

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

align-item: flex-start  |  flex-end    |  center  |  baseline |  stretch 

align-content 定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用