• display:box和display:flex属性介绍


    1.display:box

    父容器里面的box属性有box-orient|box-dirextion|box-align|box-pack|box-lines

    box-orient:用来确定父容器里面子元素的排列方式,是水平还是竖直horizontal|vertical|inline-axis|block-axis|inherit

    box-direction:确定父容器里面子容器的排列顺序,normal|reverse|inherit

    box-align:表示父容器里面子容器的垂直对齐方式,start|end|center|baseline|stretch

    box-pack:表示父容器里面子容器的水平对齐方式,start|end|center|justify

    box-lines:决定子元素是单行显示还是可以换行,single|multiple

    子元素的属性有box-flex|box-flex-group|box-ordinal-group

    box-flex:子元素所占比例,取值为数字

    box-flex-group:作用不详,浏览器不支持

    box-ordinal-group:可以改变子元素的顺序

    Tips:

    (1).在box-orient属性中,inline-axis是默认值。且horizontal与inline-axis的表现似乎一致的,让子元素横排;而vertical与block-axis的表现也是一致的,让元素纵列。

    2.display:flex

    父容器的属性有flex-direction|flex-wrap|flex-flow|justify-content|align-items|align-content

    flex-direction:决定主轴的排列方向,row|row-reverse|column|column-reverse,类似于display:box里面的box-orient

    flex-wrap:决定是否可以换行,wrap|nowrap|wrap-reverse,类似于display:box里面的box-lines

    flex-flow:flex-directionheflex-wrap的简写形式

    justify-content:决定子元素在主轴上的对齐方式,flex-start|flex-end|enter|space-between|space-around,类似于display:box里面的box-pack或者box-align

    align-items:决定子元素在交叉轴上的对齐方式,flex-start|flex-end|center|baseline|stretch(默认)

    align-content:义了多根轴线的对齐方式,flex-start|flex-end|enter|space-between|space-around|stretch

    子元素的属性有order|flex-grow|flex-shrink|flex-basis|flex|align-self

    order:决定子元素排列顺序,数值越小,排的越靠前 

    flex-grow:定义子元素的放大比例,默认0,不放大

    flex-shrink:定义子元素的缩小比例,默认1,即如果空间不足,子元素将缩小

    flex-basis:属性定义了在分配多余空间之前,项目占据的主轴空间(main size)。浏览器根据这个属性,计算主轴是否有多余空间。它的默认值为auto,即项目的本来大小

    flex:flex-grow,flex-shrink,flex-basis的简写

    align-self:允许子元素单个于其他子元素不一样的对齐方式,可覆盖align-items属性。默认值auto,表示继承父元素align-items属性,如果没有父元素,等同于stretch

    网上有很多资料可查,这个只是为了方便自己使用。

    链接:

    http://www.zhangxinxu.com/wordpress/2010/12/css-box-flex%E5%B1%9E%E6%80%A7%EF%BC%8C%E7%84%B6%E5%90%8E%E5%BC%B9%E6%80%A7%E7%9B%92%E5%AD%90%E6%A8%A1%E5%9E%8B%E7%AE%80%E4%BB%8B/

    http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html?utm_source=tuicool

  • 相关阅读:
    蓝绿发布、灰度发布和滚动发布
    centos网卡配置修改
    服务器安装centos8提示显示器不支持输出的分辨率
    Linux软件包管理
    Redis (error) NOAUTH Authentication required.解决方法
    mysql5.7.35数据库迁移
    MySQL5.7的参数优化
    mysql 安装完以后没有mysql服务
    Promise结合setTimeout--promise练习题(2)
    基础题--promise练习题(1)
  • 原文地址:https://www.cnblogs.com/walk-on-the-way/p/5997454.html
Copyright © 2020-2023  润新知