css的flex布局（css fixed布局）

## CSS 的 Flexbox 布局### 简介Flexbox，全称为 Flexible Box Layout Module，是 CSS 中的一种布局模块，它为网页布局提供了强大的灵活性和控制力。Flexbox 可以轻松实现元素的水平和垂直对齐、自动换行、调整顺序等操作，特别适合于构建复杂的页面布局以及响应式设计。### Flexbox 的核心概念Flexbox 布局的核心是将元素视为弹性容器和弹性项目。1.

弹性容器 (Flex Container):

应用 `display: flex` 或 `display: inline-flex` 的父元素。 2.

弹性项目 (Flex Item):

弹性容器的直接子元素。### Flexbox 属性Flexbox 布局主要通过设置弹性容器和弹性项目的属性来实现。#### 弹性容器的属性

主轴方向和排列方向:

`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`, `space-evenly`。

交叉轴对齐方式:

`align-items`: 定义弹性项目在交叉轴上的对齐方式，可选值包括 `flex-start`, `flex-end`, `center`, `baseline`, `stretch`。

`align-content`: 定义多根轴线的对齐方式，可选值与 `justify-content` 相同。

弹性流方向:

`flex-flow`: `flex-direction` 和 `flex-wrap` 的简写属性。#### 弹性项目的属性

弹性项目的排列顺序:

`order`: 定义弹性项目的排列顺序，数值越小，排列越靠前。

弹性项目的放大比例:

`flex-grow`: 定义弹性项目放大时占据剩余空间的比例。

弹性项目的缩小比例:

`flex-shrink`: 定义弹性项目缩小时所占空间的比例。

弹性项目的基准宽度/高度:

`flex-basis`: 定义弹性项目在主轴方向上的初始大小。

弹性项目的简写属性:

`flex`: `flex-grow`, `flex-shrink`, `flex-basis` 的简写属性。

交叉轴对齐方式:

`align-self`: 单独定义某个弹性项目在交叉轴上的对齐方式，可选值与 `align-items` 相同。### Flexbox 布局的应用Flexbox 布局可以应用于各种页面布局场景，例如：

水平居中:

```css.container {display: flex;justify-content: center;}```

垂直居中:

```css.container {display: flex;align-items: center;}```

等宽布局:

```css.container {display: flex;}.item {flex: 1;}```

响应式布局:

通过媒体查询和 Flexbox 属性的组合，可以轻松实现不同屏幕尺寸下的自适应布局。### 总结Flexbox 布局是 CSS 中一种非常强大且灵活的布局方式，它可以帮助开发者更轻松地创建各种复杂和响应式的网页布局。熟练掌握 Flexbox 布局的各种属性和应用场景，将大大提高网页开发的效率和质量。

CSS 的 Flexbox 布局

简介Flexbox，全称为 Flexible Box Layout Module，是 CSS 中的一种布局模块，它为网页布局提供了强大的灵活性和控制力。Flexbox 可以轻松实现元素的水平和垂直对齐、自动换行、调整顺序等操作，特别适合于构建复杂的页面布局以及响应式设计。

Flexbox 的核心概念Flexbox 布局的核心是将元素视为弹性容器和弹性项目。1. **弹性容器 (Flex Container):** 应用 `display: flex` 或 `display: inline-flex` 的父元素。 2. **弹性项目 (Flex Item):** 弹性容器的直接子元素。

Flexbox 属性Flexbox 布局主要通过设置弹性容器和弹性项目的属性来实现。

弹性容器的属性* **主轴方向和排列方向:*** `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`, `space-evenly`。 * **交叉轴对齐方式:*** `align-items`: 定义弹性项目在交叉轴上的对齐方式，可选值包括 `flex-start`, `flex-end`, `center`, `baseline`, `stretch`。* `align-content`: 定义多根轴线的对齐方式，可选值与 `justify-content` 相同。 * **弹性流方向:*** `flex-flow`: `flex-direction` 和 `flex-wrap` 的简写属性。

弹性项目的属性* **弹性项目的排列顺序:*** `order`: 定义弹性项目的排列顺序，数值越小，排列越靠前。 * **弹性项目的放大比例:*** `flex-grow`: 定义弹性项目放大时占据剩余空间的比例。 * **弹性项目的缩小比例:*** `flex-shrink`: 定义弹性项目缩小时所占空间的比例。 * **弹性项目的基准宽度/高度:*** `flex-basis`: 定义弹性项目在主轴方向上的初始大小。 * **弹性项目的简写属性:*** `flex`: `flex-grow`, `flex-shrink`, `flex-basis` 的简写属性。 * **交叉轴对齐方式:*** `align-self`: 单独定义某个弹性项目在交叉轴上的对齐方式，可选值与 `align-items` 相同。

Flexbox 布局的应用Flexbox 布局可以应用于各种页面布局场景，例如：* **水平居中:** ```css.container {display: flex;justify-content: center;}``` * **垂直居中:**```css.container {display: flex;align-items: center;}``` * **等宽布局:**```css.container {display: flex;}.item {flex: 1;}``` * **响应式布局:** 通过媒体查询和 Flexbox 属性的组合，可以轻松实现不同屏幕尺寸下的自适应布局。

总结Flexbox 布局是 CSS 中一种非常强大且灵活的布局方式，它可以帮助开发者更轻松地创建各种复杂和响应式的网页布局。熟练掌握 Flexbox 布局的各种属性和应用场景，将大大提高网页开发的效率和质量。