<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <title>Document</title>

  <style>

  .flex-container {

    display: flex;

	/*默认值：当一行放不下是就压缩子盒子*/

	/*flex-wrap: nowrap;*/

	/*当一行放不下时换行，第一行在上，其余行平分剩余空白*/

	flex-wrap: wrap;

	/*当一行放不下时换行，第一行在下，其余行平分剩余空白*/

	/*flex-wrap: wrap-reverse;*/

    width: 400px;

    height: 600px;

    background-color: gray;

  }

  .flex-item {

    background-color: green;

    width: 100px;

    height: 100px;

    margin: 5px;

  }

  </style>

</head>

<body>

  <div class="flex-container">

    <div class="flex-item">flex item 1</div>

    <div class="flex-item">flex item 2</div>

    <div class="flex-item">flex item 3</div>

    <div class="flex-item">flex item 4</div>

  </div>

</body>

</html>

flexbox父盒子flex-wrap属性的更多相关文章

  1. flexbox父盒子align-content属性

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. flexbox父盒子align-items属性

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. flexbox子盒子flex属性

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. flexbox父盒子justify-content属性

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. flexbox父盒子flex-direction属性

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. flexbox子盒子align-self属性

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. CSS3 -- FlexBox(弹性盒子)

    盒子模型 CSS中有一种基础设计模式叫盒模型,盒模型定义了Web页面中的元素如何来解析. 在盒模型中主要包括width.height.border.background.padding和margin这 ...

  8. CSS3 弹性盒子(Flex Box)

    1 CSS3 弹性盒子(Flex Box) 1 http://caniuse.com/#search=flex%20box https://www.w3.org/TR/css-flexbox-1/ C ...

  9. flexbox 弹性盒子

    flexbox 弹性盒子 1.基本知识 container(容器)属性 flex-direction: row | row-reverse | column | column-reverse 属性决定 ...

随机推荐

  1. 移动端 图片切换 轮播（banner）

    发现一个很好用的jquery控件 操作很简单 1.引入css <link href="/Resources/style/swiper.min.css" rel="s ...

  2. Redis源码研究—基础知识

    1. Redis 是什么 Redis是一个开源的使用ANSI C语言编写的基于内存的key/value存储系统,与memcache类似,但它支持的value类型更多,包括:字符串(string).链表 ...

  3. popupWindow使用timePicker时点击出现闪屏问题的解决办法

    记录一下刚解决的新鲜bug,噔噔噔噔: 首先说明,我并不知道到底是什么原理导致和解决的问题 总之就是,我在使用popupWindow时的弹出方法使用的是popupWindow.showAsDropDo ...

  4. mtrace检查内存泄漏

    内存泄漏检查方法(for Linux) 如果你更想读原始文档, 请参考glibc info的"Allocation Debugging" 一章 (执行info libc);glib ...

  5. ubuntu运行命令tee显示和保存为log

    一般有三种需求: 假如我要执行一个py文件 python class.py 1:将命令输出结果保存到文件log.log python class.py |tee log.log 结果就是:屏幕输出和直 ...

  6. 初试PyOpenGL一 (Python+OpenGL)

    很早就一直想学Python,看到一些书都有介绍,不管是做为游戏的脚本语言,还是做为开发项目的主要语言都有提及(最主要的CUDA都开始支持Python,CUDA后面一定要学),做为先熟悉一下Python ...

  7. python的callback函数原理

    __getattribute__作用 """ class C(object): a = 'abc' def __getattribute__(self, *args, * ...

  8. 用OpenGL绘制平滑着色的三角形与相交区域的混合着色

    一.三角形的绘制 在OpenGL中,面是由多边形构成的.三角形可能是最简单的多边形,它有三条边.可以使用GL_TRIANGLES模式通过把三个顶点连接到一起而绘出三角形. 使用GL_TRIANGLE_ ...

  9. CentOS7使用firewalld打开关闭防火墙与端口[转]

    转自:http://www.cnblogs.com/moxiaoan/p/5683743.html1.firewalld的基本使用启动: systemctl start firewalld查看状态: ...

  10. Java调试那点事[转]

    转自云栖社区:https://yq.aliyun.com/articles/56?spm=5176.100239.blogcont59193.11.jOh3ZG# 摘要: 该文章来自于阿里巴巴技术协会 ...