<!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. Redis列表

    Redis列表是简单的字符串列表,排序插入顺序.您可以在头部或列表的尾部Redis的列表添加元素. 列表的最大长度为232 – 1 (每个列表超过4十亿元素4294967295)元素. 例子 redi ...

  2. Casual Note of Computer Network

    20170605 本地环回地址(loopback): IPV4:127.0.0.1-127.255.255.254 IPV6:::1 (即 0000:0000:0000:0000:0000:0000: ...

  3. Java sun.misc.unsafe类

    Java是一个安全的开发工具,它阻止开发人员犯很多低级的错误,而大部份的错误都是基于内存管理方面的.如果你想搞破坏,可以使用Unsafe这个类.这个类是属于sun.*API中的类,并且它不是J2SE中 ...

  4. 将Web项目War包部署到Tomcat服务器

    1. 配置Java运行环境 1.1 下载并安装JDK 从官网上下载最新的JDK:http://java.sun.com/javase/downloads/index.jsp ,下载后安装,选择想把JD ...

  5. Android pid uid

    PID:为Process Identifier, PID就是各进程的身份标识,程序一运行系统就会自动分配给进程一个独一无二的PID.进程中止后PID被系统回收,可能会被继续分配给新运行的程序,但是在a ...

  6. python进行数据分析---python3卡方

    数学公式思路: 代码: 使用典型的pandas进行的逻辑操作 同时也指针对了pandas https://github.com/renfanzi/python3_Variance_Chisquare. ...

  7. 高通 双MIC 设置

    android O中设置双MIC降噪,需要在build.prop添加属性"ro.vendor.audio.sdk.fluencetype"属性. 属性值位于hardware/qco ...

  8. Linux命令_用户身份切换

    命令 su 格式为:su [ - ] username,后面可以跟 - ,也可以不跟. 普通用户的su命令不加username时,就相当于切换到root用户,反之亦然.当su 命令加上 - 后,会初始 ...

  9. Maven存储库

    什么是Maven资源库? 在 Maven 术语里存储库是一个目录,即目录中保存所有项目的 jar 库,插件或任何其他项目特定文件,并可以容易由 Maven 使用. Maven库中有三种类型 local ...

  10. Cisco 交换机修改密码

    实验环境: 公司有一台思科交换机忘记登录密码,无法进入到特权模式下. 实现功能: 修改特权模式下的登录密码 1.  桌面 ---- 开始  ---- 所有程序 ---- 附件 ---- 超级终端 -- ...