<!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. git基本操作：使用git将本地代码上传到GitHub

    一.创建github repository(仓库) 1.登录GitHub 创建GitHub仓库,首先需要登录GitHub,GitHub网址:https://github.com.如果没有GitHub账 ...

  2. WampServer 常见问题

    Wamp就是Windows 下的Apache Mysql PHP集成环境. 支持phpmyadmin 注意:安装前请先安装VC 2010运行库(vcredist2010.exe ),否则会提示没有找到 ...

  3. USB2.0学习笔记连载（五）：EZ-USB重要寄存器的配置

    本篇博客主要讲解EZ-USB一些重要寄存器的配置,首先对于本篇博客所讲的内容,读者应该到官网上去下载相关的手册,其中包括<EZ-USB Technical Reference Manual> ...

  4. selenium（java）处理HTML5的视频播放

    大多数浏览器使用控件(如 Flash) 来播放规频,但是,不同的浏览器需要使用不同的插件.HTML5 定义了一个新的元素<video>,,指定了一个标准的方式来嵌入电影片段.IE9+.Fi ...

  5. Loss is its own Reward: Self-Supervision for Reinforcement Learning

    作者用action, reward, state等当做lalbel,进行有监督训练.

  6. tensorflow prelu的实现细节

    tensorflow prelu的实现细节 output = tf.nn.leaky_relu(input, alpha=tf_gamma_data,name=name) #tf.nn.leaky_r ...

  7. 【转】【Android】Android Studio打包全攻略

    项目写完了,现在需要把应用上传到市场,问题出现—怎么把代码变成.apk(Android的可安装文件).1. 创建签名文件2. 填写好签名参数3. 生成APK注意:签名的密码和密匙的密码注意保管,不要忘 ...

  8. matlab中常用的函数

    find()函数: 功能:用于返回矩阵中想要的元素的索引值: 用法: index = find(X), 当X为一个矩阵时,返回的index是一个列向量,表示矩阵X中非零值的索引值,这个索引值吧,是按把 ...

  9. T4生成多文件时,不生成自己

    如:我用的网上的生成多文件的一个include文件. 生成多文件时,默认会生成一个以自己名字命名的文件如: 有一个demo.tt文件,生成时会出来一个demo.cs文件(默认情况下) 解决方法: Fo ...

  10. mybatis 参数为String，用_parameter 取值

    mybatis 参数为String,if test读取该参数代码: <select id="getMaxDepartId" parameterType="java. ...