<!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. 三篇文章了解 TiDB 技术内幕——说计算

    在这我们将关系模型简单理解为 Table 和 SQL 语句,那么问题变为如何在 KV 结构上保存 Table 以及如何在 KV 结构上运行 SQL 语句. 假设我们有这样一个表的定义: CREATE ...

  2. Kryonet client disconnects after send a packet to server (java)

    http://stackoverflow.com/questions/25934876/kryonet-client-disconnects-after-send-a-packet-to-server ...

  3. install ubuntu on Android mobile phone

    Android 是基于Linux内核的开源操作系统,主要用在移动设备上.当然同样是基于Linux内核的操作系统,现在支持的Android的智能手机理论来说都能运行基于Linux的操作系统,比如现在流行 ...

  4. USB2.0相关应用笔记集锦

    在AN65209中 有一些应用笔记集锦,希望对大家有用.当然AN65209这篇应用笔记很重要,希望大家一定要看!!!一定要看!!!!

  5. android WiFi ASSOC_REJECT 流程跟踪

    Android设备在于AP关联时,如果AP返回关联拒绝帧,Android设别会把AP加入黑名单中. 黑名单中的设备将会在扫描时,延时一段时间放在后面处理. 代码以及log基于SDM450, Andro ...

  6. Eclipse初次java开发问题总结-4-Maven使用问题汇总

    Non-resolvable parent POM [INFO] Scanning for projects... [ERROR] The build could not read 1 project ...

  7. e794. 创建JSlider组件

    // Create a horizontal slider with min=0, max=100, value=50 JSlider slider = new JSlider(); // Creat ...

  8. CI框架 -- 核心文件 之 config.php

    Config:该文件包含CI_Config类,这个类包含启用配置文件来管理的方法 /** * 加载配置文件 * * @param string $file 配置文件名 * @param bool $u ...

  9. hibernate 中的session和事务(Transaction)

    在使用hibernate开发时,遇到最多的就是session与事务,那么他们两个有什么关系呢?下面我来抛砖引玉: 1.session是hibernate中的以及缓存机制,是用来对数据进行增删改查的一个 ...

  10. C# 最小化到托盘，托盘右击菜单显示

    添加notifyIcon控件,并添加Icon,否则托盘没有图标(托盘右键菜单也可直接在属性里添加): 主要的代码: public partial class Form1 : Form { #regio ...