<!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. c# 16进制转int

    //十进制转二进制Convert.ToString(69, 2); //69为被转值//十进制转八进制Convert.ToString(69, 8); //69为被转值//十进制转十六进制Conver ...

  2. PCL点云特征描述与提取（2）

    点特征直方图(PFH)描述子 正如点特征表示法所示,表面法线和曲率估计是某个点周围的几何特征基本表示法.虽然计算非常快速容易,但是无法获得太多信息,因为它们只使用很少的几个参数值来近似表示一个点的k邻 ...

  3. -26628 loadrunner

    在Vuser脚本编译执行无误情况下,在controller中进行并发操作,并发数设为10,只通过5个,失败的报错信息是:   Action.c(15): Error -26628: HTTP Stat ...

  4. Ubuntu中基于QT的系统网线连接状态的实时监视

    1.必要准备 需包: #include <QNetworkInterface> 2.实现获取当前的网线连接状态 以下是自己在网络上搜到的一个解决方法,且没有加入iface.flags(). ...

  5. 关于Unity中的本地存储

    本地存储 在做游戏的时候,经常需要在本机存储一些数据,比如闯关类游戏要记录闯到第几关,做单机的时候要把数据保存到本地,下次启动的时候数据存在,就是把数据保存到磁盘里面或者手机的flash闪存里面. U ...

  6. MAC配置Xcode的Cocos2d-x环境

    Version:0.9 StartHTML:-1 EndHTML:-1 StartFragment:00000099 EndFragment:00003988 1.Mac配置环境变量,即编辑命令: o ...

  7. Oracle system表空间满的暂定解决方法

    Oracle system表空间满的暂定解决方法 数据库用的是Oracle Express 10.2版本的.利用Oracle Text做全文检索应用,创建用户yxl时没有初始化默认表空间,在系统开发过 ...

  8. C++编程基础练习

    注:本文练习题均出自<Essential C++>第一章 练习1,1 从一个简单程序开始 #include<iostream> #include<string> u ...

  9. 第三百五十节，Python分布式爬虫打造搜索引擎Scrapy精讲—selenium模块是一个python操作浏览器软件的一个模块，可以实现js动态网页请求

    第三百五十节,Python分布式爬虫打造搜索引擎Scrapy精讲—selenium模块是一个python操作浏览器软件的一个模块,可以实现js动态网页请求 selenium模块 selenium模块为 ...

  10. 如何解决#1045 - Access denied for user 'root'@'localhost' (using password: NO)问题

    1. #1045 - Access denied for user 'root'@'localhost'  (using password: NO) 解决方案 在phpMyAdmin中librarie ...