flex布局知识点Beta

news/2024/5/19 18:18:40 标签: flex, weapp

先看图,实现下方列表中的效果,名字在左,数量在右,相对条目居中。

<a class=flex布局" title="" />

html代码

<view class="list">
      <view>
        <text class="sub">苏享茂</text>
      </view>
      <view class="num">117条</view>
    </view>

css代码

.list{
  font-size: 16px;
  height: 36px;
  padding: 8px;
  background-color: white;
  margin-top: 1px;
  line-height: 36px;
  display: flex; //布局方式
  justify-content: space-between;// 项目在主轴上的对齐方式
}
.sub{
  white-space: normal;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
}
.num{
    flex-shrink: 0;
    font-size: 12px;
    color: #999999;
}

相关文献:Flex 布局语法教程


http://www.niftyadmin.cn/n/1581277.html

相关文章

技术英雄会【四】:也谈如何发掘到需要的内容和英雄

zhengyun_ustc 20070408<?xml:namespace prefix o />前两天&#xff0c;只说和詹膑一致认为“一个站点如果解决了这个问题&#xff0c;就解决了互联网最基本的用户需求。”什么问题呢&#xff1f;“内容不缺乏&#xff0c;缺乏的是如何找到需要的内容。对于提供服务的站…

js如何一次循环删除数组中的多个元素

思路&#xff1a; 数组遍历删除一个元素很容易&#xff0c;通过splice方法删除对应索引的元素即可&#xff0c;但是遍历删除多个元素就复杂了很多&#xff0c;首先不能按索引从小到大的顺序删除&#xff0c;这样可能会导致索引对应的元素发生变化&#xff0c;误删或找不到该索引…

非生活深刻感知

有好一段时间没有上来看看了&#xff0c;荒废了&#xff0c;本想说因为忙&#xff0c;但是立刻就被自己否定了&#xff0c;其实忙也只是个借口罢了。post没有更新多少&#xff0c;却发现留言确实有增无减&#xff0c;还有好心人提醒我再不更新就要从top 100中出名了&#xff0c…

nodejs基础篇(一)

我从2017年开始接触nodejs&#xff0c;到现在用了一年多了&#xff0c;觉得我有必要写点东西出来&#xff0c;记录自己的积累的知识体系&#xff0c;以便更好的掌握nodejs。 nodejs专题不是按照严格的学习历程书写&#xff0c;纯属个人划分的等级。 认识AMD、UMD、CommonJS A…

再议ASP.NET DataGrid控件中的“添加新行”功能

在园子里搜索了一下&#xff0c;发现不管是panchengyong的“在DataGrid快速添加新行(c#) ”还是piccolo的”在DataGrid快速添加新行“&#xff0c;都只是简单的实现了添加新行&#xff0c;功能上还是有改进的余地。说起在DataGrid中添加新行&#xff0c;ASP.NET开发的大牛人物&…

浅谈ES6的Promise对象

相信凡是写过javascript的童鞋也一定都写过回调方法&#xff08;callback&#xff09;&#xff0c;简单说回调方法就是将一个方法func2作为参数传入另一个方法func1中&#xff0c;当func1执行到某一步或者满足某种条件的时候才执行传入的参数func2&#xff0c;例如下面的代码段…

Open Relay 测试链接

1.Anonymous Relay Test[url]http://www.antispam-ufrj.pads.ufrj.br/test-relay.html[/url]2.[url]http://abuse.net/relay.html[/url]3.检查邮件服务器是否列入RBL名单:[url]http://openrbl.org/[/url]

node版本管理器——nvm

nvm是管理node版本的一个工具&#xff0c;具体介绍不再赘述&#xff0c;请到GitHub&#xff08;https://github.com/creationix/nvm&#xff09;查看。 安装 Linux / Mac curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.11/install.sh | bash 或 wge…