flex-wrap:运用到父元素上 结合 display: flex;
flex-wrap: wrap; 换行
flex-wrap: nowrap; 不换行

#main {
width: 300px;
height: 300px;
border: 1px solid #c3c3c3;
display: flex;
flex-wrap: nowrap; 默认不换行
} #main div {
width: 100px;
}
</style> <div id="main">
<div style="background-color:coral;">11</div>
<div style="background-color:lightblue;">22</div>
<div style="background-color:pink;">33</div>
<div style="background-color:olive;">4</div>
</div>

03-flex-wrap是否换行的更多相关文章

  1. flex 设置换行flex-wrap

    flex 设置flex-wrap 换行 本来预想的正常情况下,代码应该如下: ul { width: 100%; display: flex; flex-wrap: wrap; li { ; widt ...

  2. flex label 换行

    Flex中label换行有两种情况 在AS中赋值: label.text="Online\r\nResources" 在mxml中赋值: text="Online Res ...

  3. 布局之: flex(CSS3新增)

    flex 基本概念 flex布局(flex是flexible box的缩写), 也称为弹性盒模型 .将属性和属性值(display:flex; )写在哪个标签样式中,谁就是 容器:它的所有子元素自动成 ...

  4. Flex 布局教程:语法篇

    作者: 阮一峰 网页布局(layout)是CSS的一个重点应用. 布局的传统解决方案,基于盒状模型,依赖 display属性 + position属性 + float属性.它对于那些特殊布局非常不方便 ...

  5. flex学习小结

    接触到flex一个多月了,今天做一个学习小结.如果有知识错误或者意见不同的地方.欢迎交流指教. 画外音:先说一下,我是怎么接触到flex布局的.对于正在学习的童鞋们,我建议大家没事可以逛逛网站,看看人 ...

  6. flex实验总结

    1.父元素 .box{ display:flex; flex-direction: column;//铺满垂直排列 flex-direction: column-reverse;//铺满垂直反向排列 ...

  7. css flex布局

    关于flex布局的一些简单用法 效果(下图) 实现代码: <!--html--> <div class="wrap"> <div class=&quo ...

  8. 【转】Flex 布局语法教程

    网页布局(layout)是CSS的一个重点应用. 布局的传统解决方案,基于盒状模型,依赖 display属性 + position属性 + float属性.它对于那些特殊布局非常不方便,比如,垂直居中 ...

  9. flex布局

    一,啥是flex? 1.Flex是Flexible Box的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性.任何一个容器都可以指定为Flex布局. .box{ displa ...

  10. Flex 布局

    Flex 布局     网页布局(layout)是CSS的一个重点应用. 布局的传统解决方案,基于盒状模型,依赖 display属性 + position属性 + float属性.它对于那些特殊布局非 ...

随机推荐

  1. 流程控制语句if基本概述

    目录 1. 流程控制语句if基本概述 2. 流程控制语句if文件比较 判断文件是否存在,返回方式 使用变量的方法进行判断 请输入你要备份的数据库名称: wordpress 请输入你要备份的数据库密码: ...

  2. [20191113]oracle共享连接模式端口2.txt

    [20191113]oracle共享连接模式端口2.txt --//昨天的测试链接:http://blog.itpub.net/267265/viewspace-2663651/=>[20191 ...

  3. 11gr2 alert日志中报TNS-12535 TNS-00505原因及解决方法

    前面新装了11GR2 RAC,某天在做巡检的时候发现alert日志中存在如下报错Fatal NI connect error 12170. VERSION INFORMATION: TNS for L ...

  4. volatile简记

    volatile指出变量随时可能发生变化,与该变量有关的运算,不要进行编译优化,以免出错,也就是在使用变量时必须从它的地址中重新读取.

  5. 002 C/C++ 数组的传递

    传递一个数组给一个函数的正确做法: 1.传递数组的内存首地址. 2.传递数组的有效长度.指数组的元素数量. 编译器总是将数组类型的变量作为指针传递. 计算数组的长度: int length = siz ...

  6. CSS新特性之动画

    动画是CSS3中具有颠覆性的特征之一,可以通过设置多个节点来精确控制一个或者一组动画,常常用来实现复杂的动画效果.相比较过度,动画可以实现更多变化,更多控制,连续自动(不需要鼠标经过和鼠标离开来控制) ...

  7. vmware workstations 虚拟机安装CentOS

    1.下载vmware ,我的版本是从上学时保存网盘的,版本比较低,链接如下: 链接:https://pan.baidu.com/s/19QP0q8xmPWIPn-rziPTvKg 提取码:lvh9 2 ...

  8. layUI学习第五日:layUI布局系列二

    6.列偏移 列偏移可针对不同屏幕的标准进行设定,只会在桌面屏幕下有效,当低于桌面屏幕的规定的临界值,就会堆叠排列. <div class="layui-col-md4 layui-co ...

  9. 腾讯云服务器centos7.2+nginx(开启gzip压缩)+uwsgi+Django+react

    因为项目原因,学习了react,Django,完成react开发项目过后,打包(做好了代码分割.压缩)放入Django中,在本地运行速度很快,结果放到服务器中,虽然某些js文件很小(只有一百多kb), ...

  10. 常用的app包名和类名

    应用 包名 启动类 QQ com.tencent.mobileqq com.tencent.mobileqq.activity.HomeActivity 微信 com.tencent.mm com.t ...