zoukankan      html  css  js  c++  java
  • flex布局常用

    1.flex-direction:决定主轴方向

    row:主轴为水平方向。排列为从左至右。

    column:主轴为竖直方向。排列为从上至下。

    row-reverse:主轴为水平方向。排列为从右至左。

    column-reverse:主轴为竖直方向。排列为从下至上。

    2.flex-wrap:默认情况,排列在一条线上,即主轴上,flex-wrap决定当排列不下时是否换行以及换行的方式

    nowrap:自动缩小项目,不换行。

    wrap:换行,第一行在上。

    wrap-reverse:换行,第一行在下。

    3.justify-content 决定子元素在主轴上的对齐方式

    flex-start:左对齐。

    flex-end:右对齐。

    space-betwenn:两端对齐。

    space-around:沿轴线均匀分布。

    4.align-items 决定子元素在交叉轴的对其方式

    flex-start:顶端对齐。

    flex-end:底部对齐。

    center:竖直方向居中对齐。

    stretch:如子元素未设置高度,子元素将和容器等高对齐。

    5.align-content 该属性定义了当有多根主轴时,即子元素不止一行时,多行在交叉轴轴上的对齐方式。注意当有多行时,定义了align-content后,align-items属性将失效

    flex-start:左对齐。

    flex-end:右对齐。

    center:居中对齐。

    space- between:两端对齐。

    space-around:沿轴线均匀分布。

    stretch:各行将根据其flex-grow值伸展以充分占据剩余空间。

     5.flex-grow

    定义了当flex容器有多余空间时,子元素是否放大。默认值为0,即当有多余空间时也不放大;可能的值为整数,表示不同的子元素的放大比例。

  • 相关阅读:
    资源合并fis-postpackager-simple插件的使用
    FIS3使用官方例子流程
    FIS常用命令
    SASS输出风格
    Webstorm实时编译SASS和LESS
    如何使用Less?
    DNS预解析dns-prefetch提升页面载入速度优化前端性能
    前端性能优化策略
    利用多域名存储静态资源进行性能优化:网站的静态资源为什么要使用独立域名
    Nginx多域名配置
  • 原文地址:https://www.cnblogs.com/xpcool/p/10252874.html
Copyright © 2011-2022 走看看