flex & flex-wrap

https://css-tricks.com/almanac/properties/f/flex-wrap/

https://developer.mozilla.org/zh-CN/docs/Web/CSS/flex-wrap



.flex-box {

    border: 1px solid red;

    height: 100px;

    position: relative;

    display: flex;

    flex-flow: row wrap;

    /* flex-wrap: wrap; */

    justify-content: flex-start;

    align-items: stretch;

    align-content: stretch;

    box-sizing: border-box;

    margin: 10px;

}

demo

https://codepen.io/xgqfrms/pen/jjLPKN

Error

.chat-person-contact-others {

    display: flex;

    flex-wrap: nowrap;

   /*default value bug */

}

OK



.chat-person-contact-others {

    display: flex;

    flex-flow: row wrap;

}

xgqfrms 2012-2020

www.cnblogs.com 发布文章使用：只允许注册用户才可以访问！

flex & flex-wrap的更多相关文章

  1. [Flex] flex手机项目如何限制横竖屏？只允许横屏？

    flex手机项目如何限制横竖屏?只允许横屏?   有人知道吗?求教.. 工程中 xxx-app.xml 找到</aspectRatio> 去掉注释 修改为<aspectRatio&g ...

  2. Actionscript,AS3,MXML,Flex,Flex Builder,Flash Builder,Flash,AIR,Flash Player之关系

    转自zrong's blog:http://zengrong.net/post/1295.htm ActionScript ActionScript通常简称为AS,它是Flash平台的语言.AS编写的 ...

  3. [CSS Flex] Flex direction

    flex-direction: main two 'row' or 'column', you can use reverse also.

  4. Flex 布局教程：实例篇

    该教程整理自 阮一峰Flexible教程 今天介绍常见布局的Flex写法.你会看到,不管是什么布局,Flex往往都可以几行命令搞定. 我的主要参考资料是Landon Schropp的文章和Solved ...

  5. 在移动端中的flex布局

    flex布局介绍: flex布局很灵活, 这种布局我们也可以称之为弹性布局,  弹性布局的主要优势就是元素的宽或者高会自动补全; flex布局实例: 比如有两个div,一个div的宽度为100px, ...

  6. CSS3的flex布局

    flex的一些属性 CSS3中引入了另一种框--flexbox,flexbox有一些block和inline不同的性质,比如: 自适应子元素(flex item,又称伸缩项目)的宽度 伸缩项目的flo ...

  7. Flex 布局2

    Flex 布局2     你会看到,不管是什么布局,Flex往往都可以几行命令搞定. 我只列出代码,详细的语法解释请查阅<Flex布局教程:语法篇>.我的主要参考资料是Landon Sch ...

  8. flex 布局 初次接触这个好使又不是特别好用的布局方法

    刚开始学前端的童鞋们应该也是一样先学习的table然后再学习了盒子模型,感觉终于学会了简单的网页布局,使用各种display,float,position绞尽脑汁给页面布局成自己想要的页面样式,然而, ...

  9. 深入理解CSS弹性盒模型flex

    × 目录 [1]版本更迭 [2]display [3]基本概念[4]伸缩容器[5]伸缩项目 前面的话 CSS3引入了一种新的布局模型——flex布局.flex是flexible box的缩写,一般称之 ...

  10. 原创：新手布局福音！微信小程序使用flex的一些基础样式属性

    来源:新手布局福音!微信小程序使用flex的一些基础样式属性 作者:Nazi   Flex布局相对于以前我们经常所用到的布局方式要好的很多,在做微信小程序的时候要既能符合微信小程序的文档开发要求,又能 ...

随机推荐

  1. 简单makefile

    https://www.cnblogs.com/prettyshuang/p/5552328.html#_label0

  2. layui的tabletree扩展组件

    需求:点击父级菜单展示子级菜单 难点:某个父级菜单下面有5000条子级菜单(有点坑),当我想把这5000条子级菜单塞到父级菜单下面的时候完蛋了,页面卡死了... 解决:tabletree这组件我发现用 ...

  3. 使用Robo 3T访问MongoDB数据库

    使用Robo 3T操作MongoDB数据库教程:https://blog.csdn.net/baidu_39298625/article/details/99654596 在IDEA中用三个jar包链 ...

  4. SpringMVC听课笔记（三：使用@RequestMapping映射请求）

    1. Spring MVC使用 @RequestMapping 注解为控制器指定可以处理哪些URL请求 2. 标注点: --类定义处:提供初步的请求映射信息.相对于WEB应用的根目录 --方法处:提供 ...

  5. linux：搭建java web环境

    介绍 运行java web的环境 搭建 准备 Linux:Linux 操作系统 Apache Tomcat:Web 应用服务器 JDK:Java 开发工具包 jdk的安装 1.下载 链接 2.上传服务 ...

  6. XCTF-你是谁

    前期工作 查壳,无.运行 不知道有啥用,迷宫题? 逆向分析 文件结构 查看了一下主要逻辑在background中,因为MainActivity的setContentView是background.ba ...

  7. 关于ckfinder上传文件添加自定义处理方案

    上篇博客中介绍了如何使用ckfinder中自定义按钮的功能,实现自定义上传的功能,但是却无法解决用户使用拖拽文件上传方式中添加自定义事件,今天我们来用另一种更简洁的方式来实现上传文件重名时做一些自定义 ...

  8. SealClient

    import java.io.BufferedReader; import java.io.FileInputStream; import java.io.IOException; import ja ...

  9. Cisco的互联网络操作系统IOS和安全设备管理器SDM__路由器软、硬件知识

    路由器软.硬件知识 1.路由器的组件: 组件 解释 Bootstrap 存储在ROM中的微代码,bootstrap用于在初始化阶段启动路由器.它将启动路由器然后装入IOS POST(开机自检) 存储在 ...

  10. <<Hive编程指南>>读书笔记

    1. 设置hive以本地模式运行(即使当前用户是在分布式模式或伪分布式模式下执行也使用这种模式) set hive.exec.model.local.auto=true; 若想默认使用这个配置,可以将 ...