在小程序中对flex布局的理解

 前言

在工作中flex布局，也不怎么常用，毕竟uniapp 中的uni -ui 中就有  uni-row框架的存在，

它的基础代码就是

<uni-row class="demo-uni-row">
	<uni-col>
		<view class="demo-uni-col dark_deep"></view>
	</uni-col>
</uni-row>

<uni-row class="demo-uni-row">
	<uni-col :span="12">
		<view class="demo-uni-col dark"></view>
	</uni-col>
	<uni-col :span="12">
		<view class="demo-uni-col light"></view>
	</uni-col>
</uni-row>

在写代码时，可以通过输入 urow，更加快速的获取代码

相信大家，肯定会非常熟练的使用 urow 这个组件，它常用于解决 以下这些问题，但随之而来就会遇到

 

 遇到 这种需求的 ，这个时候 就需要使用flex布局了

 

 实现代码

 <view @click="open" class="cardPop">
      <view class="">
        当前的时间
      </view>
      <view style="color:blue;">
        <text> 09:00 - 11:30</text>
        <p>(还剩多少小时)</p>
      </view>
      <view>啊啊啊,要下班</view>
    </view>

<style lang="scss" scoped>
  .cardPop {
    display: flex;
    justify-content: space-between;
    align-items: baseline
  }
</style>

分析 

   display: flex;     //  开启 flex 布局
    justify-content: space-between;   // 两端对齐，项目之间的间隔都相等
    align-items: baseline   // 项目的第一行文字的基线对齐

属性  flex布局 

主轴

侧轴 

补充

修改主轴方向的属性

flex-direction:  column 

系统默认：

justify-content 为主轴

 align-items 为侧轴

修改主轴方向后，

 align-items 为主轴        justify-content 为侧轴

总结

使用方法就是

先在父盒子上设置 

display：flex  （开启flex布局） 

然后在根据项目 看看项目在主轴上的对齐方式

justify-content: flex-start | flex-end | center | space-between | space-around;


（flex-start：左侧对齐 flex-end：右侧对齐 center：居中 

    space-between：左右两侧贴边，中间间距相等

    space-around：两侧环绕，中间是侧边两倍
）

然后再看下,项目在交叉轴上如何对齐。

 align-items: flex-start | flex-end | center | baseline | stretch;

（起点对齐  |  终点对齐   | 居中  | 文字对齐  |  默认值  如果项目未设置高度或设为auto，将占满整个容器的高度）