<!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# 文字首字母

    public string GetFirstLetter(string hz) { string ls_second_eng = "CJWGNSPGCGNESYPBTYYZDXYKYGTDJ ...

  2. SAP MM/FI 自动过账实现 OBYC 接口执行

    一. 自动过账原理 在MM模块的许多操作都能实现在FI模块自动过账,如PO收货.发票验证(LIV).工单发料.向生产车间发料等等.不用说,一定需要在IMG中进行配置才可以实现自动处理.但SAP实现的这 ...

  3. 根据URL获取参数值得出json结果集，对外给一个接口让别人调用

    背景:测试接口的时候,经常都是后端get\post请求直接返回json结果集,很想知道实现方式,虽然心中也大概了解如何实现,但还不如自己来一遍踏实! 先来看一下结果吧: 以下对一个web的get接口进 ...

  4. myeclipse重新添加spring支持

    需求:添加一次可能失败,需要再添加,但是一般点击右键add spring capabilities 不存在了 解决办法: 打开工程找到.project 注释掉spring支持 重新项目右键加入支持即可 ...

  5. visual studio运行时库MT、MTd、MD、MDd 的区别

    msdn上面的解释: MT:mutithread,多线程库,编译器会从运行时库里面选择多线程静态连接库来解释程序中的代码,即连接LIBCMT.lib库 MTd:mutithread+debug,多线程 ...

  6. JDBC选择数据库实例

    在本教程将演示如何在JDBC应用程序中选择一个数据库. 在执行以下示例之前,请确保您已经准备好以下操作: 具有数据库管理员权限,以在给定模式中创建数据库. 要执行以下示例,需要用实际用户名和密码替换这 ...

  7. e808. 建立菜单栏，菜单，菜单项

    When the user selects a menu item, it fires an action event. // Create the menu bar JMenuBar menuBar ...

  8. (转)tcp和udp能否发送0字节的数据包

    版权声明:本文为博主原创文章,未经博主允许不得转载. 转自:http://blog.csdn.net/wzx19840423/article/details/6643094  最近去一家牛逼的公司面试 ...

  9. POI设置Word页边距

    参考资料:http://stackoverflow.com/questions/17787176/spacing-and-margin-settings-in-word-document-using- ...

  10. vim定位到指定行数

    显示行号:命令模式下set nu 定位到指定行: 命令模式下,:n   比如想到第2行,:2 编辑模式下,ngg  比如想到第5行 5gg(或者5G) 打开文件定位到指定行   vim  +n  te ...