当前位置：首页 > news >正文

【微信小程序开发】微信小程序、大前端之flex布局方式详细解析

news 2025/9/14 17:39:15

在这里插入图片描述

✨✨ 欢迎大家来到景天科技苑✨✨

🎈🎈 养成好习惯，先赞后看哦~🎈🎈

🏆 作者简介：景天科技苑
🏆《头衔》：大厂架构师，华为云开发者社区专家博主，阿里云开发者社区专家博主，CSDN全栈领域优质创作者，掘金优秀博主，51CTO博客专家等。
🏆《博客》：Python全栈，前后端开发，小程序开发，人工智能，js逆向，App逆向，网络系统安全，数据分析，Django，fastapi，flask等框架，linux，shell脚本等实操经验，网站搭建，数据库等分享。

所属的专栏：微信小程序开发零基础教学，难点与应用实战总结
景天的主页：景天科技苑

文章目录

flex布局
- 1.什么是Flex布局
- 2.flex布局的好处
- 3.flex布局中的概念
容器样式属性
- 1.flex-direction
- - 有4个参数值（如下图）
  - 强调
- 2.flex-wrap
- 3.flex-flow
- 4.justify-content
- - 1.justify-content: flex-start(左对齐:默认值)
  - 2.justify-content: flex-end;右对齐
  - 3.justify-content: center; 居中
  - 4.justify-content: space-between;两端对齐，项目之间的间隔都相等
  - 5.justify-content: space-around;每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍
  - 6.justify-content: space-evenly;项目与项目之间，项目与边框之间的间隔都相等
- 5.align-items
- - 1.align-items:flex-start;交叉轴的起点对齐
  - 2.align-items:flex-end;交叉轴的终点对齐
  - 3.align-items:center;交叉轴的中点对齐
  - 4.align-items:baseline;项目的第一行文字的基线对齐
  - 5.align-items:stretch;（默认值）如果项目未设置高度或设为 auto，将占满整个容器的高度
- 6.align-content属性
- - 1.flex-start：与交叉轴的起点对齐
  - 2.flex-end：与交叉轴的终点对齐
  - 3.center：与交叉轴的中点对齐
  - 4.space-between：与交叉轴两端对齐，轴线之间的间隔平均分布
  - 5.space-around：每根轴线两侧的间隔都相等
  - 6.stretch（默认值）：轴线占满整个交叉轴
项目样式属性
- 1.order属性
- 2.flex-grow属性
- - 1.均匀分布
  - 2.中间占两倍，两边一样大
- 3.flex-shrink属性
- - 1.等比例缩小
  - 2.为0的情况
- 4.flex-basis属性
- 5.flex属性
- 6.align-self属性

flex布局

flex 是一种布局方式，跟微信小程序没有必然联系
以下几种页面方式都可以使用flex布局

web前端
微信小程序
uniapp

1.什么是Flex布局

布局的传统解决方案，基于盒状模型，依赖 display 属性 + position 属性 + float 属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现
Flex 是 Flexible Box 或 flexbox 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性
任何一个容器都可以指定为 Flex 布局。

.box{  display: flex;
}

行内元素也可以使用 Flex 布局。

.box{  display: inline-flex;
}

2.flex布局的好处

简单易懂：与传统的布局方式相比，Flex布局的语法和理解起来更加简单，容易上手。
弹性和自适应：Flex布局能够自动适应不同尺寸的屏幕，让页面更具有弹性。
等高布局：Flex布局可以方便地实现多列等高布局。
对齐和排序：Flex布局支持各种对齐方式，包括水平和垂直对齐，并且可以通过设置order属性对子元素进行排序。
可以与传统布局结合使用：Flex布局并不是完全取代传统的布局方式，它可以与传统布局方式结合使用，实现更灵活的布局效果

3.flex布局中的概念

采用 Flex 布局的元素，称为 Flex 容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称"项目"
- 容器和项目：container、item
容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）
- 主轴和交叉轴：main axis、cross axis
主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。
- 起始位置：
  main start 主轴起始位置
  cross start 侧轴起始位置
- 结束位置：
  main end 主轴结束位置
  cross start 侧轴结束位置
项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size
- 主轴尺寸
- 侧轴尺寸

在这里插入图片描述

容器样式属性

flex-direction：决定主轴的方向。
flex-wrap：如果一条轴线排不下，如何换行。
flex-flow：flex-direction 属性和 flex-wrap 属性的简写属性。
justify-content：定义项目在主轴上的对齐方式。
align-items：定义项目在交叉轴上如何对齐。
align-content：定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。

1.flex-direction

flex-direction属性决定主轴的方向（即项目的排列方向）

有4个参数值（如下图）

row（默认值）：主轴为水平方向，起点在左端。
row-reverse：主轴为水平方向，起点在右端。
column：主轴为垂直方向，起点在上沿。
column-reverse：主轴为垂直方向，起点在下沿。

强调

使用 flex-direction属性后，因为主轴的位置发生了改变，使用和主轴或交叉轴有关的属性之前一定要确定好主轴的位置
在这里插入图片描述

代码展示

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>.box {width: 800px;height: 400px;border: 1px solid black;margin: auto; /* box 居中*//* 使用flex弹性布局,把这个容器设置为flex布局 */display: flex;/* row（默认值）：主轴为水平方向，起点在左端。 */flex-direction: row; /*  row-reverse    column    column-reverse */}.box div {width: 100px;height: 100px;background-color: pink;border: 1px solid red;}</style>
</head>
<body>
<div class="box"><div>1</div><div>2</div><div>3</div><div>4</div><div>5</div><div>6</div></div>
</body>
</html>

效果
在这里插入图片描述

2.flex-wrap

默认情况下，项目都排在一条线（又称"轴线"）上。flex-wrap属性定义，如果一条轴线排不下，如何换行。
flex-wrap 属性规定flex容器是单行或者多行，同时横轴的方向决定了新行堆叠的方向默认不换行
有3个参数值 flex-wrap: nowrap | wrap | wrap-reverse;
- nowrap 不换行
- wrap 换行，第一行在上方
- wrap-reverse 换行，第一行在下方

代码展示

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>.box{width: 800px;height: 400px;border: 1px solid black;margin: auto;/* 把这个容器设置为flex布局*/display: flex;flex-direction: row; /*  row row-reverse    column    column-reverse *//* */flex-wrap: wrap-reverse; /*nowrap | wrap | wrap-reverse;*/}.box>div{width: 100px;height: 100px;background: pink;border: 1px solid red;}</style></head>
<body><div class="box"><div>1</div><div>2</div><div>3</div><div>4</div><div>5</div><div>6</div><div>7</div><div>8</div><div>9</div><div>10</div><div>11</div></div></body>
</html>

效果
在这里插入图片描述

3.flex-flow

flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。

.box {  flex-flow: flex-direction || flex-wrap;
}

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>.box {width: 800px;height: 400px;border: 1px solid black;margin: auto; /* box 居中*//* 使用弹性布局 */display: flex;/*flex-flow: row nowrap;*/flex-flow: column wrap;/*flex-flow: row nowrap;*/}.box div {width: 100px;height: 100px;background-color: pink;border: 1px solid red;}</style>
</head>
<body>
<div class="box"><div>1</div><div>2</div><div>3</div><div>4</div><div>5</div><div>6</div><div>7</div><div>8</div><div>9</div></div>
</body>
</html>

在这里插入图片描述

4.justify-content

justify-content属性定义了项目在主轴上的对齐方式
有6个参数值，具体对齐方式与轴的方向有关。下面假设主轴为从左到右
justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly;
- flex-start（默认值）：左对齐
- flex-end：右对齐
- center：居中
- space-between：两端对齐，项目之间的间隔都相等。
- space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。
- space-evenly：项目与项目之间，项目与边框之间的间隔都相等

1.justify-content: flex-start(左对齐:默认值)

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>.box {width: 800px;height: 400px;border: 1px solid black;margin: auto; /* box 居中*//* 使用弹性布局 */display: flex;flex-flow: row wrap;justify-content: flex-start}.box div {width: 100px;height: 100px;background-color: pink;border: 1px solid red;}</style>
</head>
<body>
<div class="box"><div>1</div><div>2</div><div>3</div></div>
</body>
</html>

在这里插入图片描述

2.justify-content: flex-end;右对齐

在这里插入图片描述

3.justify-content: center; 居中

在这里插入图片描述

4.justify-content: space-between;两端对齐，项目之间的间隔都相等

在这里插入图片描述

5.justify-content: space-around;每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍

在这里插入图片描述

6.justify-content: space-evenly;项目与项目之间，项目与边框之间的间隔都相等

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>.box {width: 800px;height: 400px;border: 1px solid black;margin: auto; /* box 居中*//* 使用弹性布局 */display: flex;flex-flow: row wrap;justify-content: flex-start;/* 左对齐 */justify-content: flex-end;/* 右对齐 */justify-content: center;/* 居中 */justify-content: space-between;/* 两端对齐，项目之间的间隔都相等 */justify-content: space-around;/*每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍*/justify-content: space-evenly;/*项目与项目之间，项目与边框之间的间隔都相等*/}.box div {width: 100px;height: 100px;background-color: pink;border: 1px solid red;}</style>
</head>
<body>
<div class="box"><div>1</div><div>2</div><div>3</div></div>
</body>
</html>

5.align-items

align-items属性定义项目在交叉轴上如何对齐。
align-items: flex-start | flex-end | center | baseline | stretch 5个值
- flex-start：交叉轴的起点对齐。
- flex-end：交叉轴的终点对齐。
- center：交叉轴的中点对齐。
- baseline：项目的第一行文字的基线对齐。
- stretch（默认值）：如果项目未设置高度或设为 auto，将占满整个容器的高度

1.align-items:flex-start;交叉轴的起点对齐

在这里插入图片描述

2.align-items:flex-end;交叉轴的终点对齐

在这里插入图片描述

3.align-items:center;交叉轴的中点对齐

在这里插入图片描述

4.align-items:baseline;项目的第一行文字的基线对齐

    <style>.box {width: 800px;height: 400px;border: 1px solid black;margin: auto; /* box 居中*//* 使用弹性布局 */display: flex;flex-flow: row wrap;justify-content: flex-start; /* 左对齐 */justify-content: flex-end; /* 右对齐 */justify-content: center; /* 居中 */justify-content: space-between; /* 两端对齐，项目之间的间隔都相等 */justify-content: space-around; /*每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍*/justify-content: space-evenly; /*项目与项目之间，项目与边框之间的间隔都相等*/align-items: flex-start; /*交叉轴的起点对齐*/align-items: flex-end; /*交叉轴的终点对齐*/align-items: center; /*交叉轴的中点对齐*/align-items: baseline; /*项目的第一行文字的基线对齐*/}.box div {width: 100px;height: 100px;background-color: pink;border: 1px solid red;}.box div:nth-child(1) {padding-top: 10px;}.box div:nth-child(2) {padding-top: 15px;}.box div:nth-child(4) {padding-top: 20px;}</style><div class="box"><div>1</div><div>2</div><div>3</div><div>4</div><div>5</div><div>6</div></div>

在这里插入图片描述

5.align-items:stretch;（默认值）如果项目未设置高度或设为 auto，将占满整个容器的高度

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>.box {width: 800px;height: 400px;border: 1px solid black;margin: auto; /* box 居中*//* 使用弹性布局 */display: flex;flex-flow: row wrap;justify-content: flex-start; /* 左对齐 */justify-content: flex-end; /* 右对齐 */justify-content: center; /* 居中 */justify-content: space-between; /* 两端对齐，项目之间的间隔都相等 */justify-content: space-around; /*每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍*/justify-content: space-evenly; /*项目与项目之间，项目与边框之间的间隔都相等*/align-items: flex-start; /*交叉轴的起点对齐*/align-items: flex-end; /*交叉轴的终点对齐*/align-items: center; /*交叉轴的中点对齐*/align-items: baseline; /*项目的第一行文字的基线对齐*/align-items: stretch;; /*默认值）如果项目未设置高度或设为 auto，将占满整个容器的高度*/}.box div {width: 100px;/*height: 100px;*/background-color: pink;border: 1px solid red;}.box div:nth-child(1) {padding-top: 10px;}.box div:nth-child(2) {padding-top: 15px;}.box div:nth-child(4) {padding-top: 20px;}</style>
</head>
<body>
<div class="box"><div>1</div><div>2</div><div>3</div><div>4</div><div>5</div><div>6</div></div>
</body>
</html>

在这里插入图片描述

6.align-content属性

align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。
- 必须允许项目换行【flex-wrap: wrap】，使用align-content属性的前提，否则align-content属性不生效
align-content: flex-start | flex-end | center | space-between | space-around | stretch; 6个值
flex-start：与交叉轴的起点对齐。
flex-end：与交叉轴的终点对齐。
center：与交叉轴的中点对齐。
space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。
space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。
stretch（默认值）：轴线占满整个交叉轴。
align-content的属性值和前面的都一样，只需要注意在使用align-content的属性之前一定要加上 flex-wrap: wrap;属性

1.flex-start：与交叉轴的起点对齐

在这里插入图片描述

2.flex-end：与交叉轴的终点对齐

在这里插入图片描述

3.center：与交叉轴的中点对齐

在这里插入图片描述

4.space-between：与交叉轴两端对齐，轴线之间的间隔平均分布

在这里插入图片描述

5.space-around：每根轴线两侧的间隔都相等

所以，轴线之间的间隔比轴线与边框的间隔大一倍
在这里插入图片描述

6.stretch（默认值）：轴线占满整个交叉轴

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>.box {width: 800px;height: 400px;border: 1px solid black;margin: auto; /* box 居中*//* 使用弹性布局 */display: flex;flex-flow: row wrap;/* flex-start：与交叉轴的起点对齐。 */align-content: flex-start;/* flex-end：与交叉轴的终点对齐。 */align-content: flex-end;/* center：与交叉轴的中点对齐。 */align-content: center;/* space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。 */align-content: space-between;/* space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。 */align-content: space-around;/* stretch（默认值）：轴线占满整个交叉轴。 */align-content: stretch;}.box div {width: 100px;height: 100px;  /*align-content: stretch  不设置高度*/background-color: pink;border: 1px solid red;}</style>
</head>
<body>
<div class="box"><div>1</div><div>2</div><div>3</div><div>4</div><div>5</div><div>6</div><div>7</div><div>8</div><div>9</div></div>
</body>
</html>

项目样式属性

以下6个属性设置在项目上。
- order：定义项目的排列顺序。数值越小，排列越靠前，默认为 0
- flex-grow：定义项目的放大比例，默认为 0，即如果存在剩余空间，也不放大
- flex-shrink：定义了项目的缩小比例，默认为 1，即如果空间不足，该项目将缩小
- flex-basis：定义了在分配多余空间之前，项目占据的主轴空间（main size）。它的默认值为 auto，即项目的本来大小
- flex： flex-grow 、 flex-shrink 和 flex-basis 的简写，默认值为 0 1 auto 。后两个属性可选
- align-self：允许单个项目有与其他项目不一样的对齐方式，可覆盖 align-items 属性。默认值为 auto

1.order属性

order属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。
使用方式：item { order: integer;}

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>.box {width: 800px;height: 400px;border: 1px solid black;margin: auto; /* box 居中*//* 使用弹性布局 */display: flex;flex-flow: row wrap;/* flex-start：与交叉轴的起点对齐。 */align-content: flex-start;/* flex-end：与交叉轴的终点对齐。 */align-content: flex-end;/* center：与交叉轴的中点对齐。 */align-content: center;/* space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。 */align-content: space-between;/* space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。 */align-content: space-around;/* stretch（默认值）：轴线占满整个交叉轴。 */align-content: stretch;}.box div {width: 100px;height: 100px;  /*align-content: stretch  不设置高度*/background-color: pink;border: 1px solid red;}.box div:nth-child(1){order: -1;}.box div:nth-child(2){order: 2;}.box div:nth-child(3){order: 4;}.box div:nth-child(4){order: 0;}.box div:nth-child(5){order: 3;}.box div:nth-child(6){order: 7;}</style>
</head>
<body>
<div class="box"><div>1</div><div>2</div><div>3</div><div>4</div><div>5</div><div>6</div><div>7</div></div>
</body>
</html>

在这里插入图片描述

2.flex-grow属性

flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大
item { flex-grow: number; /* default 0 */}
如果所有项目的flex-grow属性都为1，则它们将等分剩余空间（如果有的话）。如果一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍

1.均匀分布

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>.box {width: 800px;height: 400px;border: 1px solid black;margin: auto; /* box 居中*//* 使用弹性布局 */display: flex;flex-flow: row wrap;/* flex-start：与交叉轴的起点对齐。 */align-content: flex-start;/* flex-end：与交叉轴的终点对齐。 */align-content: flex-end;/* center：与交叉轴的中点对齐。 */align-content: center;/* space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。 */align-content: space-between;/* space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。 */align-content: space-around;/* stretch（默认值）：轴线占满整个交叉轴。 */align-content: stretch;}.box div {width: 100px;height: 100px; /*align-content: stretch  不设置高度*/background-color: pink;border: 1px solid red;}.box div:nth-child(1) {flex-grow: 1;}.box div:nth-child(2) {flex-grow: 1;}.box div:nth-child(3) {flex-grow: 1;}</style>
</head>
<body>
<div class="box"><div>1</div><div>2</div><div>3</div></div>
</body>
</html>

在这里插入图片描述

2.中间占两倍，两边一样大

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>.box {width: 800px;height: 400px;border: 1px solid black;margin: auto; /* box 居中*//* 使用弹性布局 */display: flex;flex-flow: row wrap;/* flex-start：与交叉轴的起点对齐。 */align-content: flex-start;/* flex-end：与交叉轴的终点对齐。 */align-content: flex-end;/* center：与交叉轴的中点对齐。 */align-content: center;/* space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。 */align-content: space-between;/* space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。 */align-content: space-around;/* stretch（默认值）：轴线占满整个交叉轴。 */align-content: stretch;}.box div {width: 100px;height: 100px; /*align-content: stretch  不设置高度*/background-color: pink;border: 1px solid red;}.box div:nth-child(1){flex-grow: 1;}.box div:nth-child(2){flex-grow: 2;}.box div:nth-child(3){flex-grow: 1;}</style>
</head>
<body>
<div class="box"><div>1</div><div>2</div><div>3</div></div>
</body>
</html>

在这里插入图片描述

3.flex-shrink属性

flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小
.item { flex-shrink: number; /* default 1 */}
如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小
负值对该属性无效

1.等比例缩小

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>.box {width: 800px;height: 400px;border: 1px solid black;margin: auto; /* box 居中*//* 使用弹性布局 */display: flex;flex-flow: row nowrap;}.box div {width: 400px;height: 100px;background-color: pink;border: 1px solid red;}.box div:nth-child(1) {flex-shrink: 1;}.box div:nth-child(2) {flex-shrink: 1;}.box div:nth-child(3) {flex-shrink: 1;}.box div:nth-child(4) {flex-shrink: 1;}</style>
</head>
<body>
<div class="box"><div>1</div><div>2</div><div>3</div><div>4</div></div>
</body>
</html>

在这里插入图片描述

2.为0的情况

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>.box {width: 800px;height: 400px;border: 1px solid black;margin: auto; /* box 居中*//* 使用弹性布局 */display: flex;flex-flow: row nowrap;}.box div {width: 400px;height: 100px;background-color: pink;border: 1px solid red;}.box div:nth-child(1) {flex-shrink: 1;}.box div:nth-child(2) {flex-shrink: 0;}.box div:nth-child(3) {flex-shrink: 1;}.box div:nth-child(4) {flex-shrink: 1;}</style>
</head>
<body>
<div class="box"><div>1</div><div>2</div><div>3</div><div>4</div></div>
</body>
</html>

在这里插入图片描述

4.flex-basis属性

flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小
.item { flex-basis: length | auto; /* default auto */}

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>.box {width: 800px;height: 400px;border: 1px solid black;margin: auto; /* box 居中*//* 使用弹性布局 */display: flex;flex-flow: row nowrap;}.box div {width: 100px;height: 100px;background-color: pink;border: 1px solid red;}.box div:nth-child(2) {/* 将项目2的宽度设为200px */flex-basis: 200px;}</style>
</head>
<body>
<div class="box"><div>1</div><div>2</div><div>3</div><div>4</div></div>
</body>
</html>

在这里插入图片描述

5.flex属性

flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为 0 1 auto。后两个属性可选。
.item { flex: none | [ <‘flex-grow’> <‘flex-shrink’>? || <‘flex-basis’> ]}
该属性有两个快捷值：auto (1 1 auto) 和 none (0 0 auto)。
建议优先使用这个属性，而不是单独写三个分离的属性，因为浏览器会推算相关值。
一般情况下flex属性用于将项目平均占满空间

.box div {/* 使所有项目平均占满空间 */flex: 1;
}

在这里插入图片描述

6.align-self属性

align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch
.item { align-self: auto | flex-start | flex-end | center | baseline | stretch;}
该属性可能取6个值，除了auto，其他都与align-items属性完全一致

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>.box {width: 800px;height: 400px;border: 1px solid black;margin: auto; /* box 居中*//* 使用弹性布局 */display: flex;flex-flow: row nowrap;}.box div {width: 100px;height: 100px;background-color: pink;border: 1px solid red;flex: 1;}.box div:nth-child(2) {/* 使第二个项目在交叉轴上终点对齐 */align-self: flex-end;}</style>
</head>
<body>
<div class="box"><div>1</div><div>2</div><div>3</div><div>4</div></div>
</body>
</html>

在这里插入图片描述

【微信小程序开发】微信小程序、大前端之flex布局方式详细解析

✨✨ 欢迎大家来到景天科技苑✨✨ 🎈🎈 养成好习惯，先赞后看哦~🎈🎈 🏆 作者简介：景天科技苑 🏆《头衔》：大厂架构师，华为云开发者社区专家博主，…...

编程日记 2024/5/9 11:10:31

代码随想录算法训练营第二十天：二叉树成长

代码随想录算法训练营第二十天：二叉树成长 110.平衡二叉树力扣题目链接(opens new window) 给定一个二叉树，判断它是否是高度平衡的二叉树。本题中，一棵高度平衡二叉树定义为：一个二叉树每个节点的左右两个子树的高度差的绝…...

编程日记 2024/5/9 11:09:29

Opensbi初始化分析：设备初始化-warmboot

Opensbi初始化分析：设备初始化-warmboot 设备初始化sbi_init函数init_warmboot函数coolboot & warmbootwait_for_coldboot函数domain && scratch（coldboot所特有）console初始化及print相关工作（coldboot所特有）系统调用的相关初始化（coldboot所特有）综上设备…...

编程日记 2024/5/9 11:06:24

软考系统架构设计师系列知识点之软件可靠性基础知识（13）

接前一篇文章：软考系统架构设计师系列知识点之软件可靠性基础知识（12） 所属章节： 第9章. 软件可靠性基础知识第3节软件可靠性管理为了进一步提高软件可靠性，人们又提出了软件可靠性管理的概念，把软件可…...

编程日记 2024/5/9 11:03:20

将ESP工作为AP路由模式并当成服务器

将ESP8266模块通过usb转串口接入电脑 ATCWMODE3 //1.配置成双模ATCIPMUX1 //2.使能多链接ATCIPSERVER1 //3.建立TCPServerATCIPSEND0,4 //4.发送4个字节在链接0通道上 >ATCIPCLOSE0 //5.断开连接通过wifi找到安信可的wifi信号并连接连接后查看自己的ip地址变为192.168.4.…...

编程日记 2024/5/9 11:00:16

Python深度学习基于Tensorflow（6）神经网络基础

文章目录使用Tensorflow解决XOR问题激活函数正向传播和反向传播解决过拟合权重正则化Dropout正则化批量正则化 BatchNormal权重初始化残差连接选择优化算法传统梯度更新算法动量算法NAG算法AdaGrad算法RMSProp算法Adam算法如何选择优化算法使用tf.keras构建神经网络使用Sequ…...

编程日记 2024/5/9 10:59:15

解题思路： 二分法模板 class Solution {public int searchInsert(int[] nums, int target) {int left 0;int right nums.length - 1;while (left < right) {int mid left ((right - left) >> 1);if (nums[mid] target)return mid;else if (nums[mid…...

编程日记 2024/5/9 10:58:12

MinimogWP WordPress 主题下载——优雅至上，功能无限

无论你是个人博客写手、创意工作者还是企业站点的管理员，MinimogWP 都将成为你在 WordPress 平台上的理想之选。以其优雅、灵活和功能丰富而闻名，MinimogWP 不仅提供了令人惊叹的外观，还为你的网站带来了无限的创作和定制可能性。无与伦比的…...

编程日记 2024/5/9 10:57:11

kube-prometheus部署到 k8s 集群

文章目录 **修改镜像地址****访问配置****修改 Prometheus 的 service****修改 Grafana 的 service****修改 Alertmanager 的 service****安装****Prometheus验证****Alertmanager验证****Grafana验证****卸载****Grafana显示时间问题** 或者配置ingress添加ingress访问grafana…...

编程日记 2024/5/9 10:56:09

从0开始学习python（六）

目录前言 1、循环结构 1.1 遍历循环结构for 1.2 无限循环结构while 总结前言上一篇文章我们讲到了python的顺序结构和分支结构。这一章继续往下讲。 1、循环结构在python中，循环结构分为两类，一类是遍历循环结构for，一类是无限循环结…...

编程日记 2024/5/9 10:54:05

OpenGL 入门（三）—— OpenGL 与 OpenCV 共同打造大眼滤镜

从本篇开始，会在上一篇搭建的滤镜框架的基础上，介绍具体的滤镜效果该如何制作。本篇会先介绍大眼滤镜，先来看一下效果，原图如下： 使用手机后置摄像头对眼部放大后的效果： 制作大眼滤镜所需的主要知识点&…...

编程日记 2024/5/9 10:51:01

Linux服务器安全基础 - 查看入侵痕迹

1. 常见系统日志 /var/log/cron 记录了系统定时任务相关的日志 /var/log/dmesg 记录了系统在开机时内核自检的信息，也可以使用dmesg命令直接查看内核自检信息 /var/log/secure:记录登录系统存取数据的文件;例如:pop3,ssh,telnet,ftp等都会记录在此. /var/log/btmp:记…...

编程日记 2024/5/9 10:49:59

Java反射机制的实战应用：探索其魅力与局限

引言 Java作为一种面向对象的编程语言，其灵活性和强大的功能使其成为众多开发者的首选。而Java反射机制作为Java语言中的一项重要特性，为程序员提供了一种在运行时检查和操作类、方法、属性等信息的能力。本文旨在深入探讨Java反射机制的实战应用&#…...

编程日记 2024/5/9 10:46:55

vue3项目文件组成

从头捋顺一遍vue3项目文件目录前置知识JS模块化什么是依赖？安装依赖webpack能做什么？vue基本使用不借助vue-cli，从0开始搭建vue项目。index.html、main.js、App.vue引入npm引入webpack引入babel引入vue-loaderwebpack配置webpack配置前置知…...

编程日记 2024/5/9 10:45:53

C语言关键字 typedef 的功能是什么？

一、问题语⾔有 32 个关键字，其中 int 的功能是声明整型变量，struct 的功能是声明结构体变量，那么 typedef 的功能是什么呢？ 二、解答 1. typedef 的功能在 C 语⾔中除了可以使⽤标准类型名（如 int、 char、float …...

编程日记 2024/5/9 10:44:52

【YoloDeployCsharp】基于.NET Framework的YOLO深度学习模型部署测试平台-源码下载与项目配置

基于.NET Framework 4.8 开发的深度学习模型部署测试平台，提供了YOLO框架的主流系列模型，包括YOLOv8~v9，以及其系列下的Det、Seg、Pose、Obb、Cls等应用场景，同时支持图像与视频检测。模型部署引擎使用的是OpenVINO™、TensorRT、ONNX runtime以及OpenCV DNN，支持CPU、IGP…...

编程日记 2024/5/9 10:43:50

如何在 Ubuntu 12.04 VPS 上使用 MongoDB 创建分片集群

简介 MongoDB 是一个 NoSQL 文档数据库系统，可以在水平方向上很好地扩展，并通过键值系统实现数据存储。作为 Web 应用程序和网站的热门选择，MongoDB 易于实现并可以通过编程方式访问。 MongoDB 通过一种称为“分片”的技术实现扩展。分片是将…...

编程日记 2024/5/9 10:42:47

阿里云VOD视频点播流程（1）

一、开通阿里云VOD 视频点播（ApsaraVideo VoD，简称VOD）是集视频采集、编辑、上传、媒体资源管理、自动化转码处理、视频审核分析、分发加速于一体的一站式音视频点播解决方案。登录阿里云，在产品找到视频点播VOD ，点击…...

编程日记 2024/5/9 10:39:43

Python爬虫获取豆瓣电影Top100

大家好，我是秋意零。今天分析一篇，Python爬虫获取豆瓣电影Top100。在此之前，我没有学习过爬虫，只有一丢丢的Python基础。下面效果的实现源码几乎没经过我，而是AI百老师。我主要负责了对应的调试以及根据我想要的功…...

编程日记 2024/5/9 10:38:41

动态规划专训8——背包问题

动态规划题目中，常出现背包的相关问题，这里单独挑出来训练 A.01背包 1.01背包模板题【模板】01背包_牛客题霸_牛客网 (nowcoder.com) 你有一个背包，最多能容纳的体积是V。现在有n个物品，第i个物品的体积为𝑣&am…...

编程日记 2024/5/9 10:37:39

大话软工笔记—需求分析概述

需求分析，就是要对需求调研收集到的资料信息逐个地进行拆分、研究，从大量的不确定“需求”中确定出哪些需求最终要转换为确定的“功能需求”。需求分析的作用非常重要，后续设计的依据主要来自于需求分析的成果，包括: 项目的目的…...

编程新知 2025/9/12 22:07:46

AtCoder 第409场初级竞赛 A~E题解

A Conflict 【题目链接】原题链接：A - Conflict 【考点】枚举【题目大意】找到是否有两人都想要的物品。【解析】遍历两端字符串，只有在同时为 o 时输出 Yes 并结束程序，否则输出 No。【难度】 GESP三级【代码参考】 #i…...

编程新知 2025/7/23 9:09:08

渗透实战PortSwigger靶场-XSS Lab 14：大多数标签和属性被阻止

编程新知 2025/9/13 22:56:28

linux 错误码总结

1，错误码的概念与作用在Linux系统中，错误码是系统调用或库函数在执行失败时返回的特定数值，用于指示具体的错误类型。这些错误码通过全局变量errno来存储和传递，errno由操作系统维护，保存最近一次发生的错误信息。值得注意的是，errno的值在每次系统调用或函数调用失败时…...

编程新知 2025/8/11 15:02:00

页面渲染流程与性能优化

页面渲染流程与性能优化详解（完整版） 一、现代浏览器渲染流程（详细说明） 1. 构建DOM树浏览器接收到HTML文档后，会逐步解析并构建DOM（Document Object Model）树。具体过程如下： (…...

编程新知 2025/8/10 22:32:47

Nginx server_name 配置说明

Nginx 是一个高性能的反向代理和负载均衡服务器，其核心配置之一是 server 块中的 server_name 指令。server_name 决定了 Nginx 如何根据客户端请求的 Host 头匹配对应的虚拟主机（Virtual Host）。 1. 简介 Nginx 使用 server_name 指令来确定…...

编程新知 2025/9/6 16:47:17

【python异步多线程】异步多线程爬虫代码示例

claude生成的python多线程、异步代码示例，模拟20个网页的爬取，每个网页假设要0.5-2秒完成。代码 Python多线程爬虫教程核心概念多线程：允许程序同时执行多个任务，提高IO密集型任务（如网络请求）的效率…...

编程新知 2025/8/13 7:14:07

全志A40i android7.1 调试信息打印串口由uart0改为uart3

一，概述 1. 目的将调试信息打印串口由uart0改为uart3。 2. 版本信息 Uboot版本：2014.07； Kernel版本：Linux-3.10； 二，Uboot 1. sys_config.fex改动使能uart3(TX:PH00 RX:PH01)，并让boo…...

编程新知 2025/9/12 23:22:04

Maven 概述、安装、配置、仓库、私服详解

目录 1、Maven 概述 1.1 Maven 的定义 1.2 Maven 解决的问题 1.3 Maven 的核心特性与优势 2、Maven 安装 2.1 下载 Maven 2.2 安装配置 Maven 2.3 测试安装 2.4 修改 Maven 本地仓库的默认路径 3、Maven 配置 3.1 配置本地仓库 3.2 配置 JDK 3.3 IDEA 配置本地 Ma…...

编程新知 2025/9/7 8:50:41

USB Over IP专用硬件的5个特点

USB over IP技术通过将USB协议数据封装在标准TCP/IP网络数据包中，从根本上改变了USB连接。这允许客户端通过局域网或广域网远程访问和控制物理连接到服务器的USB设备（如专用硬件设备），从而消除了直接物理连接的需要。USB over IP的…...

编程新知 2025/9/13 17:42:33

文章目录

flex布局

1.什么是Flex布局

2.flex布局的好处

3.flex布局中的概念

容器样式属性

1.flex-direction

有4个参数值（如下图）

强调

2.flex-wrap

3.flex-flow

4.justify-content

1.justify-content: flex-start(左对齐:默认值)

2.justify-content: flex-end;右对齐

3.justify-content: center; 居中

4.justify-content: space-between;两端对齐，项目之间的间隔都相等

5.justify-content: space-around;每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍

6.justify-content: space-evenly;项目与项目之间，项目与边框之间的间隔都相等

5.align-items

1.align-items:flex-start;交叉轴的起点对齐

2.align-items:flex-end;交叉轴的终点对齐

3.align-items:center;交叉轴的中点对齐

4.align-items:baseline;项目的第一行文字的基线对齐

5.align-items:stretch;（默认值）如果项目未设置高度或设为 auto，将占满整个容器的高度

6.align-content属性

1.flex-start：与交叉轴的起点对齐

2.flex-end：与交叉轴的终点对齐

3.center：与交叉轴的中点对齐

4.space-between：与交叉轴两端对齐，轴线之间的间隔平均分布

5.space-around：每根轴线两侧的间隔都相等

6.stretch（默认值）：轴线占满整个交叉轴

项目样式属性

1.order属性

2.flex-grow属性

1.均匀分布

2.中间占两倍，两边一样大

3.flex-shrink属性

1.等比例缩小

2.为0的情况

4.flex-basis属性

5.flex属性

6.align-self属性

相关文章：