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. BI学习向导文章

    BI的学习笔记: BIWORK的博客:http://www.cnblogs.com/biwork/p/3328879.html 邀月工作室博客 :http://www.cnblogs.com/down ...

  2. CF733F

    扯在前面 人生第一道黑(>▽< ). 那天听了老师讲图论讲了这道题,发现这道黑题并不是很黑于是就做了做,在同机房dalao的帮助下三个小时做完(太菜了),于是来发篇题解. 正文 题意 给出 ...

  3. CODEVS 2542单词__fail树

    2542 单词 2013年省队选拔赛天津市队选拔赛  时间限制: 2 s  空间限制: 256000 KB  题目等级 : 大师 Master     题目描述 Description 小张最近在忙毕 ...

  4. Spring Boot 核心配置文件 bootstrap & application

    Spring Boot 核心配置文件 bootstrap & application 1.SpringBoot bootstrap配置文件不生效问题 2.bootstrap/ applicat ...

  5. sql 工具类function

    --判断是否为整数 create or replace function is_number(param VARCHAR2) return NUMBER is v_num NUMBER; begin ...

  6. ThreadLocal全面解析,一篇带你入门

    ===================== 大厂面试题: 1.Java中的引用类型有哪几种? 2.每种引用类型的特点是什么? 3.每种引用类型的应用场景是什么? 4.ThreadLocal你了解吗 5 ...

  7. unix环境高级编程第三章笔记

    文件描述符 1.文件描述符的概念 对于内核而言,所有打开的文件都会用一个文件描述符来引用,打开或和创建一个新文件的时候,内核会给进程返回一个文件描述符,而当使用read write时,可以使用这个文件 ...

  8. HDU5740 Glorious Brilliance【最短路 KM匹配】

    HDU5740 Glorious Brilliance 题意: 给出一张不一定合法的染色图,每次可以交换相邻两点的颜色,问最少多少次能使染色图合法 合法的染色图相邻点的颜色不能相同 题解: 首先要确定 ...

  9. Andrew算法（我确实不懂Graham）

    先解释一下:这两个算法分别都是凸包问题的算法,然后Andrew是Graham的变种,速度更快,更稳定,非常优秀,介于我已经把Graham写的莫名其妙的WA了,所以我选择了这种算法! 我认为在这里,还是 ...

  10. P3355 骑士共存问题 (最小割)

    题意:nxn的棋盘 有m个坏点 求能在棋盘上放多少个马不会互相攻击 题解:这个题仔细想想居然和方格取数是一样的!!! 每个马他能攻击到的地方的坐标 (x+y)奇偶性不一样 于是就黑白染色 s-> ...