Flex布局阮一峰语法篇
Flexbox（Flexible Box）布局是一种CSS3引入的布局模式，旨在提供一种更有效的方式来布局、对齐和分配在容器中项目的空间，即使它们的大小未知或是动态变化的。本文将基于阮一峰老师的讲解，详细介绍Flex布局的语法和使用方法。
一、基本概念
- 容器（Container）：采用Flex布局的元素称为Flex容器，其子元素自动成为Flex项目（Flex Items）。
- 主轴（Main Axis）：默认水平方向，主要用来排列Flex项目。
- 交叉轴（Cross Axis）：与主轴垂直的方向，用于定义Flex项目的对齐方式。
- flex-direction属性：决定主轴的方向（row/row-reverse/column/column-reverse），从而改变交叉轴的方向。
二、容器的属性
display: flex; 或 display: inline-flex;
- flex：块级Flex容器。
- inline-flex：行内级Flex容器。
flex-direction
- 语法：flex-direction: row | row-reverse | column | column-reverse;
- 默认值：row
- 作用：设置主轴的方向。
flex-wrap
- 语法：flex-wrap: nowrap | wrap | wrap-reverse;
- 默认值：nowrap
- 作用：控制是否换行。
- nowrap：不换行。
- wrap：换行，第一行在上方。
- wrap-reverse：换行，第一行在下方。
flex-flow
- 语法：flex-flow: <flex-direction> || <flex-wrap>;
- 作用：flex-direction 和 flex-wrap 的简写形式。
justify-content
- 语法：justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly;
- 默认值：flex-start
- 作用：定义Flex项目在主轴上的对齐方式。
align-items
- 语法：align-items: stretch | flex-start | flex-end | center | baseline;
- 默认值：stretch
- 作用：定义Flex项目在交叉轴上的对齐方式。
align-content
- 语法：align-content: stretch | flex-start | flex-end | center | space-between | space-around;
- 默认值：stretch
- 作用：当有多行时，定义各行在交叉轴上的对齐方式。
三、项目的属性
order
- 语法：order: <integer>;
- 默认值：0
- 作用：定义Flex项目的排列顺序，数值越小越靠前。
flex-grow
- 语法：flex-grow: <number>;
- 默认值：0
- 作用：定义Flex项目的放大比例，默认为0，即如果存在剩余空间，也不放大。
flex-shrink
- 语法：flex-shrink: <number>;
- 默认值：1
- 作用：定义了Flex项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。
flex-basis
- 语法：flex-basis: <length> | auto;
- 默认值：auto
- 作用：在分配多余空间之前，项目占据的主轴空间（main size）。
flex
- 语法：flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
- 默认值：0 1 auto
- 作用：是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。该属性有两个快捷值：auto (1 1 auto) 和 none (0 0 auto)。
align-self
- 语法：align-self: auto | flex-start | flex-end | center | baseline | stretch;
- 默认值：auto
- 作用：允许单个Flex项目有与其他项目不同的对齐方式，可覆盖align-items属性。
四、示例代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Flex布局示例</title> <style> .container { display: flex; flex-direction: row; /* 主轴方向 */ flex-wrap: wrap; /* 换行 */ justify-content: space-between; /* 主轴对齐 */ align-items: center; /* 交叉轴对齐 */ height: 200px; border: 1px solid #ccc; } .item { background-color: lightblue; margin: 10px; padding: 20px; flex: 1 1 100px; /* 放大、缩小、基础大小 */ text-align: center; } .item:nth-child(2) { align-self: flex-end; /* 单个项目对齐 */ } </style> </head> <body> <div class="container"> <div class="item">Item 1</div> <div class="item">Item 2</div> <div class="item">Item 3</div> </div> </body> </html>在这个例子中，我们创建了一个Flex容器，并设置了它的方向和换行规则。然后，我们为每个子项（Flex项目）设置了一些基本的样式和对齐方式。通过调整这些属性，你可以轻松地实现各种复杂的布局需求。
