青少年编程与数学 02-005 移动Web编程基础 04课题、flex弹性布局

一、flex弹性布局
- - Flexbox的主要概念
  - Flexbox的常用属性
二、Flex常见布局
三、FLEX属性
- - 容器属性（应用于父元素）
  - 项目属性（应用于子元素）
四、display属性
五、flex-direction 属性
六、flex-wrap属性
七、justify-content属性
八、align-items属性
九、align-content属性
十、页面基本结构
十一、京东商城
十二、携程网
十三、order属性
十四、align-self属性
十五、应用示例
- - HTML
  - CSS (styles.css)

课题摘要:本文详细介绍了CSS Flexbox（弹性布局）模型，它允许容器内的项目动态调整大小和位置以适应不同屏幕尺寸。文章解释了Flexbox的主要概念，包括容器、项目、主轴、交叉轴等，并列举了常用属性如flex-direction、flex-wrap、justify-content、align-items和align-content。通过图片库居中布局、卡片布局、圣杯布局、经典导航栏布局和栅格布局等实例，展示了Flexbox在实际网页设计中的应用。文章还探讨了order和align-self属性，这些属性允许开发者控制项目的排列顺序和单个项目的对齐方式。最后，提供了一个移动端页面基本结构的示例，展示了如何使用Flexbox构建响应式设计。

一、flex弹性布局

Flexbox（弹性布局）是一种CSS布局模型，它允许容器内的项目（子元素）在不同屏幕尺寸和设备方向下动态调整大小和位置。Flexbox在处理一维布局（即单行或单列布局）时特别有用，它提供了一种更加高效的方式来对齐和分配容器内项目的空间，即使它们的大小是未知或动态变化的。

Flexbox的主要概念

容器（Flex Container）：
- 一个使用display: flex;或display: inline-flex;声明的元素，它将变为一个flex容器，其直接子元素将成为flex项目（flex items）。
项目（Flex Items）：
- 容器内的直接子元素，它们将按照flex布局的规则进行排列。
主轴（Main Axis）：
- 项目排列的方向，可以是水平（row）或垂直（column）。
交叉轴（Cross Axis）：
- 与主轴垂直的轴。
起点（Start）和终点（End）：
- 项目在主轴上的起始和结束位置。
中心（Center）：
- 项目在主轴或交叉轴上的中心位置。

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：定义多行项目在交叉轴上的对齐方式（flex-start | flex-end | center | space-between | space-around | stretch）。
项目属性：
- order：定义项目的排序顺序（数值越小越靠前）。
- flex-grow：定义项目在主轴上的放大比例。
- flex-shrink：定义项目在主轴上的缩小比例。
- flex-basis：定义项目在主轴上的初始大小。
- flex：flex-grow、flex-shrink和flex-basis的简写形式（flex: 1 表示 flex-grow: 1, flex-shrink: 1, flex-basis: 0%）。
- align-self：允许单个项目有与其他项目不同的对齐方式。

二、Flex常见布局

1. 图片库居中布局

使用Flexbox可以轻松实现图片库的水平和垂直居中对齐。通过设置justify-content和align-items属性，可以改变图片的对齐方式。例如，设置.gallery { justify-content: center; align-items: center; }可以让图片在水平和垂直方向上都居中。

2. 卡片布局

Flexbox非常适合用来创建卡片布局，如价格表模型。通过设置.cards { display: flex; flex-wrap: wrap; }，可以创建一个卡片布局，其中卡片会自动换行。

3. 圣杯布局

圣杯布局是一个经典的三栏布局，包括页头、主要内容区和页脚，以及左右两栏。使用Flexbox可以轻松实现，如下所示：

.HolyGrail {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
header, footer {
  height: 100px;
}
.HolyGrail-body {
  flex: 1;
  display: flex;
  justify-content: space-between;
}
.HolyGrail-nav, .HolyGrail-ads {
  flex: 0 0 100px;
}
.HolyGrail-content {
  flex: 1;
}
.HolyGrail-nav {
  order: -1;
}

在小屏幕设备上，通过媒体查询可以调整布局为垂直排列。

4. 经典导航栏布局

使用Flexbox可以创建一个经典的导航栏布局，如下所示：

header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.header-left, .header-right {
  display: flex;
  align-items: center;
}

这种布局可以确保导航栏的左侧和右侧内容垂直居中对齐。

5. 栅格布局

Flexbox也可以用来创建栅格布局。例如，创建一个基础的栅格布局，可以通过设置.grid { display: flex; }和.cell { flex: 1; }来实现等宽的栅格。

6. 居中布局

通过设置justify-content和align-items属性为center，可以轻松实现内容的水平和垂直居中：

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

这种布局对于创建居中的模态窗口或弹出框非常有用。

这些实例展示了Flexbox在实际网页设计中的应用，可以帮助您更好地理解和使用Flexbox布局。

三、FLEX属性

在移动端的FLEX布局中，容器属性和项目属性是两个不同的概念，它们分别用于设置容器（即父元素）和项目（即子元素）的布局行为。以下是一些常用的属性：

容器属性（应用于父元素）

display: 设置为 flex 或 inline-flex 来启用FLEX布局。

.container {
  display: flex; /* 或者 inline-flex */
}

flex-direction: 定义主轴的方向（即项目的排列方向）。
- row（默认值）：主轴为水平方向，起点在左端。
- row-reverse：主轴为水平方向，起点在右端。
- column：主轴为垂直方向，起点在上沿。
- column-reverse：主轴为垂直方向，起点在下沿。
```
.container {
  flex-direction: row | row-reverse | column | column-reverse;
}
```
flex-wrap: 定义如果一条轴线排不下，如何换行。
- nowrap（默认值）：不换行。
- wrap：换行，第一行在上方。
- wrap-reverse：换行，第一行在下方。
```
.container {
  flex-wrap: nowrap | wrap | wrap-reverse;
}
```
justify-content: 定义了项目在主轴上的对齐方式。
- flex-start（默认值）：项目紧贴容器的开头。
- flex-end：项目紧贴容器的结尾。
- center：项目位于容器的中间。
- space-between：项目之间的间隔相等。
- space-around：项目两边的间隔相等，项目之间的间隔是项目与边缘间隔的两倍。
- space-evenly：所有间隔相等。
```
.container {
  justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly;
}
```
align-items: 定义项目在交叉轴上的对齐方式。
- flex-start：项目紧贴容器的交叉轴的开头。
- flex-end：项目紧贴容器的交叉轴的结尾。
- center：项目位于容器的交叉轴的中间。
- baseline：项目以第一行文字的基线对齐。
- stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。
```
.container {
  align-items: flex-start | flex-end | center | baseline | stretch;
}
```
align-content: 定义多根轴线的分布方式（当有多个项目时）。
- flex-start：容器的交叉轴起点对齐。
- flex-end：容器的交叉轴终点对齐。
- center：容器的交叉轴中间对齐。
- space-between：轴线之间的间隔平均分布。
- space-around：轴线两边的间隔相等，轴线之间的间隔是轴线与边缘间隔的两倍。
- stretch（默认值）：轴线占满整个交叉轴。
```
.container {
  align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}
```

项目属性（应用于子元素）

order: 定义项目的排列顺序。数值越小，排列越靠前（默认为0）。
```
.item {
  order: <integer>;
}
```
flex-grow: 定义项目的放大比例（即当容器有剩余空间时，项目如何放大）。
```
.item {
  flex-grow: <number>; /* 默认为0 */
}
```
flex-shrink: 定义项目的缩小比例（即当空间不足时，项目如何缩小）。
```
.item {
  flex-shrink: <number>; /* 默认为1 */
}
```
flex-basis: 定义在分配多余空间之前，项目占据的主轴空间。
```
.item {
  flex-basis: <length> | auto; /* 默认为auto */
}
```

flex: 是 flex-grow, flex-shrink, 和 flex-basis 的简写，默认值为 0 1 auto。

.item {
  flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}

align-self: 允许单个项目有与其他项目不一样的交叉轴对齐方式。

.item {
  align-self: auto | flex-start | flex-end | center | baseline | stretch;
}

这些属性可以帮助你控制FLEX布局中项目的位置和大小，以及如何分配空间。

四、display属性

在移动端的FLEX布局中，display 属性用于指定一个元素应该生成的盒子类型，以及这个盒子内部的子元素如何布局。对于FLEX布局，display 属性需要设置为 flex 或 inline-flex。

使用 `display: flex;`

当你将一个容器元素的 display 属性设置为 flex 时，这个容器会变成一个块级弹性容器（flex container），它的直接子元素会成为弹性项目（flex items），并且这些子元素会沿着主轴排列。

.container {
  display: flex;
}

使用 `display: inline-flex;`

inline-flex 与 flex 类似，但它生成的是一个行内块级弹性容器（inline-flex container）。这意味着容器会在行内元素中显示，而不是像 flex 那样占据整行。

.container {
  display: inline-flex;
}

区别

块级弹性容器（flex container）：使用 display: flex; 时，容器会表现得像一个块级元素，它会占据整行空间。
行内块级弹性容器（inline-flex container）：使用 display: inline-flex; 时，容器会表现得像一个行内块级元素，它不会占据整行空间，而是与其他行内元素并排显示。

示例

<!-- HTML -->
<div class="container">
  <div class="item">Item 1</div>
  <div class="item">Item 2</div>
  <div class="item">Item 3</div>
</div>

/* CSS */
.container {
  display: flex; /* 或者 inline-flex */
  border: 1px solid #000;
  padding: 10px;
}

.item {
  padding: 10px;
  margin: 5px;
  border: 1px solid #ccc;
}

在这个例子中，.container 被设置为一个弹性容器，其子元素 .item 将会根据FLEX布局的规则进行排列。

总结来说，display 属性是启用FLEX布局的关键，它决定了容器的类型以及子元素的布局方式。

五、flex-direction 属性

在移动端FLEX布局中，flex-direction 属性决定了弹性容器（flex container）中弹性项目（flex items）的排列方向。这个属性定义了主轴的方向，即弹性项目沿着哪个轴排列。flex-direction 有四个可能的值：

row（默认值）：主轴水平方向，从左到右排列。
row-reverse：主轴水平方向，从右到左排列。
column：主轴垂直方向，从上到下排列。
column-reverse：主轴垂直方向，从下到上排列。

使用方法

你可以通过在弹性容器上设置 flex-direction 属性来改变弹性项目的排列方向。例如：

.container {
  display: flex;
  flex-direction: row | row-reverse | column | column-reverse;
}

示例

假设你有以下HTML结构：

<div class="container">
  <div class="item">Item 1</div>
  <div class="item">Item 2</div>
  <div class="item">Item 3</div>
</div>

你可以使用不同的 flex-direction 值来改变这些项目的排列方向：

/* 默认水平排列（从左到右） */
.container {
  display: flex;
  flex-direction: row;
}

/* 水平排列（从右到左） */
.container-reverse {
  display: flex;
  flex-direction: row-reverse;
}

/* 垂直排列（从上到下） */
.container-column {
  display: flex;
  flex-direction: column;
}

/* 垂直排列（从下到上） */
.container-column-reverse {
  display: flex;
  flex-direction: column-reverse;
}

视觉效果

row：项目从左到右水平排列。
row-reverse：项目从右到左水平排列。
column：项目从上到下垂直排列。
column-reverse：项目从下到上垂直排列。

这个属性对于响应式设计特别有用，因为它允许你根据屏幕尺寸或方向改变布局方向。例如，你可以在小屏幕上使用 column 排列，在大屏幕上使用 row 排列，以优化用户体验。

六、flex-wrap属性

在移动端FLEX布局中，flex-wrap 属性用于指定弹性容器（flex container）中的弹性项目（flex items）是否应该在需要时换行。默认情况下，弹性项目不会换行，它们会尽可能地在一行或一列中排列。flex-wrap 属性可以取以下几个值：

nowrap（默认值）：弹性项目不会换行，它们会尽可能地在一行或一列中排列，即使容器无法容纳所有项目。
wrap：弹性项目在需要时会换行，第一行或第一列在上方或左侧。
wrap-reverse：弹性项目在需要时会换行，第一行或第一列在下方或右侧。

使用方法

你可以通过在弹性容器上设置 flex-wrap 属性来控制弹性项目的换行行为。例如：

.container {
  display: flex;
  flex-wrap: nowrap | wrap | wrap-reverse;
}

示例

假设你有以下HTML结构：

<div class="container">
  <div class="item">Item 1</div>
  <div class="item">Item 2</div>
  <div class="item">Item 3</div>
  <!-- 更多项 -->
</div>

你可以使用不同的 flex-wrap 值来控制这些项目的换行：

/* 不换行 */
.container-nowrap {
  display: flex;
  flex-wrap: nowrap;
}

/* 换行 */
.container-wrap {
  display: flex;
  flex-wrap: wrap;
}

/* 反向换行 */
.container-wrap-reverse {
  display: flex;
  flex-wrap: wrap-reverse;
}

视觉效果

nowrap：所有项目都在一行或一列中排列，即使容器无法容纳所有项目。
wrap：项目在需要时会换行，第一行或第一列在上方或左侧。
wrap-reverse：项目在需要时会换行，第一行或第一列在下方或右侧。

响应式设计中的应用

flex-wrap 属性在响应式设计中非常有用，因为它允许布局在不同屏幕尺寸下自适应。例如，你可以设置在小屏幕上项目换行，而在大屏幕上项目不换行，以优化不同设备上的显示效果。

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

这样设置后，当容器的宽度不足以容纳所有项目时，项目会自动换行，以适应不同的屏幕尺寸。

七、justify-content属性

justify-content 属性在FLEX布局中用于调整弹性容器（flex container）中的弹性项目（flex items）在主轴（main axis）上的对齐方式。这个属性影响项目之间的间隔以及项目与容器边缘之间的间隔。

justify-content 属性可以取以下几个值：

flex-start：项目紧贴容器的起始端排列。
flex-end：项目紧贴容器的结束端排列。
center：项目在容器中居中排列。
space-between：项目之间的间隔相等，两端的项目分别贴靠在容器的两端。
space-around：项目之间的间隔相等，但项目与容器边缘的间隔是项目之间间隔的一半。
space-evenly：项目与项目之间以及项目与容器边缘的间隔都相等。

使用方法

你可以通过在弹性容器上设置 justify-content 属性来控制弹性项目在主轴上的对齐方式。例如：

.container {
  display: flex;
  justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly;
}

示例

假设你有以下HTML结构：

<div class="container">
  <div class="item">Item 1</div>
  <div class="item">Item 2</div>
  <div class="item">Item 3</div>
</div>

你可以使用不同的 justify-content 值来控制这些项目的对齐方式：

/* 项目紧贴容器的起始端 */
.container-flex-start {
  display: flex;
  justify-content: flex-start;
}

/* 项目紧贴容器的结束端 */
.container-flex-end {
  display: flex;
  justify-content: flex-end;
}

/* 项目在容器中居中 */
.container-center {
  display: flex;
  justify-content: center;
}

/* 项目之间的间隔相等，两端贴靠容器 */
.container-space-between {
  display: flex;
  justify-content: space-between;
}

/* 项目之间的间隔相等，边缘间隔是一半 */
.container-space-around {
  display: flex;
  justify-content: space-around;
}

/* 所有间隔都相等 */
.container-space-evenly {
  display: flex;
  justify-content: space-evenly;
}

视觉效果

flex-start：所有项目靠左（或顶部，如果是垂直排列）排列。
flex-end：所有项目靠右（或底部，如果是垂直排列）排列。
center：所有项目在容器中居中。
space-between：项目均匀分布在容器中，两端对齐。
space-around：项目之间有间隔，但项目与容器边缘的间隔是项目之间间隔的一半。
space-evenly：项目之间以及项目与容器边缘的间隔都相等。

justify-content 属性提供了灵活的方式来控制项目在容器中的水平或垂直对齐，这对于创建响应式和动态的用户界面非常有用。

八、align-items属性

align-items 属性在FLEX布局中用于调整弹性容器（flex container）中的弹性项目（flex items）在交叉轴（cross axis）上的对齐方式。这个属性影响项目与容器交叉轴方向上的边缘之间的间隔。

align-items 属性可以取以下几个值：

flex-start：项目紧贴容器的交叉轴的起始端。
flex-end：项目紧贴容器的交叉轴的结束端。
center：项目在容器的交叉轴上居中。
baseline（基线）：项目在容器的交叉轴上以文本基线对齐。
stretch（默认值）：如果项目未设置高度或设为auto，项目将伸展以占据容器的整个高度。

使用方法

你可以通过在弹性容器上设置 align-items 属性来控制弹性项目在交叉轴上的对齐方式。例如：

.container {
  display: flex;
  align-items: flex-start | flex-end | center | baseline | stretch;
}

示例

假设你有以下HTML结构：

<div class="container">
  <div class="item">Item 1</div>
  <div class="item">Item 2</div>
  <div class="item">Item 3</div>
</div>

你可以使用不同的 align-items 值来控制这些项目的对齐方式：

/* 项目紧贴容器的交叉轴起始端 */
.container-flex-start {
  display: flex;
  align-items: flex-start;
}

/* 项目紧贴容器的交叉轴结束端 */
.container-flex-end {
  display: flex;
  align-items: flex-end;
}

/* 项目在容器的交叉轴上居中 */
.container-center {
  display: flex;
  align-items: center;
}

/* 项目在容器的交叉轴上以文本基线对齐 */
.container-baseline {
  display: flex;
  align-items: baseline;
}

/* 项目伸展以占据容器的整个高度 */
.container-stretch {
  display: flex;
  align-items: stretch;
}

视觉效果

flex-start：所有项目在容器的交叉轴起始端对齐。
flex-end：所有项目在容器的交叉轴结束端对齐。
center：所有项目在容器的交叉轴上居中对齐。
baseline：所有项目在容器的交叉轴上以文本基线对齐。
stretch：所有项目伸展以填满容器的高度，如果项目没有设置高度或者高度设置为auto。

align-items 属性对于控制项目在垂直方向上的对齐非常有用，尤其是在项目高度不一致时，可以通过这个属性来统一项目在交叉轴上的对齐方式。

九、align-content属性

align-content 属性在CSS的弹性盒子布局（flexbox）中用于控制多行弹性项目在交叉轴（cross axis）上的对齐方式。这个属性仅在有多个弹性项目行时生效，即当flex-wrap属性设置为wrap或wrap-reverse时。以下是align-content属性的使用方法和各个值的含义：

使用方法

你可以通过在弹性容器上设置align-content属性来控制多行弹性项目在交叉轴上的对齐方式。例如：

.container {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}

属性值及其描述

stretch：默认值。项目被拉伸以适应容器的高度，如果项目未设置高度或设为auto。
center：项目位于容器的中心。
flex-start：项目位于容器的开头。
flex-end：项目位于容器的结尾。
space-between：项目在各行之间留有空白的容器内，第一行与容器的起始端对齐，最后一行与容器的结束端对齐。
space-around：项目在各行之前、之间、之后都留有空白的容器内，每行周围的空间相等。

注意事项

align-content属性仅在有多行弹性项目时生效，即flex-wrap属性不是设置为nowrap时。
align-content与justify-content属性类似，但是align-content作用于交叉轴，而justify-content作用于主轴。

通过合理使用align-content属性，你可以控制弹性容器内多行项目的空间分布，实现更加灵活的布局设计。

十、页面基本结构

在实际应用中，移动端页面使用FLEX布局的基本结构通常涉及到HTML和CSS的组织方式，以及如何将FLEX布局应用于页面的不同部分。以下是一个典型的移动端页面结构，使用FLEX布局来实现响应式设计：

HTML结构

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Mobile Flex Layout</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <header class="header">
        <div class="logo">Logo</div>
        <nav class="navigation">
            <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">About</a></li>
                <li><a href="#">Services</a></li>
                <li><a href="#">Contact</a></li>
            </ul>
        </nav>
    </header>
    
    <main class="main-content">
        <section class="feature">
            <h1>Welcome to Our Service</h1>
            <p>This is a feature section of our mobile page.</p>
        </section>
        <div class="content-grid">
            <div class="grid-item">Item 1</div>
            <div class="grid-item">Item 2</div>
            <div class="grid-item">Item 3</div>
            <!-- More grid items -->
        </div>
    </main>
    
    <footer class="footer">
        <p>Copyright © 2024 by Company Name</p>
    </footer>
</body>
</html>

CSS样式

/* styles.css */
body, h1, p {
    margin: 0;
    padding: 0;
}

.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    background-color: #333;
    color: white;
}

.logo {
    font-size: 1.5em;
}

.navigation ul {
    list-style: none;
    display: flex;
    gap: 20px;
}

.navigation a {
    text-decoration: none;
    color: white;
}

.main-content {
    padding: 20px;
}

.feature {
    text-align: center;
}

.content-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.grid-item {
    flex: 1 1 200px; /* grow, shrink, basis */
    padding: 20px;
    border: 1px solid #ccc;
}

.footer {
    display: flex;
    justify-content: center;
    padding: 10px;
    background-color: #333;
    color: white;
}

说明

头部（Header）：通常包含一个logo和一个导航菜单。这里使用display: flex来水平排列logo和导航菜单，justify-content: space-between确保它们分别靠近容器的两端。
主内容区域（Main Content）：可以包含多个部分，如特色区域（Feature）和其他内容。特色区域使用text-align: center来居中文本。
内容网格（Content Grid）：使用display: flex和flex-wrap: wrap来创建一个响应式的网格布局，其中的项目（Grid Items）可以根据屏幕大小自动换行。
页脚（Footer）：通常包含版权信息，使用display: flex和justify-content: center来水平居中内容。

这个结构利用FLEX布局提供了一个响应式的移动端页面设计，可以根据不同屏幕尺寸进行适配。

十一、京东商城

以国内大型电商平台京东（JD.com）的移动端网站首页为例，我们可以分析其使用FLEX布局的基本结构。京东移动端网站在设计上充分利用了FLEX布局的灵活性，以适应不同屏幕尺寸和提供良好的用户体验。

HTML结构

京东移动端首页的HTML结构大致如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>京东首页</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <header class="header">
        <!-- 顶部导航 -->
    </header>
    
    <main class="main-content">
        <!-- 轮播图 -->
        <section class="carousel">
            <!-- 轮播项 -->
        </section>
        
        <!-- 商品分类 -->
        <section class="product-categories">
            <!-- 分类项 -->
        </section>
        
        <!-- 推荐商品 -->
        <section class="recommended-products">
            <!-- 商品项 -->
        </section>
    </main>
    
    <footer class="footer">
        <!-- 底部导航 -->
    </footer>
</body>
</html>

CSS样式

京东移动端首页的CSS样式使用FLEX布局来实现响应式设计：

/* 头部 */
.header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px;
    background-color: #f2f2f2;
}

/* 轮播图 */
.carousel {
    display: flex;
    overflow: hidden;
}

/* 商品分类 */
.product-categories {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.product-categories .category-item {
    flex: 1 1 20%; /* 每个分类项占据20%的宽度 */
    text-align: center;
    padding: 10px;
}

/* 推荐商品 */
.recommended-products {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.recommended-products .product-item {
    flex: 1 1 48%; /* 每个商品项占据48%的宽度 */
    margin: 1%;
    border: 1px solid #ddd;
    padding: 10px;
}

/* 底部导航 */
.footer {
    display: flex;
    justify-content: space-around;
    background-color: #333;
    color: white;
}

FLEX布局的应用

头部（Header）：使用display: flex和justify-content: space-between来分布顶部导航的元素，使得标题和用户相关操作（如搜索、购物车）分别对齐到容器的两端。
轮播图（Carousel）：通过display: flex和overflow: hidden实现轮播图的布局，使得图片水平滚动显示。
商品分类（Product Categories）：使用display: flex和flex-wrap: wrap来创建一个响应式的网格布局，分类项可以根据屏幕大小自动换行。
推荐商品（Recommended Products）：同样使用display: flex和flex-wrap: wrap来布局推荐商品，使得商品可以根据屏幕大小自动排列和换行。
底部导航（Footer）：使用display: flex和justify-content: space-around来水平分布底部导航的链接，使得它们均匀分布在容器中。

京东移动端网站通过这些FLEX布局的应用，实现了一个清晰、响应式的首页布局，提供了良好的用户体验。

十二、携程网

根据搜索结果，以下是携程网移动端首页使用FLEX布局的一个详细代码示例：

HTML结构

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>携程在手，说走就走</title>
    <link rel="stylesheet" href="css/normalize.css" />
    <link rel="stylesheet" href="css/index.css">
</head>
<body>
    <!-- 搜索模块 -->
    <div class="search-index">
        <div class="search"></div>
        <a href="#">搜索</a>
    </div>
    
    <!-- 主导航模块 -->
    <nav class="local-nav">
        <ul>
            <li><a href="#">景点·玩乐</a></li>
            <li><a href="#">酒店</a></li>
            <li><a href="#">机票</a></li>
            <!-- 更多导航项 -->
        </ul>
    </nav>
    
    <!-- 内容模块 -->
    <div class="content">
        <!-- 这里可以放置各种内容模块，如广告、推荐等 -->
    </div>
    
    <!-- 底部导航栏模块 -->
    <div class="footer-nav">
        <!-- 底部导航链接 -->
    </div>
</body>
</html>

CSS样式

/* 重置和初始化样式 */
body {
    max-width: 540px;
    min-width: 320px;
    margin: 0 auto;
    font: normal 14px/1.5 "Microsoft Yahei";
    color: #000;
    background-color: #f2f2f2;
    overflow-x: hidden;
}

/* 搜索模块 */
.search-index {
    display: flex;
    position: fixed;
    left: 50%;
    top: 0;
    transform: translateX(-50%);
    width: 100%;
    height: 44px;
    border-bottom: 1px solid #ccc;
    background-color: #f6f6f6;
}

.search-index .search {
    flex: 1;
    height: 26px;
    border: 1px solid #ccc;
    margin: 7px 10px;
    padding-left: 25px;
    font-size: 12px;
    color: #666;
    line-height: 24px;
    border-radius: 5px;
}

/* 主导航模块 */
.local-nav {
    display: flex;
    height: 64px;
    background-color: #fff;
    margin: 3px;
    border-radius: 8px;
}

.local-nav li {
    flex: 1;
}

.local-nav li a {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 12px;
    color: #222;
}

/* 内容模块 */
.content {
    /* 内容模块样式 */
}

/* 底部导航栏模块 */
.footer-nav {
    /* 底部导航栏样式 */
}

说明

搜索模块（Search Module）：使用display: flex来水平排列搜索框和搜索按钮，固定在页面顶部。
主导航模块（Main Navigation Module）：使用display: flex来创建一个水平的导航条，每个导航项占据相等的空间。
内容模块（Content Module）：这部分可以包含多个使用FLEX布局的子模块，如广告横幅、推荐内容等。
底部导航栏模块（Footer Navigation Module）：通常固定在页面底部，使用display: flex来水平排列底部导航链接。

这个结构利用FLEX布局提供了一个清晰、响应式的移动端首页布局，提供了良好的用户体验。

十三、order属性

在FLEX布局中，order 属性用于控制弹性项目（flex items）的排列顺序。order 属性接受一个整数作为值，数字越小的项目会排在越前面。默认情况下，所有项目的 order 值都是 0。

使用方法

你可以通过在弹性项目的样式中添加 order 属性来指定其顺序。例如：

.flex-item {
  order: <integer>;
}

这里的 <integer> 是一个整数值，可以是正数、负数或零。

示例

假设你有以下HTML结构：

<div class="flex-container">
  <div class="flex-item">Item 1</div>
  <div class="flex-item">Item 2</div>
  <div class="flex-item">Item 3</div>
</div>

你可以使用 order 属性来改变这些项目的排列顺序：

.flex-item {
  order: 1; /* 默认值，如果没有指定，项目将按照HTML中的顺序排列 */
}

/* 将Item 2放在第一个位置 */
.flex-item:nth-child(2) {
  order: -1;
}

/* 将Item 3放在最后一个位置 */
.flex-item:nth-child(3) {
  order: 2;
}

视觉效果

没有指定 order 属性的项目将按照它们在HTML中的顺序排列。
Item 2 被指定了 order: -1;，因此它将排在最前面。
Item 3 被指定了 order: 2;，因此它将排到最后面。
Item 1 保持默认的 order: 0;，所以它将排在中间。

order 属性提供了一种灵活的方式来控制项目在FLEX容器中的顺序，这在需要根据内容的重要性或视觉需求调整项目顺序时非常有用。

十四、align-self属性

align-self 属性在FLEX布局中用于设置单个弹性项目（flex item）在交叉轴（cross axis）上的对齐方式，这允许你覆盖弹性容器（flex container）上 align-items 属性对某个特定项目的影响。align-self 属性可以取以下值：

auto：浏览器会自动应用来自父元素的 align-items 属性值。
flex-start：项目会向交叉轴的起始端对齐。
flex-end：项目会向交叉轴的结束端对齐。
center：项目会在交叉轴上居中对齐。
baseline（基线）：项目会根据文本基线对齐。
stretch：项目会被拉伸以填满容器在交叉轴上的空间（如果项目没有设置高度或高度设置为 auto）。

使用方法

你可以通过在弹性项目上设置 align-self 属性来控制单个项目的对齐方式。例如：

.flex-item {
  align-self: auto | flex-start | flex-end | center | baseline | stretch;
}

示例

假设你有以下HTML结构：

<div class="flex-container">
  <div class="flex-item">Item 1</div>
  <div class="flex-item">Item 2</div>
  <div class="flex-item special-item">Item 3</div>
</div>

你可以使用 align-self 属性来改变特定项目的对齐方式：

.flex-container {
  display: flex;
  align-items: center; /* 默认所有项目在交叉轴上居中对齐 */
}

.flex-item {
  /* 所有项目的基本样式 */
}

.special-item {
  align-self: flex-start; /* 只有这个项目会应用这个对齐方式 */
}

视觉效果

所有项目默认会根据 .flex-container 上的 align-items: center; 在交叉轴上居中对齐。
Item 3（.special-item）由于设置了 align-self: flex-start;，它会在交叉轴的起始端对齐，与其他项目不同。

align-self 属性提供了对单个项目对齐方式的精细控制，这在需要对特定项目进行特殊布局处理时非常有用。

十五、应用示例

使用FLEX布局来构建一个基本的页面结构，包括头部、导航栏、主要内容区域和页脚。这个示例包含了HTML和CSS代码。

HTML

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>移动端FLEX布局示例</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <!-- 头部 -->
    <header class="header">
        <div class="logo">Logo</div>
        <button class="menu-toggle">☰ Menu</button>
    </header>
    
    <!-- 导航栏 -->
    <nav class="nav">
        <ul>
            <li><a href="#">首页</a></li>
            <li><a href="#">产品</a></li>
            <li><a href="#">关于我们</a></li>
            <li><a href="#">联系方式</a></li>
        </ul>
    </nav>
    
    <!-- 主要内容区域 -->
    <main class="main-content">
        <section class="feature">
            <h1>欢迎来到我们的网站</h1>
            <p>这里是一些特色内容。</p>
        </section>
        <div class="content-grid">
            <div class="grid-item">内容1</div>
            <div class="grid-item">内容2</div>
            <div class="grid-item">内容3</div>
            <!-- 更多内容项 -->
        </div>
    </main>
    
    <!-- 页脚 -->
    <footer class="footer">
        <div class="footer-links">
            <p>版权所有 © 2024</p>
            <ul>
                <li><a href="#">隐私政策</a></li>
                <li><a href="#">用户协议</a></li>
                <li><a href="#">帮助中心</a></li>
                <li><a href="#">常见问题</a></li>
            </ul>
        </div>
        <div class="social-media">
            <a href="#" class="social-icon"><img src="icons/facebook.svg" alt="Facebook"></a>
            <a href="#" class="social-icon"><img src="icons/twitter.svg" alt="Twitter"></a>
            <a href="#" class="social-icon"><img src="icons/instagram.svg" alt="Instagram"></a>
        </div>
    </footer>
</body>
</html>

CSS (styles.css)

/* 基础样式重置 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Arial', sans-serif;
}

/* 头部样式 */
.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    background-color: #333;
    color: white;
}

.logo {
    font-size: 1.5em;
}

.menu-toggle {
    display: none; /* 移动端默认不显示菜单按钮 */
    background: none;
    border: none;
    color: white;
    font-size: 1.5em;
    cursor: pointer;
}

/* 导航栏样式 */
.nav {
    display: flex;
    justify-content: center;
    background-color: #f4f4f4;
}

.nav ul {
    list-style: none;
    display: flex;
}

.nav li {
    padding: 10px 20px;
}

.nav a {
    text-decoration: none;
    color: #333;
    font-weight: bold;
}

/* 主要内容区域样式 */
.main-content {
    padding: 20px;
}

.feature {
    text-align: center;
}

.content-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
}

.grid-item {
    flex: 1 1 200px;
    margin: 10px;
    padding: 20px;
    border: 1px solid #ccc;
    text-align: center;
}

/* 页脚样式 */
.footer {
    display: flex;
    justify-content: space-between;
    padding: 10px;
    background-color: #333;
    color: white;
}

.footer-links ul {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.footer-links a {
    text-decoration: none;
    color: white;
}

.social-media {
    display: flex;
    gap: 10px;
}

.social-icon img {
    width: 24px;
    height: 24px;
}

/* 响应式布局 */
@media (max-width: 768px) {
    .menu-toggle {
        display: block; /* 在小屏幕设备上显示菜单按钮 */
    }

    .nav ul {
        flex-direction: column;
        width: 100%;
    }

    .nav li {
        text-align: center;
        border-bottom: 1px solid #ddd;
    }
}

在这个示例中，页脚区域被分为两个部分：footer-links 和 social-media。footer-links 部分包含了一些常用的功能链接，如隐私政策、用户协议、帮助中心和常见问题。social-media 部分包含了社交媒体图标，用户可以点击这些图标跳转到相应的社交媒体页面。

请注意，你需要将 icons/facebook.svg、icons/twitter.svg 和 icons/instagram.svg 替换为你自己的社交媒体图标文件路径。

青少年编程与数学 02-005 移动Web编程基础 04课题、flex弹性布局

一、flex弹性布局

Flexbox的主要概念

Flexbox的常用属性

二、Flex常见布局

1. 图片库居中布局

2. 卡片布局

3. 圣杯布局

4. 经典导航栏布局

5. 栅格布局

6. 居中布局

三、FLEX属性

容器属性（应用于父元素）

项目属性（应用于子元素）

四、display属性

使用 display: flex;

使用 display: inline-flex;

区别

示例

五、flex-direction 属性

使用方法

示例

视觉效果

六、flex-wrap属性

使用方法

示例

视觉效果

响应式设计中的应用

七、justify-content属性

使用方法

示例

视觉效果

八、align-items属性

使用方法

示例

视觉效果

九、align-content属性

使用方法

属性值及其描述

注意事项

十、页面基本结构

HTML结构

CSS样式

说明

十一、京东商城

HTML结构

CSS样式

FLEX布局的应用

十二、携程网

HTML结构

CSS样式

说明

十三、order属性

使用方法

示例

视觉效果

十四、align-self属性

使用方法

示例

视觉效果

十五、应用示例

HTML

CSS (styles.css)

Latest comments

使用 `display: flex;`

使用 `display: inline-flex;`