<!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. 抓包程序可抓一切数据(破微信oauth2限制) 完整教程

    1.下载fiddler 官网下载或者 https://www.cr173.com/soft/57378.html 2.按图设置 3.重启软件 4.看下自己的网络IP cmd->ipconfig ...

  2. R语言常用基础知识（入门）

    data.frame 动态确定列名称 var <- "mpg" #Doesn't work mtcars$var #These both work, but note tha ...

  3. 移动互联网App兼容性测试

    我建议大家也可以参考一些针对App监测和统计的网站,都非常有意义,具体如下: 友盟品牌手机排行榜  http://www.umeng.com/ 移动观象台   https://www.talkingd ...

  4. C++ 定时器任务类实现

    #ifndef __TIMERTASK_H_ #define __TIMERTASK_H_ /* 定时器任务基类 */ #include "asr_taskinterface.h" ...

  5. 《FPGA全程进阶---实战演练》第一章之如何学习FPGA

    对于很多初学者,大部分都是急于求成,熟不知越是急于求成,最终越是学无所成,到头来两手空空,要学好FPGA,必须弄懂FPGA本质的一些内容. 1.FPGA内部结构及基本原理 FPGA是可以编程的,必须通 ...

  6. Android图片二进制与Bitmap、Drawable之间的转换

    Android图片二进制与Bitmap.Drawable之间的转换 Java代码  public byte[] getBitmapByte(Bitmap bitmap){      ByteArray ...

  7. pandas汇总和计算描述统计

    pandas 对象拥有一组常用的数学和统计方法. 他们大部分都属于简约和汇总统计, 用于从Series中提取单个值(如sum或mean) 或从DataFrame的行或列中提取一个Series.跟对应的 ...

  8. SpagoBI 教程 Lesson 3: Highchart Dashboards

    SpagoBI Lesson 3: Highchart Dashboards Business Intelligence dashboards Every car comes with a dash ...

  9. 「下载神器」aria2 懒人安装教程 [Windows]

    是一款开源.轻量级的多协议命令行下载工具,支持 HTTP/HTTPS.FTP.SFTP.BitTorrent 和 Metalink 协议,拥有众多第三方支持插件,被誉为「下一代下载工具」和「下载神器」 ...

  10. R绘图系统边框详解

    在R语言的基础绘图系统中,有plot, figure, outer, inner 共4种边框: 这四种边框实际上明确了整个绘图设备的布局 1) outer,  当我们声明一个绘图设备的时候,outer ...