flex容器的属性

原创已于 2025-08-01 20:11:00 修改 · 708 阅读

12 ·

本内容遵循CC 4.0 BY-SA版权协议

GEO检测

收录于

javascript

uni-app

于 2025-07-31 16:02:02 首次发布

1， flex-direction: 设置元素的排列方向

他的排列方向总共有4种

水平方向 row 从左向右 row-reverse 从右向左

垂直方向 column 自上而下 column-reverse 自下而上

如果说当我们把flex-direction设置成row以后，那么就代表我们当前的容器的主轴就是我们横向的一条轴。

如果说我们把flex-direction设置成column以后，那么就代表我们当前的容器的主轴就是我们垂直的一条轴线。

我们就根据这几个属性，我们去代码里面看看。先创建flex目录，在创建flex-direction.vue文件

首先，我们要去定义flex容器，那么我们去哪里定义呢？他是写到某个特定标签的class里面，也就是 css 样式，通常我们都会写在 view 标签里面，view标签他就是一个视图组件，他就相当于HTML里面的一个 div 标签。

注意：class 是组件的样式夹，在对应的CSS中定义的样式夹

比如：
<template>
	<view class="container">

	</view>
</template>

<style>
	.container {
	
	}
</style>

flex-direction四中排列方式

row
flex 容器的主轴被定义为与文本方向相同。主轴起点和主轴终点与内容方向相同。

row-reverse
表现和 row 相同，但是置换了主轴起点和主轴终点 

column
flex 容器的主轴和块轴相同。主轴起点与主轴终点和书写模式的前后点相同 

column-reverse
表现和column相同，但是置换了主轴起点和主轴终点

flex-direction四中排列方式实现代码：

page/flex/flex-direction/flex-direction.vue

<template>
	<view class="container">
		<view class="green txt">
			A
		</view>

		<view class="red txt">
			B
		</view>

		<view class="blue txt">
			C
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {

			}
		},
		methods: {

		}
	}
</script>

<style>
	.container {
		/*定义flex容器*/
		display: flex;
		/*
		设置容器内部元素的排列方向
		row: 定义排列方式 从左向右的
		row-reverse: 定义排列方式 从右向左
		column: 定义排列方式 自上而下
		column-reverse: 定义排列方式  自下而上
		*/
		flex-direction: row-reverse;
	}

	.txt {
		font-size: 20px;
		width: 100rpx;
		height: 100rpx;
	}

	.green {
		background-color: #008000;
	}

	.red {
		background-color: #FF0000;
	}

	.blue {
		background-color: blue;
	}
</style>

执行效果如下

column 排列方向自上而下

column-reverse 排列方向自下而上

row 排列方向从左向右

row-reverse 排列方向从右向左

导入外部css样式

将样式单独剥离出来，创建 pages/flex/flex-diretion/flex-direction.vue 文件，然后将style里面的所有内容剪切，粘贴到 flex-direction.vue 文件里面

如何把样式导入到当前页面？在 style 中导入即可把样式导入，代码如下：

<style>
	@import url("./flex-direction.css");
</style>

style的属性

@charset
@charset CSS @规则指定样式表中使用的字符编码。它必须是样式表中的第一个元素，而前面不得有任何字符。因为它不是一个嵌套语句，所以不能在@规则条件组中使用。如果有多个 @charset @规则被声明，只有第一个会被使用，而且不能在 HTML 元素或 HTML 页面的字符集相关 <style> 元素内的样式属性内使用。
(Edge 12, Firefox 1, Safari 4, Chrome 2, IE 5, Opera 9)

Emmet Abbreviation
@import url(|);  表示我们可以导入某个文件

总结：

我们如何将样式剪切到外部，从外部导入到我们当前的一个文件里面去作一个相应的使用，同时方便我们去维护。

display的属性

direction
direction CSS 属性用于设置文本、表格列和水平溢出的方向。对于从右到左书写的语言（如希伯来语或阿拉伯语），应将该属性设置为 rtl；对于从左到右书写的语言（如英语和大多数其他语言），则应将该属性设置为 ltr。
(Edge 12, Firefox 1, Safari 1, Chrome 2, IE 5, Opera 9)
Syntax: ltr | rtl

display
CSS display 属性设置元素是否被视为块或者内联元素以及用于子元素的布局，例如流式布局、网格布局或弹性布局。
(Edge 12, Firefox 1, Safari 1, Chrome 1, IE 4, Opera 7)
Syntax: [ <display-outside> || <display-inside> ] | <display-listitem> | <display-internal> | <display-box> | <display-legacy>
MDN Reference 

flex
该元素的行为类似块级元素并且根据弹性盒模型布局它的内容。
(Edge 12, Firefox 1, Safari 1, Chrome 1, IE 4, Opera 7) 


block
该元素生成一个块级元素盒，在正常的流中，该元素之前和之后产生换行。 


contents
这些元素自身不会产生特定的盒子。它们被伪盒子（pseudo-box）和子盒子取代。请注意，CSS Display Level 3 规范中定义了 contents 值如何影响“异常元素”——这些元素不是纯粹由 CSS 盒模型概念呈现的（例如替换元素）。更多的细节请参见附录 B：display 的影响：异常元素的内容。 由于浏览器的一个错误，该元素目前不会被添加到无障碍树中——屏幕阅读器将不会看到里面的内容。更多细节，参见下面的无障碍问题。
(Edge 12, Firefox 1, Safari 1, Chrome 1, IE 4, Opera 7) 


flow
该元素使用流式布局（块和内联布局）来排布它的内容。 如果它的外部显示类型是 inline 或 run-in，并且它参与一个块或者内联格式上下文，那么它将生成一个内联盒子。否则它将生成一个块容器盒。 根据其他属性的值（例如 position、float 或 overflow）以及它自身是否参与到块或者内联格式化上下文，它要么为它的内容建立新的块级格式化上下文（BFC），要么将其内容集成到其父元素的格式化上下文中。 

flex-wrap
CSS 的 flex-wrap 属性指定 flex 元素单行显示还是多行显示。如果允许换行，这个属性允许你控制行的堆叠方向。
(Edge 12, Firefox 28, Safari 9, Chrome 29, IE 11, Opera 17)
Syntax: nowrap | wrap | wrap-reverse

display: flex; 代表当前的容器他就是一个flex容器。他里面使用的布局就是flex布局

flex-direction 元素的换行实现代码如下

1, pages/flex/flex-diretion/flex-direction.vue
<template>
	<view class="container">
		<view class="green txt">
			A
		</view>

		<view class="red txt">
			B
		</view>

		<view class="blue txt">
			C
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {

			}
		},
		methods: {

		}
	}
</script>

<style>
	@import url("./flex-direction.css");
</style>





2, pages/flex/flex-diretion/flex-direction.css
.container {
	/*定义flex容器*/
	display: flex;
	/*
	设置容器内部元素的排列方向
	row: 定义排列方式 从左向右的
	row-reverse: 定义排列方式 从右向左
	column: 定义排列方式 自上而下
	column-reverse: 定义排列方式  自下而上
	*/
	/* flex-direction: row;*/
	/* flex-direction: row-reverse; */
	/* flex-direction: column; */
	flex-direction: column-reverse;
}

.txt {
	font-size: 20px;
	width: 100rpx;
	height: 100rpx;
}

.green {
	background-color: #008000;
}

.red {
	background-color: #FF0000;
}

.blue {
	background-color: blue;
}

flex-wrap 元素的换行

2, flex-wrap: 使容器内的元素换行

换行的前提是我们元素要有很多个，如果数量小的话，肯定换行不行

flex-wrap有如下三个属性

1, nowrap 我们的元素是不会换行的，他只会永远累加在最后一个元素之后，这个时候，由于我们元素设置了一定的宽度，它会进行一些相应的缩放，他的缩放比例每一个元素都是一致的，我们可以通过代码去观察。

2，wrap 我们的元素当超过了一定数量之后，那么他就会到第二行去进行一个排列

3，wrap-reverse 与wrap进行了一个逆向的换行排序，我们也会通过代码去观察一下

flex-wrap 的属性

flex-wrap
CSS 的 flex-wrap 属性指定 flex 元素单行显示还是多行显示。如果允许换行，这个属性允许你控制行的堆叠方向。
(Edge 12, Firefox 28, Safari 9, Chrome 29, IE 11, Opera 17)
Syntax: nowrap | wrap | wrap-reverse


nowrap
flex 的元素被摆放到到一行，这可能导致 flex 容器溢出。cross-start 会根据 flex-direction 的值等价于 start 或 before。为该属性的默认值。

wrap
The flexbox is multi-line.

wrap-reverse
和 wrap 的行为一样，但是 cross-start 和 cross-end 互换。

注意：flex-wrap 的属性是写在 container 容器里面的

flex-wrap 元素的换行实现代码如下

1, pages/flex/flex-wrap/flex-wrap.vue
<template>
	<view class="container">
		<view class="green txt">
			A
		</view>

		<view class="red txt">
			B
		</view>

		<view class="blue txt">
			C
		</view>

		<view class="orange txt">
			D
		</view>

		<view class="yellow txt">
			E
		</view>

		<view class="pink txt">
			F
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {

			}
		},
		methods: {

		}
	}
</script>

<style>
	@import url("./flex-wrap.css");
</style>





2, pages/flex/flex-wrap/flex-wrap.css
.container {
	/*定义flex容器*/
	display: flex;
	/*
	设置容器内部元素的排列方向
	row: 定义排列方式 从左向右的
	row-reverse: 定义排列方式 从右向左
	column: 定义排列方式 自上而下
	column-reverse: 定义排列方式  自下而上
	*/
	/* flex-direction: row;*/
	/* flex-direction: row-reverse; */
	/* flex-direction: column; */
	/* flex-direction: column-reverse; */
	flex-direction: row;
	/*
	nowrap: 不换行
	wrap: 换行
	*/
	/* flex-wrap: nowrap; */
	flex-wrap: wrap;
	/* flex-wrap: wrap-reverse; */
}

.txt {
	font-size: 20px;
	width: 150rpx;
	height: 150rpx;
}

.green {
	background-color: #008000;
}

.red {
	background-color: #FF0000;
}

.blue {
	background-color: blue;
}

.orange {
	background-color: orange;
}

.yellow {
	background-color: yellow;
}

.pink {
	background-color: pink;
}

3, justify-content 设置元素在主轴的对齐方式

他是指我们在容器里面的元素对他在主轴上针对对齐方式而做的设置，那么对齐方式的话一般来说，我们用得比较多的对齐方式就是左对齐，居中对齐，右对齐，那么flex容器里面，他也是这样的对齐方式。

justify-content 的属性有如下5种

1，flex-start 左对齐

2，flex-end 右对齐

3，center 居中对齐

4，space-between 元素与元素之间所保留的间隙是等距的(剩余间隙/元素个数-1)

5，space-around 沿主轴方向元素两边平均等分剩余空白部分，最左(上)或最右(下)和元素之间距离是1:2的关系

注意：我们要去针对容器内的元素做对齐设置，我们都是要到样式文件的container{}容器里面去做设置。

justify-content 的属性

justify-content
CSS justify-content 属性定义浏览器如何沿着弹性容器的主轴和网格容器的行向轴分配内容元素之间和周围的空间。
(Edge 12, Firefox 20, Safari 9, Chrome 29, IE 11, Opera 12)
Syntax: normal | <content-distribution> | <overflow-position>? [ <content-position> | left | right ]

flex-start
元素紧密地排列在弹性容器的主轴起始侧。仅应用于弹性布局的项目。对于不是弹性容器里的元素，此值将被视为 start。


flex-end
元素紧密地排列在弹性容器的主轴结束侧。仅应用于弹性布局的元素。对于不是弹性容器里的元素，此值将被视为 end。 


center
伸缩元素向每行中点排列。每行第一个元素到行首的距离将与每行最后一个元素到行尾的距离相同。 


space-between	两端对齐，空白均匀地填充到flex成员项之间
在每行上均匀分配弹性元素。相邻元素间距离相同。每行第一个元素与行首对齐，每行最后一个元素与行尾对齐。 


space-around 
在每行上均匀分配弹性元素。相邻元素间距离相同。每行第一个元素到行首的距离和每行最后一个元素到行尾的距离将会是相邻元素之间距离的一半。 


space-evenly
flex 项都沿着主轴均匀分布在指定的对齐容器中。相邻 flex 项之间的间距，主轴起始位置到第一个 flex 项的间距，主轴结束位置到最后一个 flex 项的间距，都完全一样。

设置元素在主轴上的对齐方式

/* 设置为主轴 */

flex-direction: row;

flex-start: (默认)左对齐

flex-end: 右对齐

center: 居中对齐

space-between: 元素与元素之间所保留间隙是等距的进行等分

space-around: 在每行上均匀分配弹性元素。相邻元素间距离相同。每行第一个元素到行首的距离和每行最后一个元素到行尾的距离将会是相邻元素之间距离的一半。

/* 设置为主轴 */

flex-direction: column;

在容器里面设置

height: 800rpx;
background-color: #FFCBCB;

flex-start: (默认)自上而下对齐

flex-end: 自下而上对齐

center: 沿主轴方向居中对齐

space-between: 沿主轴方向元素与元素之间所保留间隙是等距的进行等分

space-around: 沿主轴方向在每行上均匀分配弹性元素。相邻元素间距离相同。每行第一个元素到行首的距离和每行最后一个元素到行尾的距离将会是相邻元素之间距离的一半。

设置元素在主轴上的对齐方式实现代码如下：

1, pages/flex/justify-content/justify-content.vue
<template>
	<view class="container">
		<view class="green txt">
			A
		</view>

		<view class="red txt">
			B
		</view>

		<view class="blue txt">
			C
		</view>

		<view class="yellow txt">
			D
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {

			}
		},
		methods: {

		}
	}
</script>

<style>
	@import url("./justify-content.css");
</style>




2, pages/flex/justify-content/justify-content.css

.container {
	/*定义flex容器*/
	display: flex;
	/*
	设置容器内部元素的排列方向
	row: 定义排列方式 从左向右的
	row-reverse: 定义排列方式 从右向左
	column: 定义排列方式 自上而下
	column-reverse: 定义排列方式  自下而上
	*/

	/* flex-direction: row; 主轴 */

	/* 设置为主轴 */
	flex-direction: column;


	/* flex-direction: row-reverse; */
	/* flex-direction: column; */
	/* flex-direction: column-reverse; */

	/*
	设置元素在主轴上的对齐方式
	flex-start: (默认)左对齐 或者向上对齐(自上而下对齐)
	flex-end: 右对齐 或者向下对齐 (自下而上对齐)
	center: 居中对齐 或者沿主轴方向居中对齐
	space-between: 沿主轴方向两端对齐，元素之间平均等分剩余空白间隙部分(老师的) 元素与元素之间所保留间隙是等距的进行等分
	space-around: 沿主轴方向元素两边平均等分剩余空白部分，最左(上)或最右(下)和元素之间距离是1:2的关系(老师的) 在每行上均匀分配弹性元素。相邻元素间距离相同。每行第一个元素到行首的距离和每行最后一个元素到行尾的距离将会是相邻元素之间距离的一半。 
	*/
	justify-content: space-between;

	height: 800rpx;
	background-color: #FFCBCB;
}

.txt {
	font-size: 20px;
	width: 100rpx;
	height: 100rpx;
}

.green {
	background-color: #008000;
}

.red {
	background-color: #FF0000;
}

.blue {
	background-color: blue;
}

.yellow {
	background-color: yellow;
}

4, align-items 设置元素在交叉轴上的对齐方式

用户在主轴上对齐方式，常用的有5种方式，flex容器的元素除了在主轴上可以对齐的，在交叉轴上，我们也是可以对他进行对齐方式的设置。他也有常用的5种对齐方式，只不过他是和在主轴上的对齐方式是有一些不同的。

1, flex-start

2, flex-end

3, center

4, baseline

5, stretch(默认)

stretch 默认指拉伸，如果我们没有对元素去设置高度的话，他在我们交叉轴上是会进行一个拉伸的

baseline 基线或者基准线，他是指如果我们的元素里面有的话，他会把我们的文字作为一个基准线，排成一行，这些我们都会通过代码去做相应的展示。

一样我们参照 flex-direction, 把里面的文件也拷贝过来，并且做了一个重命名。

设置容器的高度与背景色

height: 800rpx;
background-color: #FFCBCB;

stretch: 此时我们的容器高度为800rpx,我们的背景色为粉色，现在我们这三个元素A.B,C默认就是采取了stretch的方式拉伸，虽然我们在代码里面并没有设置元素他在交叉轴上的对齐方式，但是他也默认地帮我们拉伸了，所以stretch是拉伸，他把我们元素的高度拉伸到和外部容器的高度一摸一样

baseline: 他是针对我们文字做的一个相应的对齐，

元素A设置为font-size:30px,

元素B设置为font-size:10px,

元素C设置为font-size:50px,

此时我们的ABC，他们的字体有放到或者缩小，很显然他们整体的样式看上去并不一致，假设我们要把ABC放在同一条基线上，假设我们在这里有一条基准线，让他们在同一条线上去进行相应的写字，我们去写字板上划一条线，然后在这条线上去写相应的文字，文字有不同的大小，我们不论文字大还是文字小，都是在同一条线上的，所以此时我们就可以使用baseline,如下图所示情况，我们就可以使用baseline的属性了

使用baseline前

height和background-color属性

height
height CSS 属性指定了一个元素的高度。默认情况下，这个属性决定的是内容区（ content area）的高度，但是，如果将 box-sizing 设置为 border-box , 这个属性决定的将是边框区域（border area）的高度。
(Edge 12, Firefox 1, Safari 1, Chrome 1, IE 4, Opera 7)
Syntax: <viewport-length>{1,2}
MDN Reference 



background-color
CSS属性中的 background-color 会设置元素的背景色，属性的值为颜色值或关键字"transparent"二者选其一。
(Edge 12, Firefox 1, Safari 1, Chrome 1, IE 4, Opera 3)
Syntax: <color>
MDN Reference

align-items的属性

align-items
CSS align-items 属性将所有直接子节点上的 align-self 值设置为一个组。align-self 属性设置项目在其包含块中在交叉轴方向上的对齐方式。

(Edge 12, Firefox 20, Safari 9, Chrome 29, IE 11, Opera 16)

Syntax: normal | stretch | <baseline-position> | [ <overflow-position>? <self-position> ]

flex-start
元素向侧轴起点对齐。

flex-end
元素向侧轴终点对齐。 

center
元素在侧轴居中。如果元素在侧轴上的高度高于其容器，那么在两个方向上溢出距离相同。 

baseline
所有元素向基线对齐。侧轴起点到元素基线距离最大的元素将会于侧轴起点对齐以确定基线。

stretch
No description on MDN 

first baseline
所有元素向基线对齐。侧轴起点到元素基线距离最大的元素将会于侧轴起点对齐以确定基线。

normal
这个关键字的效果取决于我们处在什么布局模式中：
  在绝对定位的布局中，对于被替代的绝对定位盒子，这个效果和start?的效果的一样；对于其他所有绝对定位的盒子，这个效果和stretch的效果一样。
  在绝对定位布局的静态位置上，效果和stretch一样。
  对于那些弹性项目而言，效果和stretch一样。
  对于那些网格项目而言，效果和stretch一样，除了有部分比例或者一个固定大小的盒子的效果像start。
  这个属性不适用于块级盒子和表格。
  
  
font-size
font-size CSS 属性设置字体大小。更改字体大小还会更新字体大小相关的 <length> 单位，例如 em、ex 等。
(Edge 12, Firefox 1, Safari 1, Chrome 1, IE 5, Opera 7)
Syntax: <absolute-size> | <relative-size> | <length-percentage>
MDN Reference 



font
font 属性可以用来作为 font-style, font-variant, font-weight, font-size, line-height 和 font-family 属性的简写，或将元素的字体设置为系统字体。
(Edge 12, Firefox 1, Safari 1, Chrome 1, IE 3, Opera 3)
Syntax: [ [ <'font-style'> || <font-variant-css21> || <'font-weight'> || <'font-stretch'> ]? <'font-size'> [ / <'line-height'> ]? <'font-family'> ] | caption | icon | menu | message-box | small-caption | status-bar
MDN Reference

/* 设置容器的主轴 */

flex-direction: row;

设置容器的高度与背景色

height: 800rpx;
background-color: #FFCBCB;

stretch: (默认)当元素的高度没有设置，则元素的高度会拉伸至容器高度一致。

flex-start: 在交叉轴上向起点位置(向上/向左)对齐

flex-end: 在交叉轴上向终点位置(向下/向右)对齐

center: 居中对齐 (所有元素在交叉轴居中位置对齐)

baseline: 他是针对我们文字做的一个相应的对齐,所有元素向基线对齐。侧轴起点到元素基线距离最大的元素将会于侧轴起点对齐以确定基线。保证元素中的文字在同一条基准线(保证每个文字都在同一条线上)

/* 设置容器的主轴 */

flex-direction: row-reverse;

stretch: 所有元素都设置了高度，所以此时没有拉伸

flex-start

flex-end

center

baseline

/* 设置容器的主轴 */

flex-direction: column;

stretch:

flex-start

flex-end

center

baseline

/* 设置容器的主轴 */

flex-direction: column-reverse;

stretch:

flex-start

flex-end

center

baseline

align-items: 设置元素在交叉轴上的对齐方式实现代码如下：

1, pages/flex/align-items/align-items.vue
<template>
	<view class="container">
		<view class="green txt" style="height: 200rpx;font-size: 30px;">
			A
		</view>

		<view class="red txt" style="font-size: 10px;">
			B
		</view>

		<view class="blue txt" style="height: 320rpx;font-size: 50px;">
			C
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {

			}
		},
		methods: {

		}
	}
</script>

<style>
	@import url("./align-items.css");
</style>







2, pages/flex/align-items/align-items.css
.container {
	/*定义flex容器*/
	display: flex;
	/*
	设置容器内部元素的排列方向
	row: 定义排列方式 从左向右的
	row-reverse: 定义排列方式 从右向左
	column: 定义排列方式 自上而下
	column-reverse: 定义排列方式  自下而上
	*/

	/* 设置容器的主轴 */
	flex-direction: row;
	/* flex-direction: row-reverse; */
	/* flex-direction: column; */
	/* flex-direction: column-reverse; */

	/*
	设置容器中元素在交叉轴上的对齐方式
	stretch: (默认)当元素的高度没有设置，则元素的高度会拉伸至容器高度一致。
	flex-start: 在交叉轴上向起点位置(向上/向左)对齐
	flex-end: 在交叉轴上向终点位置(向下/向右)对齐
	center: 居中对齐 (所有元素在交叉轴居中位置对齐)
	baseline: 保证元素中的文字在同一条基准线(保证每个文字都在同一条线上) 老师的 他是针对我们文字做的一个相应的对齐,所有元素向基线对齐。侧轴起点到元素基线距离最大的元素将会于侧轴起点对齐以确定基线。
	*/
	align-items: stretch;

	/* 设置容器的高度和背景色 */
	height: 800rpx;
	background-color: #FFCBCB;
}

.txt {
	font-size: 20px;
	width: 150rpx;
	height: 150rpx;
}

.green {
	background-color: #008000;
}

.red {
	background-color: #FF0000;
}

.blue {
	background-color: blue;
}

5, align-content: 设置轴线的对齐方式（轴线当作元素）

设置轴线的对齐方式，就是说我们除了可以把元素去进行对齐方式的排列，我们也可以把容器内部的每一根轴当作元素对齐方式的排列，他是有一个前提，就是说，我们必须要定义多根轴线，如果说我们当前的容器内部，只有一根轴线，只有一行的时候，他是不可以去做对齐方式的，他必须要有多根轴线，需要有多行，才可以设置轴线的对齐方式，他有如下6个对齐方式：

1，flex-start

2，flex-end

3，center

4，stretch

5，space-between

6，space-around

background-color属性

background-color
CSS属性中的 background-color 会设置元素的背景色，属性的值为颜色值或关键字"transparent"二者选其一。
(Edge 12, Firefox 1, Safari 1, Chrome 1, IE 4, Opera 3)
Syntax: <color>
MDN Reference

align-content属性

align-content
CSS 的 align-content 属性设置了浏览器如何沿着弹性盒子布局的纵轴和网格布局的主轴在内容项之间和周围分配空间。
(Edge 12, Firefox 28, Safari 9, Chrome 29, IE 11, Opera 16)
Syntax: normal | <baseline-position> | <content-distribution> | <overflow-position>? <content-position>
MDN Reference 

flex-start
所有行从垂直轴起点开始填充。第一行的垂直轴起点边和容器的垂直轴起点边对齐。接下来的每一行紧跟前一行。 

flex-end
所有行从垂直轴末尾开始填充。最后一行的垂直轴终点和容器的垂直轴终点对齐。同时所有后续行与前一个对齐。 


center
所有行朝向容器的中心填充。每行互相紧挨，相对于容器居中对齐。容器的垂直轴起点边和第一行的距离相等于容器的垂直轴终点边和最后一行的距离。 

stretch

space-between

space-around




space-evenly
所有行沿垂直轴均匀分布在对齐容器内。每对相邻的项之间的间距，主开始边和第一项，以及主结束边和最后一项，都是完全相同的。

/* 设置主轴 */

flex-direction: column;

center：当轴线超过1条的时候，flex容器可以把多条轴线视为元素对待，可以进行对齐。

flex-start：所有行从垂直轴起点开始填充。第一行的垂直轴起点边和容器的垂直轴起点边对齐。接下来的每一行紧跟前一行。

flex-end: 所有行从垂直轴末尾开始填充。最后一行的垂直轴终点和容器的垂直轴终点对齐。同时所有后续行与前一个对齐。

space-between

space-between: 两端对齐，元素之间的空白等比切分

space-between 将容器的高度由'600rpx'改为'400rpx' 效果如下：

space-between: 两端对齐，元素之间的空白等比切分

space-around

space-around: 轴线两边的空白等比切分

space-around 将容器的高度由'600rpx'改为'400rpx' 效果如下：

space-around: 轴线两边的空白等比切分

space-evenly

space-evenly: 元素空白按元素个数+1 等比切分

space-evenly 将容器的高度由'600rpx'改为'400rpx' 效果如下：

space-evenly: 元素空白按元素个数+1 等比切分

baseline

stretch

没有取消宽度前设置如下所示

stretch 将元素的宽度取消，就可以实现拉伸

stretch：当宽度 width 没有设置的时候，轴线可以被拉伸。

.txt {
    font-size: 20px;
    /* width: 150rpx; */
    height: 150rpx;
}

取消宽度后设置如下所示

/* 设置主轴 */

flex-direction: column-reverse;

flex-start

flex-end

center

space-between

space-around

/* 设置主轴 */

flex-direction: row;

flex-start

flex-end

center

stretch

space-between 将容器宽度定为500rpx,如下图所示

space-around 将容器宽度定为500rpx,如下图所示

stretch 将元素的高度取消，就可以实现拉伸

.txt {
	font-size: 20px;
	width: 150rpx;
	/* height: 150rpx; */
}

/* 设置主轴 */

flex-direction: row-reverse;

flex-start 将容器宽度定为500rpx,如下图所示

flex-end 将容器宽度定为500rpx,如下图所示

center 将容器宽度定为500rpx,如下图所示

stretch 将容器宽度定为500rpx,如下图所示

space-between 将容器宽度定为500rpx,如下图所示

space-around 将容器宽度定为500rpx,如下图所示

align-content: 设置轴线的对齐方式(轴线当做元素) 实现代码如下:

1, pages/flex/align-content/align-content.vue
.container {
	/*定义flex容器*/
	display: flex;
	/*
	设置容器内部元素的排列方向
	row: 定义排列方式 从左向右的
	row-reverse: 定义排列方式 从右向左
	column: 定义排列方式 自上而下
	column-reverse: 定义排列方式  自下而上
	*/

	/* 设置主轴 */
	flex-direction: row;
	/* flex-direction: row-reverse; */
	/* flex-direction: column; */
	/* flex-direction: column-reverse; */


	/*
	nowrap: 不换行
	wrap: 换行
	wrap-reverse: 逆向换行
	*/
	/* flex-wrap: nowrap; */
	flex-wrap: wrap;
	/* flex-wrap: wrap-reverse; */

	/*
	当轴线超过1条的时候，flex容器可以把多条轴线视为元素对待，可以进行对齐。
	center: 居中
	flex-start: 向左对齐
	flex-end: 向有对齐
	stretch: 当宽度 width 没有设置的时候，轴线可以被拉伸。
	space-around: 轴线两边的空白等比切分
	space-between: 两端对齐，元素之间的空白等比切分
	space-evenly: 元素空白按 元素个数+1 等比切分
	*/

	/* 交叉轴 */
	align-content: flex-start;
	/* align-content: flex-end; */
	/* align-content: center; */
	/* align-content: stretch; */
	/* align-content: space-around; */
	/* align-content: space-between; */
	/* align-content: space-evenly; */
	/* align-content: baseline; */

	/* width: 500rpx; */
	height: 600rpx;
	background-color: gray;
}

.txt {
	font-size: 20px;
	width: 150rpx;
	height: 150rpx;
}

.green {
	background-color: #008000;
}

.red {
	background-color: #FF0000;
}

.blue {
	background-color: blue;
}

.orange {
	background-color: orange;
}

.yellow {
	background-color: yellow;
}

.pink {
	background-color: pink;
}





2, pages/flex/align-content/align-content.css
<template>
	<view class="container">
		<view class="green txt">
			A
		</view>

		<view class="red txt">
			B
		</view>

		<view class="blue txt">
			C
		</view>

		<view class="orange txt">
			D
		</view>

		<view class="yellow txt">
			E
		</view>

		<view class="pink txt">
			F
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {

			}
		},
		methods: {

		}
	}
</script>

<style>
	@import url("./align-content.css");
</style>