zoukankan      html  css  js  c++  java
  • css3 box 相关属性

    详见此文:css box-flex介绍

    文档:https://developer.mozilla.org/en-US/search?q=box,我还是喜欢火狐开发社区的文档。

    display:box有以下比较有意思的属性:

    • box-flex:number,其实就是计算占父元素(或者剩下的宽度)宽度的比例 ,请点击此处demo
    • box-align:start | center | end | baseline | stretch,就是对齐方式,子元素相对父元素的边界进行对齐的方式,请点击此处demo
    • box-orient:horizontal | vertical | inline-axis | block-axis | inherit ,这个是排列方式,无非就是横排还是竖排,虽然给了四个属性设置。 请点击此处demo
    • box-lines:single | multiple。子元素是否换行,请点击此处demo
    • box-pack:start | center | end | justify。子元素如何布局,请点击此处demo
    • box-ordinal-group:number,决定子元素的排序,还记得当年使用浮动和负边距把123布局改成213布局的经典案例么?如今,不需要这么复杂啦。请点击此处demo

    还有box-direction属性,有顺序和反转两个值。但是我觉得和box-ordinal-group有些重合了。

  • 相关阅读:
    day11
    day10
    day9
    day8
    day7
    day6
    day14
    day13
    day12
    day11
  • 原文地址:https://www.cnblogs.com/my_front_research/p/2853496.html
Copyright © 2011-2022 走看看