深度探索flex布局父元素属性，拥抱布局自由

前端

2023-12-05 08:16:38

深入探究 Flex 布局父元素属性

Flex 布局是一种强大的工具，可用于创建响应式、美观的网页布局。上节课，我们介绍了 Flex 布局的基本概念和几个示例。今天，我们将深入探究 Flex 布局父元素的属性，让您全面掌握此布局技术。

Flex 元素的排列方向：flex-direction

flex-direction 属性决定了 Flex 元素在父元素中的排列方向。它可以采用四个值：

row (默认) ：水平排列，从左到右
row-reverse ：水平排列，从右到左
column ：垂直排列，从上到下
column-reverse ：垂直排列，从下到上

Flex 元素是否换行：flex-wrap

flex-wrap 属性决定了 Flex 元素是否在达到父元素边界时换行。它可以采用三个值：

nowrap (默认) ：元素不换行
wrap ：元素换行
wrap-reverse ：元素从右向左换行

flex-flow：同时指定方向和换行

flex-flow 属性可以同时指定 flex-direction 和 flex-wrap 属性。它简化了代码并减少了重复，例如：

.container {
  display: flex;
  flex-flow: row wrap;
}

这表示元素水平排列并允许换行。

Flex 元素的水平对齐：justify-content

justify-content 属性控制 Flex 元素在父元素内的水平对齐方式。它可以采用五个值：

flex-start (默认) ：左对齐
flex-end ：右对齐
center ：居中
space-between ：均匀分布，两端对齐
space-around ：均匀分布，两端和中间对齐

Flex 元素的垂直对齐：align-items

align-items 属性控制 Flex 元素在父元素内的垂直对齐方式。它可以采用五个值：

flex-start (默认) ：顶部对齐
flex-end ：底部对齐
center ：垂直居中
stretch ：拉伸元素以填满父元素高度
baseline ：根据文本基线对齐

多行 Flex 元素的垂直对齐：align-content

align-content 属性控制多行 Flex 元素在父元素内的垂直对齐方式。它可以采用五个值：

flex-start (默认) ：顶部对齐
flex-end ：底部对齐
center ：垂直居中
space-between ：均匀分布，两端对齐
space-around ：均匀分布，两端和中间对齐

代码示例

/* 水平排列，不换行，左对齐 */
.container {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-start;
}

/* 垂直排列，换行，右对齐 */
.container {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: flex-end;
}