<!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. 【oneday_onepage】——China's Internet users grow to 591 million

    July 17, 2013, 6:29 AM — China's Internet populace grew to 591 million by the end of June, as more n ...

  2. JS学习 - offset家族(一)

    JS学习 - offset家族(一) 先来张图开开胃 offsetWidth offetHeight 得到对象的宽度和高度(自己的,与他人无关) offsetWidth = width + borde ...

  3. Casual Note of Computer Network

    20170605 本地环回地址(loopback): IPV4:127.0.0.1-127.255.255.254 IPV6:::1 (即 0000:0000:0000:0000:0000:0000: ...

  4. 目录_JVM专题

    (PS:多为<深入理解Java虚拟机——JVM高级特性与最佳实践>一书的阅读笔记,权记于此以备忘) 纲要: 类加载(加载.连接(验证.准备.解析).初始化) (类的生命周期:除此5个外,还 ...

  5. Action.c(37):Error-27791:Server"192.168.2.111" has shut down the connection paematurely

    1)测试的时候最好应用干净的测试环境,即:清楚一切可能干扰的对象:2)如果出了这种错误,要认真的去排查错误,不单单找找脚本,或者[b][url=http://www.ltesting.net/html ...

  6. js 实时数据显示

    js代码 <script type="text/javascript" src="jquery.js"></script> <sc ...

  7. Spring JDBC SqlUpdate类示例

    org.springframework.jdbc.object.SqlUpdate类提供了表示SQL更新的可重用操作对象. 使用到的 Student 表的结构如下 - CREATE TABLE Stu ...

  8. Spring JDBC SimpleJdbcCall类示例

    org.springframework.jdbc.core.SimpleJdbcCall类是表示对存储过程或存储函数的调用的多线程,可重用的对象. 它提供元数据处理以简化访问基本存储过程/函数所需的代 ...

  9. ios中layer动画和UIView动画代码总结

    kCATransitionFade淡出  kCATransitionMoveIn覆盖原图  kCATransitionPush推出  kCATransitionReveal底部显出来    pageC ...

  10. 随手记录一下 Vue 下来框搜索 select2 封装成vue

    引入布局文件 <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css& ...