CSS弹性盒模型

CSS弹性盒子

CSS弹性盒子是CSS3中新增的一种布局方式，它可以用于创建响应式的网页布局。弹性盒子可以将容器中的项目按照一定的规则进行排列，可以控制项目的大小、位置和顺序，非常灵活。

弹性盒子的基本概念

在使用弹性盒子布局时，需要了解以下几个基本概念：

容器（container）：包含弹性盒子的父元素。
项目（item）：弹性盒子中的子元素。
主轴（main axis）：弹性盒子的主要方向。
交叉轴（cross axis）：与主轴垂直的方向。
弹性盒子的属性
在使用弹性盒子布局时，需要设置容器的属性和项目的属性。以下是常用的弹性盒子属性：

• 容器的属性
  display：设置容器为弹性盒子布局。
  flex-direction：设置主轴的方向。
  justify-content：设置项目在主轴上的对齐方式。
  align-items：设置项目在交叉轴上的对齐方式。
  align-content：设置多行项目在交叉轴上的对齐方式。

• 项目的属性
  order：设置项目的排列顺序。
  flex-grow：设置项目的放大比例。
  flex-shrink：设置项目的缩小比例。
  flex-basis：设置项目的基准大小。
  flex：设置项目的放大比例、缩小比例和基准大小。
  align-self：设置项目在交叉轴上的对齐方式，覆盖容器的align-items属性。

justify content

positions a container’s items along the main axis and accepts the following values:

• flex-start: group items at the start of a container’s main axis
• flex-end: group items at the end of the main axis
• center: group items in the center of the main axis
• space-between: evenly distribute items along the main axis such that the first item aligns at the start and the final item aligns at the end
• space-around: evenly distribute items along the main axis such that all items have equal space around them

align-items

positions a container’s items across its cross axis and accepts the following values:

• flex-start: align items across the start of a container’s cross axis
• flex-end: align items across the end of the cross axis
• center: align items across the center of the cross axis

flex-direction

can rotate the axes such that the main axis lays out vertically and the cross axis lays out horizontally. Here’s what this looks like:

• row: lay out the main axis from left to right
• row-reverse: lay out the main axis from right to left
• column: lay out the main axis from top to bottom
• column-reverse: lay out the main axis from bottom to top

元素本身

Order

The order property defines the order in which an item appears in the flex container and accepts both positive and negative integer values. All flex items begin with a default order of 0, so an item with an order greater than 0 will be repositioned relative to items still set to their default orders.