<!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. ECS Linux服务器xfs磁盘扩容

    ECS Linux服务器xfs磁盘扩 ECS Linux服务器xfs磁盘使用阿里云官方提供的磁盘扩容方法扩容会有报错: [root@iZ28u04wmy2Z ~]# e2fsck /dev/xvdb1 ...

  2. spring 加载jar包中的配置文件

    package com.xxx.ssptsppt.dataexchange.utils; import com.xxx.maybee.engine.utils.FileUtil; import com ...

  3. 前端最全的 API 集锦

    window.getComputedStyle(el,':after')[attrName]------------------------------------------------------ ...

  4. Androidn Notification的使用,解决找不到setLatestEventInfo方法

    转自:http://blog.csdn.net/songyachao/article/details/51245370#comments 今天使用4.0.3使用 Notification notifi ...

  5. 自然语言交流系统 phxnet团队 创新实训 项目博客 （十一）

    神经网络的计算过程 神经网络结构如下图所示,最左边的是输入层,最右边的是输出层,中间是多个隐含层,隐含层和输出层的每个神经节点,都是由上一层节点乘以其权重累加得到,标上“+1”的圆圈为截距项b,对输入 ...

  6. GRUB——系统的引导程序简单介绍

    这几天对于操作系统是如何引导启动的特征的感兴趣,已经到了不能自拔的状态了,所以索性好好了解一下: 前面已经说过了,MBR对于系统启动的重要性,这是不多啰嗦:  现在介绍一个 grub ,启动管理器,它 ...

  7. e799. 限制JSlider的数值在标记以内

    By default, the slider can take on any value from the minimum to the maximum. It is possible to conf ...

  8. python环境搭建和开发工具的配置【转】

    因为要学习python了,第一步当然是环境搭建和开发工具的配置了,下边开始了. 我的开发环境是在window下. 一.环境搭建 先在python官网python.org下载安装文件,python2.x ...

  9. python3 pyodbc简单使用

    转自:https://my.oschina.net/zhengyijie/blog/35587 1.连接数据库 首先要import pyodbc 1)直接连接数据库和创建一个游标(cursor) cn ...

  10. 嵌入式开发之makefile---交叉编译静态库和动态库的生成和调用

    c和cpp 混合的动态库生成: $(LIBSO): $(COBJS) $(CPPOBJS) $(CPP) -shared -o $@ $^ $(LIBS) ////////////////////// ...