前端记录-flex布局

Flex布局是CSS3新增的一种布局方式，它采用“弹性盒子”模型来布局，可以在不同的屏幕尺寸和设备上自适应地调整布局。

4个术语：容器和元素，主轴和交叉轴。

在Flex布局中，容器是指设置了 display: flex 属性的元素，它是所有子元素的父元素，用来控制子元素的排列方式和分配空间。而元素是指容器（设置了 display: flex 属性的元素）中的每一个子元素，可以通过设置各种属性来控制自身的排列方式和占据的空间。

主轴和交叉轴：主轴默认为水平方向，从左到右，可通过 flex-direction 属性设置的主轴方向；交叉轴则是与主轴垂直的轴线，它的方向取决于主轴的方向。

flex布局关键就是容器属性和元素属性这两大类。

常用容器属性、元素属性及其常用取值：

1.容器属性

• display：设置容器为Flex布局，取值为flex，即display: flex;。
• flex-direction：设置主轴的方向
  • row（默认值，主轴为水平方向）
  • row-reverse（主轴为水平方向，但是从右到左排列）
  • column（主轴为竖直方向）
  • column-reverse（主轴为竖直方向，但是从下到上排列）
• flex-wrap：设置是否换行
  • nowrap（默认值，不换行）
  • wrap（换行，第一行在上方或左侧）
  • wrap-reverse（换行，第一行在下方或右侧）
• justify-content：设置主轴上的对齐方式
  • flex-start（默认值，左对齐）
  • flex-end（右对齐）
  • center（居中对齐）
  • space-between（两端对齐，元素之间的间隔相等）
  • space-around（每个元素的两侧间隔相等，所以元素之间的间隔比元素和容器之间的间隔大一倍）
• align-items：设置交叉轴上的对齐方式
  • flex-start（交叉轴的起点对齐）
  • flex-end（交叉轴的终点对齐）
  • center（交叉轴的中点对齐）
  • baseline（基线对齐，元素的第一行文字的基线对齐）
  • stretch（默认值，元素被拉伸以适应容器的高度）
• align-content：设置多行元素的对齐方式
  • flex-start（交叉轴的起点对齐）
  • flex-end（交叉轴的终点对齐）
  • center（交叉轴的中点对齐）
  • space-between（两端对齐，元素之间的间隔相等）
  • space-around（每个元素的两侧间隔相等，所以元素之间的间隔比元素和容器之间的间隔大一倍）
  • stretch（默认值，元素被拉伸以适应容器的高度）

2.元素属性

• order：设置元素的排列顺序，数值越小越靠前，默认值为0。
• flex-grow：设置元素的放大比例，默认值为0，如果容器有剩余空间，则元素会按照比例分配剩余空间。
• flex-shrink：设置元素的缩小比例，默认值为1，如果空间不足，元素会按照比例收缩。
• flex-basis：设置元素的基准大小，默认auto，自动计算元素大小，可以是固定值（如200px）或百分比（如50%）。
• flex：是flex-grow、flex-shrink、flex-basis的缩写，可以一次性设置这三个属性，如flex: 1 1 200px。
• align-self：设置元素在交叉轴上的对齐方式，取值与align-items相同，但只作用于单个元素，它会覆盖align-items属性。

使用容器属性和元素属性可以实现各种复杂的布局效果。