<!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. js 的数值限制可能引起的问题

    源于:https://raw.github.com/ruanyf/jstutorial/gh-pages/grammar/number.md 1. 根据国际标准IEEE 754,64位浮点数格式的64 ...

  2. JDBC setCatalog

    数据库URL:jdbc:mysql://localhost:3306/{catalog} catalog指代数据库名称. 1如果该参数不存在,则必须使用setCatalog设置数据库名称,否则会抛出 ...

  3. Spring Cloud Eureka 服务关闭但是未从注册中心删除 自我保护机制

    自我保护背景 首先对Eureka注册中心需要了解的是Eureka各个节点都是平等的,没有ZK中角色的概念, 即使N-1个节点挂掉也不会影响其他节点的正常运行. 默认情况下,如果Eureka Serve ...

  4. springmvc访问静态资源出现Request method 'GET' not supported

    答案最后.:D 默认的访问的URL都会被DispatcherServlet所拦截. 这里说一下如何配置springmvc访问静态文件. <mvc:default-servlet-handler/ ...

  5. MATLAB2012a_for_win7_64

    matlab 2012b是mathworks官网发布的一款功能强大.性能稳定的商业数学软件,新版本采用了全新的视图界面,具有MATLAB和Simulink的重大更新,可显著提升用户的使用与导航体验.比 ...

  6. c 二维数组动态分配和释放

    c动态语言 函数声明的头文件在<stdlib.h>里 使用malloc函数为字符串分配内存 -->记得释放内存 free() #include <stdio.h> #in ...

  7. 【Html】div 加载 html页面的方法

    做网页的单页面应用时,需要在一个HTML的Div元素中加载另一个HTML页面,以前有一种方法就是用iframe,举例如下:(亲测可行) <div class="main-contain ...

  8. chrome 下改动 agent 的方法

    前言 这篇文章和 tiankonguse 的个人站点里的文章保持同步. 非常早之前,在 chrome 下改动 agent 的方法是使用 chrome 插件. 后来 chrome 的某一个版本号中自带这 ...

  9. llinux 环境安装编译 nginx (源码安装包)

    简介: Nginx是一款轻量级的Web 服务器/反向代理服务器及电子邮件(IMAP/POP3)代理服务器,并在一个BSD-like 协议下发行.由俄罗斯的程序设计师Igor Sysoev所开发,供俄国 ...

  10. linq where in 排序

    List<INGREDIENT> selectedIngredients = db.INGREDIENT .Where(i => model.SelectedIngredients. ...