display和它的属性

display属性

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

display 是CSS中最重要的用于控制布局的属性。每个元素都有一个默认的 display 值，这与元素的类型有关。对于大多数元素它们的默认值通常是 block 或 inline 。一个 block 元素通常被叫做块级元素。一个 inline 元素通常被叫做行内元素。

每个元素都有一个默认的 display 类型。不过你可以随时随地的重写它！虽然“人为制造”一个行内元素可能看起来很难以理解，不过你可以把有特定语义的元素改成行内元素。常见的例子是：把 li 元素修改成 inline，制作成水平菜单。

---

设置在容器上的属性有6种：

1.flex-direction

2.flex-wrap

3.flex-flow

4.justify-content

5.align-item

6.align-content

---

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

.box {
   flex-direction: row | row-reverse | column | column-reverse;
}

row（默认）：主轴水平方向，起点在左端；

row-reverse：主轴水平方向，起点在右端；

column：主轴垂直方向，起点在上边沿；

column-reserve：主轴垂直方向，起点在下边沿。

• flex-wrap属性：定义换行情况

• flex-flow属性：flex-direction和flex-wrap的简写，默认row nowrap

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

flex-end：右对齐；

center：居中；

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

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

 

• align-items属性：定义在交叉轴上的对齐方式

• align-content属性：定义多根轴线的对齐方式