zoukankan      html  css  js  c++  java
  • box-css3

    父容器样式必须有定义:"{ display: -webkit-box }"
    现象:水平时只能在一行布局,子容器在垂直方向上会填充父容器。
    技巧:可以做水平居中和垂直居中。也可以实现经典的n列布局
    说明:本文所用到的属性只在webkit内核的浏览器上做过测试

    box-origin (horizontal)

    The box-orient property specifies whether the children of a box should be laid out horizontally or vertically.

    Children within a horizontal box are displayed from left to right, and children within a vertical box are displayed top to bottom. However, the box-direction and box-ordinal-group properties can change this ordering.

    box-orient: horizontal|vertical|inline-axis|block-axis|inherit;
    Default value: inline-axis

    box-direction

    The box-direction property specifies the direction in which child elements of a box element are laid out.
    box-direction: normal|reverse|inherit;

    reverse: Display the child elements in the reverse direction

    Default value: normal

    box-pack (水平方向)

    The box-pack property specifies where child elements of a box are placed when the box is larger than the size of the children. This property specifies the horizontal position in horizontal boxes, and the vertical position in vertical boxes.
    box-pack: start|end|center|justify;
    Default value: start

    box-align (垂直方向)

    The box-align property specifies how to align the child elements of a box.
    box-align: start|end|center|baseline|stretch;
    Default value: stretch

    box-flex (定义在子容器中)

    The box-flex property specifies whether the child elements of a box is flexible or inflexible in size.

    Elements that are flexible can shrink or grow as the box shrinks and grows. Whenever there is extra space in a box, flexible elements are expanded to fill that space.

    box-flex: value;
    Default value: 0.0 (indicates that the element is inflexible)

  • 相关阅读:
    Python属性、方法和类管理系列之----__slots__属性
    Python属性、方法和类管理系列之----属性初探
    解释型语言和编译型语言的不同以及Python如何运行
    Python的字符串操作和Unicode
    Python中异常(Exception)的总结
    leetcode经典动态规划题解题报告
    mybatis源码分析一
    ReentrantLock源码分析
    CopyOnWriteArrayList,CopyOnWriteArraySet源码分析
    CyclicBarrier源码分析
  • 原文地址:https://www.cnblogs.com/mackxu/p/css3-box.html
Copyright © 2011-2022 走看看