zoukankan      html  css  js  c++  java
  • 弹性盒子

    flex-direction (适用于父类容器的元素上)

    设置或检索伸缩盒对象的子元素在父容器中的位置。

    语法

    flex-direction: row | row-reverse | column | column-reverse
    • row:横向从左到右排列(左对齐),默认的排列方式。
    • row-reverse:反转横向排列(右对齐,从后往前排,最后一项排在最前面。
    • column:纵向排列。
    • row-reverse:反转纵向排列,从后往前排,最后一项排在最上面。

    .box{
    display:-webkit-flex;
    display:flex;
    margin:0;padding:10px;list-style:none;background-color:#eee;}
    .box li{100px;height:100px;border:1px solid #aaa;text-align:center;}
    #box{
    -webkit-flex-direction:row;
    flex-direction:row;
    }
    #box2{
    -webkit-flex-direction:row-reverse;
    flex-direction:row-reverse;
    }
    #box3{
    height:500px;
    -webkit-flex-direction:column;
    flex-direction:column;
    }
    #box4{
    height:500px;
    -webkit-flex-direction:column-reverse;
    flex-direction:column-reverse;
    }

    flex-direction示例:

    flex-direction:row

    • a
    • b
    • c

    flex-direction:row-reverse

    • a
    • b
    • c

    flex-direction:column

    • a
    • b
    • c

    flex-direction:column-reverse

    • a
    • b
    • c

    http://caibaojian.com/demo/flexbox/flex-direction.html 借鉴

  • 相关阅读:
    几种芯片封装
    Finder 快捷键
    Linux dnsmasq 服务
    java: private, protected, public
    java final
    Jenkins 搭建
    一款工作记录软件
    MacOS 修改主机名
    Ubuntu 静态IP
    adb tcp 调试
  • 原文地址:https://www.cnblogs.com/poilk/p/6032739.html
Copyright © 2011-2022 走看看