<!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. SpringBoot2 添加应用拦截器

    项目参考:详细参见:<Spring Boot 2精髓:从构建小系统到架构分布式大系统> 第三章 3.6.1节 拦截器 MyWebMvcConfigurer package com.arch ...

  2. String、StringBuffer与StringBuilder 复习回顾总结

    1.三者在执行速度方面的比较:StringBuilder >  StringBuffer  >  String 2.String <(StringBuffer,StringBuild ...

  3. confluence + 禅道安装教程

    都是从网上拿的 1. 搭建confluence BE82-LO81-4O25-THDD AAABMQ0ODAoPeJxtkE1rwzAMhu/+FYadXepkYd3AsDQ2rCwfZUkHO7qp ...

  4. Java数组扩展

    Java中,数组初始化后如何扩展数组? 示例 以下示例显示如何在创建新并初始化数组后扩展数组. package com.yiibai; public class ExtendingArray { pu ...

  5. TPshop的规格表设计原理机制

    TPshop商品规格比较简单, 数据库设计清晰, 先看上图购买商品时对应的选择, 不同规格有着不同的价格和不同的库存. 再看看后台对应的设置,手机例子 颜色:黑色 白色 金色 内存:32G 64G  ...

  6. memcache -- 使用场景

    memcache:分布式缓存机制 使用场景: 1.对数据的存储要求不高,就算丢失也关系不大(因为memcache是非持久化存储) 2.不适合单机使用,即不适合将memcache和数据库等都放到同一台机 ...

  7. SQL Server 定时执行SQL语句的方法

    SQL SERVER 定时任务,你可以启动一下.不过要想更加直观的控制,直接写一个程序,定时执行你的存储过程. 1.设置“SQL Server 代理”(SQL Server Agent)服务随系统启动 ...

  8. c# 连接mysql配置config，不用装net connector

    <system.data> <DbProviderFactories> <remove invariant="MySql.Data.MySqlClient&qu ...

  9. JSP——MVC模式+Servlet生命周期

    设计模式MVC模式 模型MODEL操作数据库的增删改查——javaBean 视图VIEW显示数据——JSP 控制器CONTROLLER响应用户的——servlet Model(模型),是程序的主体部分 ...

  10. u3d中 rect[2] == rt->GetGLWidth() && rect[3] == rt->GetGLHeight()错误的原因及解决方法

    原文:http://blog.csdn.net/wolf96/article/details/38363161 官方是这么解释的 http://issuetracker.unity3d.com/iss ...