前言
在工作中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,将占满整个容器的高度)