zoukankan      html  css  js  c++  java
  • Flex核心属性整理

    在这里插入图片描述
    main axis和cross axis的位置不一定是水平和垂直的,以flex-direction的值即为主轴方向


    在这里插入图片描述

    justify-content:主轴对齐方式

    • space-between:将多余空间放在中间
      在这里插入图片描述
    • space-around:将多余空间放在两边,和space-between的区别就是最两边会有空间
      在这里插入图片描述
    • flex-start:都靠齐主轴的首部(main start)
    • flex-end:都靠齐主轴的尾部(main end)
    • center:全部紧凑居中

    align-items:侧轴对齐方式

    • stretch:拉伸至所有flex item中最长的一个的长度(默认值)
    • center:居中,个人理解为全部都对齐至主轴
    • flex-start:全部靠齐侧轴首部(cross start)
    • flex-end:全部靠齐侧轴尾部(cross end)

    align-content:当产生换行时,行与行之间的空隙的分配方式


    在这里插入图片描述

    flex-grow:所有flex item 排完之后同一行还有空间的时候让指定flex item扩大来填充空白部分,值为整数。

    flex-shrink:空间不够时指定Flex item缩放比例,值为整数(一般不用)。

    flex-basis:指定flex item的默认大小,单位像素(一般不用)。

    flex:上面三个属性的合集。

    order:修改指定的flex item在主轴上的顺序,值为整数。

    align-self在各flex item高度不一致且在高度不确定的时候,用于单独指定某个Flex item的对齐方式,关于这个属性我的理解是对应flex container中的align-itemsalign-item是指定所有的flex item的在侧轴的对齐方式,而align-self用于指定某一个的在侧轴的对齐方式


    这里只记录了我认为核心属性,比较简单的或者不常用的就不具体讲了,想要详细学习可以参考MDN:https://developer.mozilla.org/zh-CN/docs/Web/CSS/flex

  • 相关阅读:
    AX 利用windows粘贴板功能实现批量数据快速导出EXCEL
    在ax中怎么对enum类型循环取其中每一个值
    vba 快速定位当前EXCEL最后一栏
    在AX4.0中使用C#脚本的实现
    悟透javascript
    SIGAI机器学习第四集 基本概念
    SIGAI机器学习第十七集 线性模型1
    胸小肌的重要性
    SIGAI机器学习第十六集 支持向量机3
    英语听力
  • 原文地址:https://www.cnblogs.com/YooHoeh/p/10465732.html
Copyright © 2011-2022 走看看