【微信小程序开发】微信小程序、大前端之flex布局方式详细解析
✨✨ 欢迎大家来到景天科技苑✨✨
🎈🎈 养成好习惯，先赞后看哦~🎈🎈
🏆 作者简介：景天科技苑
🏆《头衔》：大厂架构师，华为云开发者社区专家博主，阿里云开发者社区专家博主，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布局方式详细解析
✨✨ 欢迎大家来到景天科技苑✨✨ 🎈🎈 养成好习惯，先赞后看哦~🎈🎈 🏆 作者简介：景天科技苑 🏆《头衔》：大厂架构师，华为云开发者社区专家博主，…...
代码随想录算法训练营第二十天：二叉树成长
代码随想录算法训练营第二十天：二叉树成长 110.平衡二叉树 力扣题目链接(opens new window) 给定一个二叉树，判断它是否是高度平衡的二叉树。 本题中，一棵高度平衡二叉树定义为：一个二叉树每个节点 的左右两个子树的高度差的绝…...
Opensbi初始化分析：设备初始化-warmboot
Opensbi初始化分析：设备初始化-warmboot 设备初始化sbi_init函数init_warmboot函数coolboot & warmbootwait_for_coldboot函数domain && scratch（coldboot所特有）console初始化及print相关工作（coldboot所特有）系统调用的相关初始化（coldboot所特有）综上设备…...
软考 系统架构设计师系列知识点之软件可靠性基础知识（13）
接前一篇文章：软考 系统架构设计师系列知识点之软件可靠性基础知识（12） 所属章节： 第9章. 软件可靠性基础知识 第3节 软件可靠性管理 为了进一步提高软件可靠性，人们又提出了软件可靠性管理的概念，把软件可…...
将ESP工作为AP路由模式并当成服务器
将ESP8266模块通过usb转串口接入电脑 ATCWMODE3 //1.配置成双模ATCIPMUX1 //2.使能多链接ATCIPSERVER1 //3.建立TCPServerATCIPSEND0,4 //4.发送4个字节在链接0通道上 >ATCIPCLOSE0 //5.断开连接通过wifi找到安信可的wifi信号并连接 连接后查看自己的ip地址变为192.168.4.…...
Python深度学习基于Tensorflow（6）神经网络基础
文章目录 使用Tensorflow解决XOR问题激活函数正向传播和反向传播解决过拟合权重正则化Dropout正则化批量正则化 BatchNormal权重初始化残差连接 选择优化算法传统梯度更新算法动量算法NAG算法AdaGrad算法RMSProp算法Adam算法如何选择优化算法 使用tf.keras构建神经网络使用Sequ…...
力扣HOT100 - 35. 搜索插入位置
解题思路： 二分法模板 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…...
MinimogWP WordPress 主题下载——优雅至上，功能无限
无论你是个人博客写手、创意工作者还是企业站点的管理员，MinimogWP 都将成为你在 WordPress 平台上的理想之选。以其优雅、灵活和功能丰富而闻名，MinimogWP 不仅提供了令人惊叹的外观，还为你的网站带来了无限的创作和定制可能性。 无与伦比的…...
kube-prometheus部署到 k8s 集群
文章目录 **修改镜像地址****访问配置****修改 Prometheus 的 service****修改 Grafana 的 service****修改 Alertmanager 的 service****安装****Prometheus验证****Alertmanager验证****Grafana验证****卸载****Grafana显示时间问题** 或者配置ingress添加ingress访问grafana…...
从0开始学习python（六）
目录 前言 1、循环结构 1.1 遍历循环结构for 1.2 无限循环结构while 总结 前言 上一篇文章我们讲到了python的顺序结构和分支结构。这一章继续往下讲。 1、循环结构 在python中，循环结构分为两类，一类是遍历循环结构for，一类是无限循环结…...
OpenGL 入门（三）—— OpenGL 与 OpenCV 共同打造大眼滤镜
从本篇开始，会在上一篇搭建的滤镜框架的基础上，介绍具体的滤镜效果该如何制作。本篇会先介绍大眼滤镜，先来看一下效果，原图如下： 使用手机后置摄像头对眼部放大后的效果： 制作大眼滤镜所需的主要知识点&…...
Linux服务器安全基础 - 查看入侵痕迹
1. 常见系统日志 /var/log/cron 记录了系统定时任务相关的日志 /var/log/dmesg 记录了系统在开机时内核自检的信息，也可以使用dmesg命令直接查看内核自检信息 /var/log/secure:记录登录系统存取数据的文件;例如:pop3,ssh,telnet,ftp等都会记录在此. /var/log/btmp:记…...
Java反射机制的实战应用：探索其魅力与局限
引言 Java作为一种面向对象的编程语言，其灵活性和强大的功能使其成为众多开发者的首选。而Java反射机制作为Java语言中的一项重要特性，为程序员提供了一种在运行时检查和操作类、方法、属性等信息的能力。本文旨在深入探讨Java反射机制的实战应用&#…...
vue3项目 文件组成
从头捋顺一遍vue3项目文件目录 前置知识JS模块化什么是依赖？安装依赖webpack能做什么？vue基本使用 不借助vue-cli，从0开始搭建vue项目。index.html、main.js、App.vue引入npm引入webpack引入babel引入vue-loaderwebpack配置webpack配置 前置知…...
C语言关键字 typedef 的功能是什么？
一、问题 语⾔有 32 个关键字，其中 int 的功能是声明整型变量，struct 的功能是声明结构体变量，那么 typedef 的功能是什么呢？ 二、解答 1. typedef 的功能 在 C 语⾔中除了可以使⽤标准类型名（如 int、 char、float …...
【YoloDeployCsharp】基于.NET Framework的YOLO深度学习模型部署测试平台-源码下载与项目配置
基于.NET Framework 4.8 开发的深度学习模型部署测试平台，提供了YOLO框架的主流系列模型，包括YOLOv8~v9，以及其系列下的Det、Seg、Pose、Obb、Cls等应用场景，同时支持图像与视频检测。模型部署引擎使用的是OpenVINO™、TensorRT、ONNX runtime以及OpenCV DNN，支持CPU、IGP…...
如何在 Ubuntu 12.04 VPS 上使用 MongoDB 创建分片集群
简介 MongoDB 是一个 NoSQL 文档数据库系统，可以在水平方向上很好地扩展，并通过键值系统实现数据存储。作为 Web 应用程序和网站的热门选择，MongoDB 易于实现并可以通过编程方式访问。 MongoDB 通过一种称为“分片”的技术实现扩展。分片是将…...
阿里云VOD视频点播流程（1）
一、开通阿里云VOD 视频点播（ApsaraVideo VoD，简称VOD）是集视频采集、编辑、上传、媒体资源管理、自动化转码处理、视频审核分析、分发加速于一体的一站式音视频点播解决方案。登录阿里云，在产品找到视频点播VOD ，点击…...
Python爬虫获取豆瓣电影Top100
大家好，我是秋意零。 今天分析一篇，Python爬虫获取豆瓣电影Top100。 在此之前，我没有学习过爬虫，只有一丢丢的Python基础。下面效果的实现源码几乎没经过我，而是AI百老师。我主要负责了对应的调试以及根据我想要的功…...
动态规划专训8——背包问题
动态规划题目中，常出现背包的相关问题，这里单独挑出来训练 A.01背包 1.01背包模板题 【模板】01背包_牛客题霸_牛客网 (nowcoder.com) 你有一个背包，最多能容纳的体积是V。 现在有n个物品，第i个物品的体积为𝑣&am…...
软件杯 深度学习花卉识别 - python 机器视觉 opencv
文章目录 0 前言1 项目背景2 花卉识别的基本原理3 算法实现3.1 预处理3.2 特征提取和选择3.3 分类器设计和决策3.4 卷积神经网络基本原理 4 算法实现4.1 花卉图像数据4.2 模块组成 5 项目执行结果6 最后 0 前言 🔥 优质竞赛项目系列，今天要分享的是 &a…...
学习笔记：【QC】Android Q - IMS 模块
一、IMS init 流程图 高清的流程图参考：【高清图，保存后可以放大看】 二、IMS turnon 流程图 高清的流程图参考：【高清图，保存后可以放大看】 三、分析说明 1、nv702870 不创建ims apn pdp 2、nv702811 nv702811的时候才创建…...
NodeMCU ESP8266 操作 SSD1306 OLED显示屏详解（图文并茂）
文章目录 1 模块介绍2 接线介绍3 安装SSD1306驱动库4 源码分析4.1 硬件兼容性4.2 可能存在的问题总结1 模块介绍 我们将在本教程中使用的OLED显示屏是SSD1306型号：单色0.96英寸显示屏，像素为12864，如下图所示。 OLED显示屏不需要背光，这在黑暗环境中会产生非常好的对比度。…...
不抽象：Increase API 设计原则
原文：Increase - 2024.04.26 （注：Increase 是一家提供金融技术服务的公司。） API 资源是 API 的实体或对象。决定如何为这些实体命名和建模可以说是设计 API 最难也是最重要的部分。您所公开的资源组织了用户对您的产品如何工作…...
mybatis调用数据库存储过程
mybatis调用数据库存储过程及常见属性详解 调用mapper String visitCode mapper.getVisitCode(objectMap);Dao层，xml文件代码编写 <select id"getVisitCode" parameterType"map" resultType"string" statementType"CALLAB…...
【git】发生冲突后回滚提交
gerrit 冲突， 无法合并到主干 那么先回滚 参考这里的 reset 操作： 回滚 到上一个提交 $ git reset --soft HEAD~1 # 數字表示移動到 HEAD後面第幾個刚提交的会撤回， stash 刚刚提交的 然后去pull 最新的 修改冲突： 最后再…...
ISO14229 -1 UDS诊断服务记录-001：0x34\0x36\0x37\0x31\0x19\0x14服务报文格式介绍
目录 1、34服务-请求下载 1.1、诊断请求格式 1.2、正响应格式 1.3、负响应格式 1.4、工程应用分析 2、36服务-传输数据 2.1、请求报文格式 2.2、正响应格式 2.3、负响应NRC 3、37服务-退出传输 3.1、报文格式 3.2、正响应格式 3.3、负响应NRC 4、31服务-例程控制 …...
使用 MediaMTX 和 FFmpeg 推拉 RTSP 流媒体
实时流传输协议 RTSP（Real-Time Streaming Protocol）是 TCP/IP 协议体系中的一个应用层协议，由哥伦比亚大学、网景和 RealNetworks 公司提交的 IETF RFC 标准。该协议定义了一对多应用程序如何有效地通过 IP 网络传送多媒体数据。RTSP 在体系…...
Mac 电脑安装 Raptor 流程图软件的方法
0. 安装逻辑 （1）运行 raptor，本质上需要 mac 能够运行 windows 程序，因此需要安装 .NET Runtime 7.0，这是微软程序运行必须的文件。 （2）运行 raptor 还需要安装依赖文件 mono-libgdiplus。 &am…...
W801学习笔记二十：宋词学习应用
前三章完成了唐诗的应用，本章将实现宋词的学习应用。 宋词与唐诗的区别不大，马上开始。 1、我们需要参考前面唐诗的方式，把宋词文本下载下来，并进行格式整理。 W801学习笔记十七：古诗学习应用——上 2、在菜单中添加…...
网站设计方法/国外网络推广
“短视频”目前呈现井喷式的发展，主要得益于傻瓜化的内容制作和便捷化的内容传播， “快手”、“抖音和快手”两大短视频平台都倡导的是利用平台去记录和分享生活，在编辑拍摄的视频时，可以利用官方平台提供的简易剪辑工具进行简单加…...
无锡网站建设系统/网站设计公司网站制作
前言 会议定点：新主楼F座教室会议时间：2019/5/5会议目的：确定进度，分配下阶段任务一、任务进度 组员上周任务进度下阶段任务大娃初步完成新增的模型代码完善新增层的代码二娃阅读后端文档，辅助主PM维护github项目&…...
网站建设注意事情/电商平台运营
1.团队课程设计博客链接 https://www.cnblogs.com/hq9-/p/10278470.html 2.个人任务 1）权重功能实现 public static void accuAccordPercent(String tablename, String cname, Map<String, Double> per) {Connection conn null;PreparedStatement ps null;P…...
寻求南宁网站建设人员/专业seo优化推广
怀旧是一种什么滋味 怀旧是一种什么滋味，好像有人在你心上攥了一下。 感谢这个时代将我们记录默默保存 感谢某技术博客平台竟然还能保存自己10年前的博客文章 早起的鸟儿有虫吃 今天需要在某网站下载个资料，如今是知识付费时代哪个网站不搞个VIP服务都…...
h5网站开发软件下载/站长之家官网登录入口
问题 Push failed: fatal: Authentication failed for httpspycharm invalid authentication data couldn’t kickstart handshaking 解决...
19手机网站/seo外包优化
回望2020 2020年第一天。2020年第一个月。2020年第一季度。十一，国庆。现在，2021.1.12020年第一天。 今天是2020年的第一天，昨晚我刚刚经历了一场紧张刺激且尴尬的转正答辩。我来到这家公司6个月了，说实话，我很不开心。昨晚的答辩是我们的部门大boss亲自坐镇，我看得出来…...