使用flex-grow会简单一些

首页课程实战体系课手记专栏慕课教程

使用flex-grow会简单一些

来源：7-6 Flex高级应用（3）

亿零零零

2020-11-17

这个部分老师实现的有些复杂，使用flex-grow会简单一些。
图片描述

<!-- 使用2个view(C2和C3)组件做横线，用flex-grow控制横线的长短 -->
<view class="fenxiang">
  <image class="c1" src="/images/icon/share.png"></image>
  <view class="c2"></view>
  <image src="/images/icon/collection.png"></image>
  <view class="c3"></view>
</view>

.fenxiang{
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
}

.fenxiang image{
  width: 90rpx;
  height: 90rpx;
}

.c1{
  margin-right: 30rpx;
}

.c2{
  flex-grow: 3;
  border: 1rpx solid #e5e5e5;
}
.c3{
  flex-grow: 50;
  border: 1rpx solid #e5e5e5;
  margin-left: 30rpx;
}

写回答

2回答

7七月

7七月

2020-11-17

已采纳

这个思路不错，感谢提出。

0

2

SevenMonths

我还想到一个布局方式：把circle整体看成是tool的子元素。可以使用 align-self 单独设置 circle的对齐方式，可覆盖align-items属性 .circle{align-self: flex-end;} 这一句就可以达到效果了

2024-12-29

共2条回复

qq_包纸脸之王_0

qq_包纸脸之王_0

2020-12-02

老哥, 好想法啊, 但是为什么要用 row-reverse 呢, 用 row 感觉更顺啊, 难道大佬都爱逆向思考吗23333333

1

0

微信小程序入门与实战（全新版）超20000人学习的好课

4年同步微信官方迭代，累计20000+人学习，比微信官方更火爆！

23963 学习 · 6931 问题

相似问题

为什么这里将星星和评分调整到一个水平线上行不用vertical-align

回答 1

老师，请问一个flex布局问题

回答 1

请问在小程序中使用flex布局需要做兼容吗？

回答 1

想问一下flex弹性盒子可设置的参数有哪些呢？

回答 1

直接利用数组方法更简单吧

回答 1

打开慕课网App查看更多内容