利用定位和flex实现小程序简单的布局

为了实现下面这个简单的效果，可能是因为经验不足，这么简单的布局应该很快就能实现，可是我却被绊住了。

 

因为是在小程序中，所以习惯用flex布局，实现箭头居左，设置justify-content:flex-start即可，可是却不生效！因为父元素设置了

justify-content:center;为了实现文字居中，所以左箭头跟着居中了，无法实现居左的效果。想了很多办法，还是不能实现，最后想到了定位，把左箭头定位到左边！

源代码如下：

html结构

<view class="top">

<navigator url="#"></navigator>

<text>资质文件</text>

</view>

css代码如下：

.top{

margin:30rpx;

padding:20rpx;

border-bottom:1rpx solid #eee;

display:flex;

justify-content:center;

align-items:center;

position:relative;

}

.top navigator{

position:absolute;

top:20rpx;

left:0;

width:30rpx;

height:30rpx;

transform:rotate(225deg);

border-top:2px solid #999;

border-right:2px solid #999;

}

/* .top-nav::after{

content:'';

display:flex;

width:30rpx;

height:30rpx;

transform:rotate(225deg);

border-top:2px solid #999;

border-right:2px solid #999;

} */

.top text{

display:flex;

font-size:30rpx;

justify-content:center;

}

在这个过程中，学会了怎么使用css样式实现左箭头；

设置宽高，设置上边框和右边框，利用transform属性实现即可！左右上下都可实现，设置旋转度数即可！

也可以用伪类实现，需加上content:"";

虽然问题很小，但依然有收获！