<!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. python datetime和unix时间戳之间相互转换

                                python datetime和unix时间戳之间相互转换 1.代码:    import time    import datetime # ...

  2. STM32的TAMPER-RTC管脚作为Tamper的使用[转]

    问题一: 当 TAMPER引脚上的信号从 0变成1或者从 1变成 0(取决于备份控制寄存器BKP_CR的 TPAL位),会产生一个侵入检测事件.侵入检测事件将所有数据备份寄存器内容清除.   然而为了 ...

  3. Python 类的多态的运用

    #类的多态的运用 #汽车类 class Car(object): def move(self): print("move ...") #汽车商店类 class CarStore(o ...

  4. numpy的排序

  5. 【Python】Python加lxml实现图片解析下载功能

    1.下载网页:OpenHtml.py import urllib.request from urllib.parse import quote class HtmlLoader(object): de ...

  6. (笔记)Linux Root下的.gvfs出现异常解决办法

    在linux系统下安装软件或复制文件的时候,复制不成功,出现错误如下: error: failed to stat /home/dade/.gvfs: Permission denied. 表面上看: ...

  7. e786. 创建JSpinner组件

    This example demonstrates how to build three kinds of spinners. A number spinner: // Create a number ...

  8. 使用OpenSSL创建自己的CA root certificate

    在密码学中,CA(Certificate Authority,认证机构)是指一个被多个用户信任的机构,该机构能够创建和指派公钥证书. 为规范起见,我们先介绍本文可能涉及的术语, asymmetric ...

  9. POI写docx文件table中的单元格水平、垂直对齐

    核心示例代码 垂直对齐 XWPFTableCell cell = table.getRow(i).getCell(j); cell.setVerticalAlignment(XWPFTableCell ...

  10. JavaScript资源收集分享，持续更新中。。。

    平时收集的一些JavaScript资源,分享给大家 jQuery UI jEasyUI Extensions http://jqext.sinaapp.com 布局做的挺不错,有比较复杂的菜单导航.P ...