zoukankan      html  css  js  c++  java
  • Flex布局

    .box{

    display:flex;

    display:-webkit-flex;

    }

    注意,设为 Flex 布局以后,子元素的floatclearvertical-align属性将失效。

    容器默认存在两根轴:水平的主轴(main axis)和垂直的交叉轴(cross axis),也称为主轴和侧轴。

    容器的属性:

    • flex-direction:row | row-reverse | column | column-reverse
    • flex-wrap:nowrap | wrap | wrap-reverse,默认为nowrap
    • flex-flow:row nowrap; flex-flow属性是flex-direction属性和flex-wrap属性的简写形式,默认值为row nowrap
    • justify-content:flex-start | flex-end | center | space-between | space-around; 项目在主轴上的对齐方式。主轴根据flex-direction而发生变化。
    • align-items:flex-start | flex-end | center | baseline | stretch;项目在交叉轴(Y轴)上的对齐方式
    • align-content:align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线,该属性不起作用。多行的时候使用。

    项目(item)的属性:

    • order:属性定义项目的排列顺序。数值越小,排列越靠前,默认为0。
    • flex-grow:<number>;属性定义项目的放大比例,默认为0,即如果存在剩余空间,也不放大。
    • flex-shrink:属性定义了项目的缩小比例,默认为1,即如果空间不足,该项目将缩小。为0不缩小项目
    • flex-basis:项目将占据固定空间,它的默认值为auto,即项目的本来大小。
    • flex:flex属性是flex-growflex-shrink 和 flex-basis的简写
    • align-self: auto | flex-start | flex-end | center | baseline | stretch;单个项目有与其他项目不一样的对齐方式,覆盖align-item值
  • 相关阅读:
    系统CLOCK 频率 C代码查看范例
    LINUX C 文件读写范例
    linux 打印机 打印机支持工作组 openprinting
    问题记录
    初步了解profile文件
    内核中的HZ 及延迟等
    LINUX_System_Call_Quick_Reference
    Linux基础篇 六 (bash shell基础 (vi /etc/shells))
    Android调用平台功能具体技巧分享
    男人35岁前要做好的几件事
  • 原文地址:https://www.cnblogs.com/liangxin/p/flex.html
Copyright © 2011-2022 走看看