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-items，align-item是指定所有的flex item的在侧轴的对齐方式，而align-self用于指定某一个的在侧轴的对齐方式

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

Flex核心属性整理的更多相关文章

  1. CSS Flex布局属性整理

    Flex布局 display: flex; 将对象作为弹性伸缩盒展示,用于块级元素 display: inline-flex; 将对象作为弹性伸缩盒展示,用于行内元素 注意兼容问题: webkit内核 ...

  2. 【Windows】windows核心编程整理（上）

    小续 这是我11年看<windows核心编程>时所作的一些笔记,现整理出来共享给大家 windows核心编程整理(上) windows核心编程整理(下) 线程的基础知识 进程是不活泼的,进 ...

  3. flex布局笔记整理

    flex布局笔记整理 了解-webkit-box 利用postcss进行css代码的向后兼容时,display:flex兼容后的代码常会带有display:-webkit-box. 部分移动端内核较低 ...

  4. flex布局属性说明

    flex布局又称为盒子布局或弹性布局,用来为盒状模型提供最大的灵活性,任何一个容器都可以指定为 Flex 布局. 给父容器添加display: flex/inline-flex;属性,即可使容器内容采 ...

  5. FusionCharts for Flex的属性和事件

    FusionCharts for Flex的属性和事件 1.Properties(属性) (1)FCChartType (2)FCDataURL (3)FCDataXML (4)FCDebugMode ...

  6. Flex 项目属性：flex 布局示例

    flex属性: flex属性是flex-grow, flex-shrink 和 flex-basis的简写,默认值为0 1 auto.后两个属性可选. 该属性有两个快捷值:auto (1 1 auto ...

  7. DOM相关方法，属性整理

    DOM相关方法,属性整理1.获取元素的方法 1根据id获取对象 document.getElementById(''); 2根据标签名获取对象 document.getElementsByTagNam ...

  8. 【Windows】windows核心编程整理（下）

    windows核心编程整理(上) windows核心编程整理(下) 线程的堆栈 每当创建一个线程时,系统就会为线程的堆栈(每个线程有他自己的堆栈)保留一个堆栈空间区域,并将一些物理存储器提交给这个以保 ...

  9. 微信小程序flex容器属性详解

    flex容器属性详解 flex-direction决定元素的排列方向 flex-wrap决定元素如何换行 flex-flow 是 flex-direction 和flex-wrap的简写 justif ...

随机推荐

  1. MySQL 创建、删除、显示数据库、数据表

    1 创建.删除.显示数据库 -- 创建数据库 create database student_db character set utf8 collate utf8_general_ci; -- 删除数 ...

  2. 时间函数（1）：time，ctime，gmtime，localtime

    asctime(将时间和日期以字符串格式表示) #include<time.h> 定义函数 char * asctime(const struct tm * timeptr); 函数说明 ...

  3. saltstack主机管理项目：主机管理项目架构设计(二)

    1.salt架构图 https://docs.saltstack.com/en/getstarted/system/plugins.html plug-ins(左边):场景可插拔 subsystem- ...

  4. 防止Web表单重复提交的方法总结

    在Web开发中,对于处理表单重复提交是经常要面对的事情.那么,存在哪些场景会导致表单重复提交呢?表单重复提交会带来什么问题?有哪些方法可以避免表单重复提交? 表单重复提交的场景 1.场景一:服务端未能 ...

  5. win10免安装版本的MySQL的下载安装和配置

    下载mysql-xxx.zip(免安装版) 解压到自己想要的目录下(我的是D:\mysql\),打开mysql-5.7.21-winx64文件夹,新建my.ini文件,输入: [mysql] # 设置 ...

  6. springboot集成elasticsearch遇到的问题

    public interface EsBlogRepository extends ElasticsearchRepository<EsBlog,String>{ Page<EsBl ...

  7. python跨网段遍历枚举IP地址（转）

    转载链接:https://blog.csdn.net/u013042248/article/details/53165508 0x01 代码思路: 利用二进制遍历: 1.将IP地址分割,每一块转换为8 ...

  8. 软件模拟I2C通讯

    I2C协议概述,有相当详细的名词解释: 通信数量受限于地址空间和400Pf总线电容. 所有的数据传输过程中,SDA线的电平变化必须在SCL为低电平时进行,SDA线的电平在SCL线为高电平时要保持稳定. ...

  9. shiro-core包引用的版本问题

    在做shiro学习时,遇到这样的问题: Exception in thread "main" java.lang.NoClassDefFoundError: org/apache/ ...

  10. codeforces 1017C - Cloud Computing 权值线段树 差分 贪心

    https://codeforces.com/problemset/problem/1070/C 题意: 有很多活动,每个活动可以在天数为$[l,r]$时,提供$C$个价格为$P$的商品 现在从第一天 ...