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. 使用docker部署SqlServer

    踩了很多坑,来记录一下 首先说sqlserver 1. 安装docker要使用centos 7以上版本,使用centos 6及以下版本会出现各种问题 2. docker CE安装过程 $ sudo y ...

  2. Linux输入法问题

    本篇博文简单介绍一下介绍Linux输入相关问题及解决方案 关于Invalid UTF-8参见https://www.baidu.com/link?url=QDh2Fa1uJcmyiaKZBzAFkNn ...

  3. Karma (Test runner)

    Karma https://baike.baidu.com/item/%E7%BE%AF%E7%A3%A8/7618552?fromtitle=Karma&fromid=878453 1,意译 ...

  4. UDP核心API讲解

  5. SQL Server安全

    第一篇 SQL Server安全概述 第二篇 SQL Server安全验证 第三篇 SQL Server安全主体和安全对象 第四篇 SQL Server安全权限 第五篇 SQL Server安全架构和 ...

  6. django drf 基础学习2

    DRF基本程序调用一 models初步编写  1 编写model.py    from django.db import models 导入    class dbinfo(models.Model) ...

  7. C语言之路-2-判断

    #include<stdio.h> int main() { ; printf("请输入"); scanf("%d",&a); ){ pri ...

  8. WPF 之 调用线程必须为 STA,因为许多 UI 组件都需要

    WPF中,代码中准备控制控件内容时,有时会报错:“ 调用线程必须为 STA,因为许多 UI 组件都需要 ”. 如在winform下面,使用多线程时,控件的值读取是可以的,但如果要更改,那么就必须进行一 ...

  9. MySQL问题汇总

    1.中文乱码 连接设置: 数据库设置:

  10. Mac ---- markdown 转 html\word\pdf

    在Mac上,有一个软件,叫iA writer,是一个文字编辑器,可以进行md到word的转换,但它是收费的,RMB68元. 如果只是临时用一下,不想购买,你可以使用pandoc. 在mac下,使用方法 ...