弹性盒子（flex）

一、什么是弹性盒子

弹性盒子是一种用于按行或按列布局元素的一维布局方法。元素可以膨胀以填充额外的空间，收缩以适应更小的空间。

二、flex 模型说明

• 主轴（main axis）： 是沿着 flex 元素放置的方向延伸的轴（比如页面上的横向的行、纵向的列）。该轴的开始和结束被称为 main start 和 main end。
• 交叉轴（cross axis）： 是垂直于 flex 元素放置方向的轴。该轴的开始和结束被称为 cross start 和 cross end。
• Flex 容器（flex container）： 设置了 display: flex 的父元素
• Flex 项目（flex item）： 在 flex 容器中表现为弹性的盒子的直接子元素

三、容器的属性

1、flex-direction 属性

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

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

• row（默认值）： 主轴为水平方向，起点在左端。
• row-reverse： 主轴为水平方向，起点在右端。
• column： 主轴为垂直方向，起点在上沿。
• column-reverse： 主轴为垂直方向，起点在下沿。

2、flex-wrap 属性

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

.box{
   
  flex-wrap: nowrap | wrap | wrap-reverse;
}

• nowrap（默认）： 不换行。
• wrap： 换行，第一行在上方。
• wrap-reverse： 换行，第一行在下方。

例：nowrap

例：wrap