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. 越光后端开发——ygapi（2.新建Model）

    1.新建Model 1.users数据 1.在apps/users/models.py中: from datetime import datetime from django.db import mo ...

  2. Kubernetes之ServiceAccount

    ServiceAccount 是什么 Service Account为Pod中的进程和外部用户提供身份信息.所有的kubernetes集群中账户分为两类,Kubernetes管理的serviceacc ...

  3. Memorise Me!——用数值做地址，实现快速查找

    题目如下: Arijit is a brilliant boy. He likes memory games. He likes to participate alone but this time ...

  4. 第八节，Opencv的基本使用------存取图像、视频功能、简单信息标注工具

    1.存取图像 import cv2 img=cv2.imread('test.jpg') cv2.imwrite('test1.jpg',img) 2.图像的仿射变换 图像的仿射变换涉及图像的形状位置 ...

  5. CF1139E Maximize Mex

    题目地址:CF1139E Maximize Mex 这其实是一个二分图匹配匈牙利算法的巧妙运用 考虑倒序回答 则由原来的删除改为添加 把 potential 值作为左部,则一共有编号为 \(0~m\) ...

  6. LaTeX技巧892: Ubuntu 安装新版本TeXLive并更新

    原文地址:http://www.latexstudio.net/archives/9788.html 摘要: 本文比较系统地介绍了在Ubuntu下的TeXLive的安装与配置测试过程,建议使用Ubun ...

  7. C++设计模式——状态模式

    前言 在实际开发中,我们经常会遇到这种情况:一个对象有多种状态,在每一个状态下,都会有不同的行为.那么在代码中我们经常是这样实现的. typedef enum tagState { state, st ...

  8. nginx+tomcat：动静分离+https

    nginx server { listen 80; server_name 192.168.0.103; # http访问重写为https rewrite ^ https:/$http_host$re ...

  9. 拓扑排序（Topological Sorting）

    一.什么是拓扑排序 在图论中,拓扑排序(Topological Sorting)是一个有向无环图(DAG, Directed Acyclic Graph)的所有顶点的线性序列.且该序列必须满足下面两个 ...

  10. 【算法】【python实现】二叉树深度、广度优先遍历

    二叉树的遍历,分为深度优先遍历,以及广度优先遍历. 在深度优先遍历中,具体分为如下三种: 先序遍历:先访问根节点,再遍历左子树,再遍历右子树: 中序遍历:先遍历左子树,再访问根节点,再遍历右子树: 后 ...