css - flex 布局的问题 两段文字,一条贴上居中,一条贴下居中
本文介绍了css - flex 布局的问题 两段文字,一条贴上居中,一条贴下居中的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
问 题
在写微信小程页面时要做到一个效果而且一定要用flex 布局做, 要让starttime贴着上边,endtime贴着下边
,目前用了一个傻办法就是在中间在家了一个有高度的组件把上下撑开, 但应该会出问题, 想求高手告知如何做到,而不是用死办法,
<view class="flex-time">
<view class="flex-starttime">start</view>
<view class="flex-block"></view>
<view class="flex-endtime">end</view>
</view>
.flex-menu .flex-row {
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
align-items:stretch;
font-weight: normal;
font-size: 30rpx;
}
.flex-column{
margin: 0;
padding: 10rpx;
display: flex;
flex-direction: row;
align-items:stretch;
font-weight: normal;
font-size: 30rpx;
}
.flex-time {
margin: 0;
padding:0 10rpx 0 10rpx;
display: flex;
flex-direction: column;
align-content: flex-end;
border-right:2px #0054a6 solid;
font-size: 28rpx;
color: #b2b2b2;
width: 150rpx;
}
.flex-starttime {
margin-top: 0;
padding-top: 0;
display: inline-flex;
align-content: flex-center;
}
.flex-endtime {
margin-bottom: 0;
padding-bottom: 0;
display: inline-flex;
align-content: flex-center;
}
.flex-block {
height:100rpx;
}
解决方案
使用justify-content: space-between;即可
.flex-time {
margin: 0;
padding:0 10rpx 0 10rpx;
display: flex;
flex-direction: column;
align-content: flex-end;
border-right:2px #0054a6 solid;
font-size: 28rpx;
color: #b2b2b2;
width: 150rpx;
justify-content: space-between;
}
.flex-item {
display:flex;
}
.flex-cnt {
flex: 1;
}
<view class="flex-item">
<view class="flex-time">
<view class="flex-starttime">start</view>
<view class="flex-endtime">end</view>
</view>
<view class="flex-cnt">
<view>占位</view>
<view>占位</view>
<view>占位</view>
<view>占位</view>
<view>占位</view>
<view>占位</view>
<view>占位</view>
</view>
</view>
这篇关于css - flex 布局的问题 两段文字,一条贴上居中,一条贴下居中的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文