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. 什么是Tensor

    https://blog.csdn.net/kansas_lh/article/details/79321234 tensor是tensorflow基础的一个概念——张量. Tensorflow用到了 ...

  2. Vue(小案例_vue+axios仿手机app)_首页（底部导航栏+轮播图+九宫格）

    ---恢复内容开始--- 一.前言                        1.底部导航(两种做法)                                         2.轮播图 ...

  3. centos7启动网卡报错(Failed to start LSB: Bring up/down networking )

    systemctl status network.service systemctl stop NetworkManager systemctl disable NetworkManager syst ...

  4. Entity Framework入门教程（6)--- 在线场景中保存数据

    在线场景中保存数据 在线场景中保存实体数据是一项相当容易的任务,因为使用的是同一个context,这个context会自动跟踪所有实体发生的更改. 下图说明了在线场景中的CUD(创建,更新,删除)操作 ...

  5. 使用ZooKeeper协调多台Web Server的定时任务处理(方案1)

    背景说明: 有一套Web服务程序, 为了保证HA, 需要在多台服务器上部署, 该服务程序有一些定时任务要执行, 现在要保证的是, 同一定时任务不会在多台机器上被同时执行. 方案1 --- 任务级的主备 ...

  6. linux 远程 telnet

    linux 远程 telnet [ root@test1 ~]# yum install telnet* (安装的三个包  xinetd . telnet-server.telnet)   [ roo ...

  7. Factorized TDNN（因子分解TDNN，TDNN-F）

    论文 Povey, D., Cheng, G., Wang, Y., Li, K., Xu, H., Yarmohamadi, M., & Khudanpur, S. (2018). Semi ...

  8. rem自适应js

    Rem自适应js---flexible.min.js   网上看到很多移动端适配的各种方法,由于原来工作中对rem的疏忽,所以决定重新学习rem~ 由于移动端特殊性,本文讲的是如何使用rem实现自适应 ...

  9. mybatis（入门级项目）

    框架的搭建:(两个java类,两个xml配置文件) 1.导入jar包,日志debug文件以及数据库的参数文件 2.建立持久化类(和数据库的列值相同的类) user类的一个扩展类: userQueryV ...

  10. Sublime text3 连接sftp/ftp（远程服务器）

    1.按下Ctrl + Shift + P调出命令面板2.在输入框中输入Sftp,按回车下载3.建一个新的文件夹放到左边的项目栏中4.右击文件夹,选中SFTP/FTP,点击Map to Remote5. ...