flex 布局属性有哪些？_flex居右-优快云博客

一、容器属性（父元素设置）

设置父容器为 Flex 布局后，子元素自动成为 Flex 布局

1. display

/* 定义容器的 flex 布局 */
.container {
  display: flex;       /* 块级 flex 容器 */
  display: inline-flex; /* 行内 flex 容器 */
}

2. flex-direction

/* 定义主轴方向 */
.container {
  flex-direction: row | row-reverse | column | column-reverse;
}

row：默认，水平排列（左到右）
row-reverse：反向水平排列
column：垂直排列（上到下）
column-reverse：反向垂直排列

3. flex-wrap

/* 定义是否允许换行 */
.container {
  flex-wrap：nowrap; // （默认）：不换行，项目可能被压缩
  flex-wrap: wrap;  // 换行，新行在下方
  flex-wrap: wrap-reverse;  // 换行，新行在上方
}

4. flex-flow

flex-direction 和 flex-wrap 的简写

.container {
  flex-flow: row wrap; /* 方向为行，允许换行 */
}

5. justify-content

/* 定义主轴上的对齐方式 */
.container {
  justify-content: flex-start; // 默认，左对齐
}

flex-end ：尾端对齐。
center ：居中对齐。
space-between ：两端对齐，项目间隔相等。
space-around ：项目两侧间隔相等（视觉上间隔不相等），只有 flex 元素之间的空间是相等的
space-evenly ：平均对齐，不靠着容器壁，剩余空间平分。即 flex 元素之间和flex元素与容器的空间都是相等的

6. align-items

/* 定义项目在交叉轴上的对齐方式 */
.container {
  align-items: stretch | flex-start | flex-end | center | baseline;
}

stretch （默认）：拉伸填满容器高度。
center ：垂直居中。

7. align-content

/* 定义 多行 Flex 项目在交叉轴上的对齐方式（单行无效） */
.container {
  align-content: stretch | flex-start | flex-end | center | space-between | space-around;
}

二、子元素设置

1. order

/* 定义项目的排列顺序，数值越小越靠前（默认 0） */
.item {
  order: 5; /* 数值可以是正数或负数 */
}

2. flex-grow

/* 定义项目的放大比例（默认 0，即不放大） */
.item {
  flex-grow: 2; /* 剩余空间按比例分配 */
}

3. flex-shrink

/* 定义项目的缩小比例（默认 1，即空间不足时缩小） */
.item {
  flex-shrink: 0; /* 禁止缩小 */
}

4. flex-basis

/* 定义项目在分配多余空间之前的初始大小（类似 width） */
.item {
  flex-basis: 200px | auto; /* 默认 auto */
}

5. flex

/* flex-grow, flex-shrink, flex-basis 的简写（推荐优先使用） */
.item {
  flex: 1 0 20px; // 顺序：grow | shrink | basis
  flex: auto;     // 等价于 1 1 auto
  flex：none;     // 等价于 0 0 auto  
}

6. align-self

/* 允许单个项目与其他项目不同的对齐方式（覆盖 align-items） */
.item {
  align-self: auto | stretch | flex-start | flex-end | center | baseline;
}

三、附加属性

gap / row-gap / column-gap

/* 定义项目之间的间距（类似网格布局的间隔）*/
.container {
  gap: 10px;          /* 行和列的间距均为 10px */
  row-gap: 20px;      /* 行间距 */
  column-gap: 30px;   /* 列间距 */
}

四、典型场景

1. 水平居中

.container {
  display: flex;
  justify-content: center;
  align-items: center;
}

2. 两栏布局

左侧固定，右侧自适应

.left {
  flex: 0 0 200px; 
}
.right {
  flex: 1; 
}