在html css设计中，对于控件布局是一个界面美观重要工具。传统布局工具是盒状模式,它布局通过依赖 display属性 + position属性 + float属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。

因此在2009年，W3C推出 flex布局，也叫flexbox，直译就是弹性盒子。它可以简便、完整、响应式地实现各种页面布局，是一个越来越流行的布局方式，常见浏览器都支持，而在微信小程序，uni-app，vue等各种环境也缺省使用这个布局。因此做前端开发,flex布局必须要掌握的。

我们首先要学习一些flex布局的基本概念

在 flex 容器中默认存在两条轴，水平方向的主轴(main axis) 和垂直方向的交叉轴(cross axis)，

在容器中的每个单元块被称之为 flex item，每个项目占据的主轴空间为 (main size),你可以理解为宽，占据的交叉轴的空间为 (cross size)，你可以理解为高。

在css中,指定display为flex即表示采用flex布局

.container {
    display: flex 
}

我们使用flex布局最重要一点是，每个元素主要用它的在不同屏幕下如何动态变化。因此需要有一个属性来定义这一些变化

其中最重要有：

flex-direction属性决定主轴的方向（即元素的排列方向）
flex-wrap: 决定容器内元素是否可换行
justify-content：定义了元素在主轴的对齐方式
align-items: 定义了元素在交叉轴上的对齐方式
align-content: 定义了多根轴线的对齐方式，即定义换行后，换行之间的对齐方式，没有换行这一属性不起作用

有一个在线可视工具可以演示这一些属性值对于控制布局产生的影响，一但改变值就会实时演示，非常直观。

但如果需要更加详细的细节控制，我们需要一些其它工具，在使用这一些工具前，我们先了解一些flex item的用于布局内部属性。

order: 定义项目在容器中的排列顺序，数值越小，排列越靠前，默认值为 0
flex-basis 定义了该flex元素的基准大小，缺省值是auto,也可以一个确定的值，比如100px，你可以理解是在排列轴上的初始值。
flex-grow定义该flex元素在主轴上的扩展比例，它是一个确定整数，可正可负。比如这一行元素grow为1，表示各个元素等比扩展。默认值为 0，即如果存在剩余空间，也不放大
flex-shrink: 定义了项目的缩小比例，如果所有项目的 flex-shrink 属性都为 1，当空间不足时，都将等比例缩小，为 0，其他项目都为 1，则空间不足时，前者不缩小。
flex: flex-grow, flex-shrink 和 flex-basis的简写，即用空格隔开三个值对应着 flex-grow flex-shrink flex-basis三个值。比如 flex: 0 1 0%

有一些常用值

      flex: 1
  //相当于，可以任向扩大缩小，初始值为0
.item {
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: 0%;
}

flex:0
//可以
.item {
    flex-grow: 0;
    flex-shrink: 1;
    flex-basis: 0%;
}

flex: 0 0 100rpx; /* 不放大不缩小固定100rpx *
/*可以简写成*/
flex: 100rpx

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

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

有一些在线工具可以控制元素，虽然不是一比一仿真也是减轻一些工作。

另外一个有用工具就是Chrome的元素检查，可以实在检测一些定义上错误

Flex实例

一个常见例子，启动画面，下方有四个按钮固定在底部，顶部空间随屏幕大小拉伸，logo居中显示在顶部空间。以下就是使用flex布局实现真实效果。

这个采用列排列，每个按钮布局值 flex-grow: 0; flex-shrink: 0;表示大小不变

而顶部空间flex-grow:1 ，这样相当于顶部空间将随屏幕大小拉伸。

而logo居中显示在顶部空间，也是嵌套一个flex布局，并且定义水平和垂直居中即可实现

.top {
	flex:1;  //上一层flex的定义

  //嵌套一个flex
	display:flex;
	justify-content:center;
	align-items:center;
}

.logo {
    width: 11.25rem;
    height: 12.13rem;
}

整体布局

<template>
    <view class="container"> 
          <image class="bg-set" src="/static/images/main_bg.png"></image>
          <view class="content flex-col items-center">
			  <view class="top">
          <!--顶部空间-->
				  <image
				    class="logo"
				    src="/static/images/sb3_logo.png"
				  />
			  </view>
			  
			  <!--下面按钮-->
			    <image
			      class="button1"
			      src="/static/images/button1.png"
			      @click="onClick"
			    ></image>
			    <image
			    class="button2"
			    src="/static/images/button2.png"
				   />
			    <image
			      class="button3"
			      src="/static/images/button3.png"
					/>
			    <image
			     class="button4"
			     src="/static/images/button4.png"	
					 />
             <!--用于底部margin,不能用margin-botton属性，否则拉伸后最后一
             个按钮会消失一半 -->
			   <view class="mbottom"	></view>	 
		  </view>
         
	   </view>
	</view> 
</template>

css定义

.container{
		position: fixed;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
	}
.bg-set{
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: -1;
}

.content {
  
  display:flex;
  width: 100%;
  height: 100%;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: space-evenly;
  align-content: center;
  align-items: center;
  
  
  
}

.top {
	flex:1;

	display:flex;
	justify-content:center;
	align-items:center;
}

.logo {
    width: 11.25rem;
    height: 12.13rem;
}

.button1 {
  width: 21.5rem;

    order: 2;
    align-self: auto;
 flex-basis: 5rem;
 flex-grow: 0;
 flex-shrink: 0;
}
.button2 {
   width: 26.31rem;
    order: 3;
    align-self: auto;
    flex-basis: 5rem;
    flex-grow: 0;
    flex-shrink: 0;
}
.button3 {
    width: 19.63rem; 
    order: 4;
    align-self: auto;
    flex-basis: 5.4rem;;
    flex-grow: 0;
    flex-shrink: 0;
}
.button4 {
    width: 23.88rem;
    order: 5;
    align-self: auto;
    flex-basis: 5.4rem;
    flex-grow: 0;
    flex-shrink: 0;
}

.mbottom{
	order: 6;
	width:100%;
	flex:0 0 2rem;
}

#头条创作挑战赛#

李成笔记网

专注域名、站长SEO知识分享与实战技巧

前端Flex布局可视化布局工具介绍，vue和html5快速设计利器

Flex实例