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. 客户端必须在它发送到服务器的所有帧中添加掩码（Mask）

    在WebSocket协议中,数据是通过一系列数据帧来进行传输的.为了避免由于网络中介(例如一些拦截代理)或者一些在第10.3节讨论的安全原因,客户端必须在它发送到服务器的所有帧中添加掩码(Mask)( ...

  2. GDB查看内存命令（x命令） 用gdb查看指定地址的内存内容

    GDB查看内存命令(x命令) - super119 - 博客园 https://www.cnblogs.com/super119/archive/2011/11/18/2254382.html 可以使 ...

  3. HTTPS学习（一）：准备知识

    div.example { background-color: rgba(229, 236, 243, 1); color: rgba(0, 0, 0, 1); padding: 0.5em; mar ...

  4. C++ Primer Plus读书笔记（七）函数

    1.声明 void fun1(); //该声明在C中的意思是不指定参数,但是在C++中是指定参数为void void func2(...); //C++中不指定参数 2.函数参数为数组区间 STL有数 ...

  5. layui的tabletree扩展组件

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

  6. Python程序中#-*-coding: UTF-8 -*-的作用

    1.通常我们在pycharm中写程序的时候会加上#-*coding: UTF-8 -*- 如: #!/usr/bin/env python3#-*-coding: UTF-8 -*-#Author x ...

  7. 洛谷P4981

    Description 给定 n 个点,组成一棵树,有多少种组合方法: Analysis 首先,结合题目简化意义和这句话 最多可能存在多少种父子关系 我们可以知道当且仅当有至少一个节点的儿子不同时称他 ...

  8. 急~为啥我指定的的maven依赖版本没有生效？不是最短路径原则吗？

    女朋友他们项目用了 spring-boot,以 spring-boot-parent 作为 parent: <parent> <groupId>org.springframew ...

  9. 分析 BAT 互联网巨头在大数据方向布局及大数据未来发展趋势

    > 风起云涌的大数据战场上,早已迎百花齐放繁荣盛景,各大企业加速跑向"大数据时代".而我们作为大数据的践行者,在这个"多智时代"如何才能跟上大数据的潮流, ...

  10. Flink-v1.12官方网站翻译-P015-Glossary

    术语表 Flink Application Cluster Flink应用集群是一个专用的Flink集群,它只执行一个Flink应用的Flink作业.Flink集群的寿命与Flink应用的寿命绑定. ...