<!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. DFS-深度优先遍历

    #include <iostream> /* 5 4 0 0 1 0 0 0 0 0 0 0 1 0 0 1 0 0 0 0 0 1 0 0 4 1 Total: 9 7 5 Min: 5 ...

  2. vb 三种启动模式

    正常启动不用说了 就是虚拟机和显示部分在同一个程序里进行 直接关闭程序 就都关闭了 相当于我们普通的电脑, 有主机和显示器无界面启动 也很好理解 ,就是在后台启动虚拟机,如同服务器, 我们只有一个主机 ...

  3. 关于Unity中天空盒的使用

    天空盒 是一个盒子,一个正方形的盒子.其实本身也是一种shader,需要材质球做载体. 1: 一个场景是由6幅正方形的纹理图无缝拼接而成, 在视野看来位于真实的视野一样;2: 两种天空盒: 场景天空盒 ...

  4. Spring Boot使用Servlet、Filter或Listener的方式

    根据官方文档说明,有两种方式可以在你的Spring Boot应用中使用Servlet.Filter或Listener. 其一:将Servlet.Filter或Listener注册成Spring Bea ...

  5. linux系统下的缺失 libstdc++.so.6: version’GLIBCXX_3.4.20’的问题：

    在linux下遇到了一个这样的问题,使用anaconda时,它的安装库里的文件被提示:缺失 libstdc++.so.6: version’GLIBCXX_3.4.20’.后来经过查看资料知道了原来是 ...

  6. OpenGL中的二维编程——从简单的矩形开始

    一.OpenGL的组成 图元函数(primitive function)指定要生成屏幕图像的图元.包括两种类型:可以在二维.三维或者四维空间进行定义的几何图元,如多边形:离散实体:位图. 属性函数(a ...

  7. Maven POM

    POM代表项目对象模型.它是 Maven 中工作的基本单位,这是一个 XML 文件.它始终保存在该项目基本目录中的 pom.xml 文件.POM 包含的项目是使用 Maven 来构建的,它用来包含各种 ...

  8. linux -- "./configure --prefix "命令

    源码的安装一般由3个步骤组成:配置(configure).编译(make).安装(make install). Configure是一个可执行脚本,它有很多选项,在待安装的源码路径下使用命令./con ...

  9. jQuery使用动态渲染表单功能完成ajax文件下载

    原文链接:http://www.poluoluo.com/jzxy/201301/195126.html 封装的通用js函数代码: // Ajax 文件下载 jQuery.download = fun ...

  10. C++ 著名程序库 概览

          本文转载自: http://ace.acejoy.com/thread-3777-1-1.html   1.C++各大有名库的介绍--C++标准库 2.C++各大有名库的介绍--准标准库B ...