<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <title>Document</title>

  <style>

  .flex-container {

    display: flex;

    width: 400px;

    height: 400px;

    background-color: gray;

  }

  .flex-item {

    background-color: green;

    width: 100px;

    height:100px;

    margin: 5px;

  }

  /*order默认值0，值越大越靠后*/

  .flex-item:nth-child(2) {

  	order:-1;

  }

  </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>

</body>

</html>

flexbox子盒子order属性的更多相关文章

  1. flexbox子盒子flex属性

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. flexbox子盒子align-self属性

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. flexbox父盒子align-content属性

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. flexbox父盒子flex-wrap属性

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. flexbox父盒子align-items属性

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. flexbox父盒子justify-content属性

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. flexbox父盒子flex-direction属性

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. Flexible 弹性盒子模型之CSS order 属性

    实例 设置弹性盒对象元素的顺序: div#myRedDIV {order:2;} div#myBlueDIV {order:4;} div#myGreenDIV {order:3;} div#myPi ...

  9. CSS3 -- FlexBox(弹性盒子)

    盒子模型 CSS中有一种基础设计模式叫盒模型,盒模型定义了Web页面中的元素如何来解析. 在盒模型中主要包括width.height.border.background.padding和margin这 ...

随机推荐

  1. mysql国内镜像下载网址

    http://mirrors.sohu.com/mysql/ http://mirrors.ustc.edu.cn/mysql-ftp/Downloads/ 开源镜像站点汇总 http://segme ...

  2. postgresql远程连接中断的处理

    在网络上连接远程服务器postgresql时,不活动时间稍长就会自动断开连接,不利于操作. 琢磨了一下,服务器上使用以下网络配置时,解决了这个问题.   #man 7 tcp   net.ipv4.t ...

  3. 如何将Mac系统OS X Yosemite装到外部磁盘？（转）

    有Mac用户想了解是否可以将 OS X Yosemite 装到替代的外部磁盘,答案是肯定的,有需求的用户,可以按照本篇教程逐步进行. 前面我已经写过一篇文章介绍了如何安装 OS X Yosemite ...

  4. Tomcat server.xml 配置虚拟目录

    对于Tomcat,打开..\Tomcat 6.0\conf\server.xml文件,找到下面的一行代码(Host)然后在这一行之间下面添加配置代码:<Context path="&q ...

  5. Ajax+Jsp+servlet+json技术的使用

    Ajax+Jsp+servlet+json技术的使用 在使用json的时候,记得必须导入如下几个.jar包,最好是手动复制.jar包只lib路径下,否则可能出现异常. commons-beanutil ...

  6. SAP HR模块的基础数据表和增强配置

    信息类型是SAP HR模块数据单元,用于对人员数据的记录和维护,是HR的基础.信息类型按照其创建方式的不同可以分为:人事信息类型.组织信息类型.信息类型数据的维护主要在事物码PA30.PA40.po1 ...

  7. Lucene系列三：Lucene分词器详解、实现自己的一个分词器

    一.Lucene分词器详解 1. Lucene-分词器API (1)org.apache.lucene.analysi.Analyzer 分析器,分词器组件的核心API,它的职责:构建真正对文本进行分 ...

  8. Java如何比较两个数组？

    在Java中,如何比较两个数组? 示例 以下示例使用equals方法来检查两个数组是否相等. package com.yiibai; import java.util.*; public class ...

  9. (转)关于C++ const 的全面总结

    转自:http://blog.csdn.net/Eric_Jo/article/details/4138548 C++中的const关键字的用法非常灵活,而使用const将大大改善程序的健壮性,本人根 ...

  10. R语言ggplot2-labs 函数

    labs 函数主要有以下三个用途: 1) 设置图片的标题(title), 子标题(subtitle), 引用(caption) 代码示例: ggplot(mtcars, aes(mpg, wt, co ...