flex容器布局flex-basis实现button挪动

flex容器布局

背景介绍

我准备完成一个弹性盒子的布局，html如下：

html 复制代码

<div class="slideContainer">
<h1>选择时间段</h1>
<br/>
<br/>
<p class="priceTxt">时间范围:<span id="rangeText">${minNumShow}-${maxNumShow}</span></p>
<div class="rangeContainer" id="rangeContainer">
    <div class="bgRange" id="bgRange"></div>
    <div class="priceRange" id="priceRange"></div>
    <span id="leftBtn" class="leftBtn"></span>
    <span id="rightBtn" class="rightBtn"></span>
</div>
<br/>
<br/>
<h1>选择类型</h1>
<div class="TypeSlide">
<input type="checkBox">
<input type="checkBox">
<input type="checkBox">
<input type="checkBox">
</div>
<button class="confirmSelect">确认选择</button>
</div>

其中的css如下：

css 复制代码

.slideContainer{
    min-width: 100%;
    min-height: 850px;
    position: absolute;
	/*弹性布局 让子元素称为弹性项目*/
	display: flex;
	/*让弹性项目垂直排列  原理是改变弹性盒子的主轴方向
	父元素就是弹性盒子  现在改变后的主轴方向是向下了*/
	flex-direction: column;
	flex-wrap: wrap;
	/*让弹性项目在交叉轴方向水平居中  现在主轴的方向是向下
	交叉轴的方向是与主轴垂直 交叉轴的方向是向右*/
	align-items: center;

}
.TypeSlide{
    display: flex;
    flex-flow:column nowrap;
}
.slideContainer button{
	/*overflow: hidden;*/
	position: relative;
	color: #03e9f4;
	font-size:20px;
	border:none;
	background:Transparent;
	/*同样加个过渡*/
	transition: all 0.5s;
}

结果网页展示效果如下所示：

本来界面足够大，并且中间一部分可能会改变高度，所以就有一个需求让这个按钮挪到页面底端。一开始试了好几次都没有成功。

尝试及问题解决

根据flex布局的属性，我的外层容器主轴方向为column，所以我尝试用justify-content：flex_end来元素对齐全，但是这种实现却是所有的元素都从底部对齐了按钮和中间一部分并没有分开。使用algn-items：flex_end会将按钮对其到最右端。self-algin：也是对于交叉轴方向的对齐。中间甚至考虑放弃使用这种布局，采用绝对坐标来实现了。后来继续学习发现flex布局有个属性叫flex-basis：这个属性是规定子元素在flex容器中最初的占用空间大小，如果不指定，那么这个大小就是各个子元素自己大小（通常是自适应内容）。如果我将前一个元素在容器中占用空间变大，是不是就变相将button给移到底部呢。于是我在css加入了这么一段：

html 复制代码

.TypeSlide{
    display: flex;
    flex-basis:500px;
    flex-flow:column nowrap;
}

神奇的效果出现了

中间即使偶尔展开一些东西，整体界面没有太大变化，明显感觉效果好了不少。另外flex-grow和flex-shrink是约定拉伸和压缩的占比的，我暂时没用到。这里先mark一下。这里有一个介绍各个布局的网站真是不错链接地址