<!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. 使用openssl模拟CA和CA证书的签发

    使用openssl模拟CA和CA证书的签发     当使用ssl/tls进行加密通信时,必须要有数字证书.若通信只限制在局域网内,可以不向第三方机构申请签发证书,可以通过openssl模拟CA(Cer ...

  2. mysql reset password重置密码

    安全模式启动 chown -R mysql.mysql /var/run/mysqld/ mysqld_safe --skip-grant-tables & 无密码root帐号登陆 mysql ...

  3. node学习笔记6——自定义模块

    自定义模块三大关键词: require——引入模块: exports——单个输出: module——批量输出. 从例子下手: 1.创建module.js: exports.a=22; exports. ...

  4. Java设计模式（4）原型模式（Prototype模式）

    Prototype模式定义:用原型实例指定创建对象的种类,并且通过拷贝这些原型创建新的对象. Prototype模式允许一个对象再创建另外一个可定制的对象,根本无需知道任何如何创建的细节,工作原理是: ...

  5. linux mongodb数据库的安装

    折腾两天, 前领导留下的烂摊子,前天忽然挂掉了, 整个公司就我会linux, 奶奶的, 一言难尽. 下面记录下怎么安装mongodb, 前面是从菜鸟教程复制来的 1. 下载 MongoDB 提供了 l ...

  6. C++ 指针二维数组， C++二维指针数组笔记

    C++ 二维动态数组 一. 已知第一维 #include <iostream> using namespace std; int main(int argc, char const *ar ...

  7. (笔记)Mysql命令alter add：增加表的字段

    alter add命令用来增加表的字段. alter add命令格式:alter table 表名 add字段 类型 其他; 例如,在表MyClass中添加了一个字段passtest,类型为int(4 ...

  8. Maven创建Java项目

    Maven使用 archetype 来创建项目.要创建一个简单的 Java 应用程序,我们使用 maven-archetype-quickstart 插件.在下面的例子中,我们将创建一个基于Maven ...

  9. e769. 在按钮组中选择一个单选按钮

    // To create a radio button and button group, // see e768 创建单选按钮 // Select the radio button; the cur ...

  10. e565. 关闭的时候隐藏窗口

    By default, when the close button on a frame is clicked, nothing happens. This example shows how to ...