深入理解 CSS Flexbox 布局

Flex 容器 Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。

display: flex;

一、容器的属性

① flex-direction

属性	含义
column	竖排，从上到下排列
column-reverse	反向竖排，排布方向与flex-direction:column相反
row	横排，从左到右排布
row-reverse	反向横排，排布方向与flex-direction:row相反

② flex-wrap:

属性	含义
nowrap	不换行，flex 成员项在一行排布，排布的开始位置由direction指定
wrap	换行，第一行在上方，flex 成员项在多行排布，排布的开始位置由direction指定
wrap-reverse	换行，第一行在下方，行为类似于wrap，排布方向与其相反

nowrap：

wrap：

wrap-reverse：

③ flex-flow：让弹性盒的元素以相反的顺序显示，且在必要的时候进行拆行：

display:flex;
flex-flow:row-reverse wrap;

④ justify-content:

属性	含义
center	弹性项目居中紧挨着填充。
flex-start	弹性项目向行头紧挨着填充
flex-end	弹性项目向行尾紧挨着填充。
space-between	弹性项目平均分布在该行上。
space-around	弹性项目平均分布在该行上，两边留有一半的间隔空间。

⑤ align-items:

属性	含义
center	弹性盒子元素在该行的侧轴（纵轴）上居中放置。
flex-start	弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴起始边界。
flex-end	弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴结束边界。
stretch	如果指定侧轴大小的属性值为’auto’，则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸，但同时会遵照’min/max-width/height’属性的限制。
baseline	项目的第一行文字的基线对齐。

⑥ align-content

属性	含义
flex-start	与交叉轴的起点对齐。
flex-end	与交叉轴的终点对齐。
center	与交叉轴的中点对齐。
space-between	与交叉轴两端对齐，轴线之间的间隔平均分布。
space-around	每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。
stretch（默认值）	轴线占满整个交叉轴。

二、项目的属性

① order属性

.item {
  order: <integer>;
}

数值越小，排列越靠前，默认为0。

② flex-grow属性

flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。

.item {
  flex-grow: <number>;
}

补充：如果所有项目的flex-grow属性都为1，则它们将等分剩余空间（如果有的话）。如果一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍。

③ flex-shrink属性

flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。

.item {
flex-shrink: ; /* default 1 */
}

如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。

负值对该属性无效。

④ flex-basis属性

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

.item {
  flex-basis: <length> | auto;
}

它可以设为跟width或height属性一样的值（比如350px），则项目将占据固定空间。

⑤ 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)。

建议优先使用这个属性，而不是单独写三个分离的属性，因为浏览器会推算相关值。

⑥ 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属性完全一致。

补充:

按钮置底方法

<template>
	<view class="button-all">
		<button class="button">置底</button>
	</view>
</template>
<style>
	.button-all {
		display: flex;
		position: fixed;
		bottom: 57rpx;    //距离屏幕底部高度
		left: 0;
		right: 0;
	}

	.button {
		width: 320rpx;
		height: 80rpx;
		line-height: 80rpx;
		color: #fff;
		font-size: 32rpx;
		border-radius: 47rpx;
		background-color: #2b9939;
	}
</style>

效果：