<!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】——C利用回调函数实现多态

    案例: 功能:可以根据用户输入的命令完成相应的功能: 例如: 用户输入  hello   完成输出 hello的功能.    用户输入  hi   完成输出 hi 的功能. 一般的写法可能会写两个函数 ...

  2. SpringBoot（三）：文件下载

    SpringBoot(三):文件下载 2017年08月02日 10:46:42 阅读数:6882 在原来的SpringBoot–uploadfile项目基础上添加文件下载的Controller: @R ...

  3. 最近玩Bootstrap ， 一些小工具 记录在案。

    最近玩Bootstrap , 一些小工具 记录在案. 1 定制Bootstrap ,所见即所得的修改Bootstrap的各种变量,即时查看样式的变化. http://bootswatchr.com/ ...

  4. 引入css少引入了rel="stylesheet" 这行代码。导致整个页面空白、

    忘记引入rel="stylesheet" 如下: <link  href="css/swiper-3.3.1.min.css" /> 这样使得整个页 ...

  5. Java知多少（17）强调一下编程风格

    讲完了Java的基础语法,大家就可以编写简单的程序代码了,这里有必要强调一下编程风格. 代码风格虽然不影响程序的运行,但对程序的可读性却非常重要.自己编写的程序要让别人看懂,首先在排版方面要非常注意. ...

  6. Hadoop开发相关问题

    总结自己在Hadoop开发中遇到的问题,主要在mapreduce代码执行方面.大部分来自日常代码执行错误的解决方法,还有一些是对Java.Hadoop剖析.对于问题,通过查询stackoverflow ...

  7. Mybatis set标签

    set - 更新语句 当 update 语句中没有使用 if 标签时,如果有一个参数为 null,都会导致错误. 当在 update 语句中使用if标签时,如果前面的if没有执行,则或导致逗号多余错误 ...

  8. Maven目标

    Maven主要目标是提供给开发人员: 项目是可重复使用,易维护,更容易理解的一个综合模型. 插件或交互的工具,这种声明性的模式. Maven项目的结构和内容在一个XML文件中声明,pom.xml 项目 ...

  9. 详细的Log4j使用教程

    日志是应用软件中不可缺少的部分,Apache的开源项目log4j是一个功能强大的日志组件,提供方便的日志记录.在apache网站:jakarta.apache.org/log4j 可以免费下载到Log ...

  10. OpenStack Keystone架构

    一. Keystone简介 1. OpenStack Keystone简介 2. Keystone安装与部署 2.1 包安装Keystone 2.2 源码安装源码安装 3 配置运行Keystone 3 ...