Blog

vscode插件使用系列：1.psioniq File Header自动添加文件头

安装

使用vscode时经常需要重复性插入相同的文件头代码，或者Jekyll这种要求的固定格式文件头。使用psioniq File Header可以方便地满足这一需求，而且可以根据不同类型的文件设置生成不同的文件头内容和格式。

command + shift + P 调出命令面板找到Extensions：Install Extensions ，或者command + shift + X后在左侧切换到应用商店，搜索psioniq File Header，找到后安装即可

设置

command + shift + P 打开命令面板后输入settings，选择打开设置，打开settings.json文件

在settings.json中添加如下内容后保存：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
"psi-header.config": {
        "forceToTop": true
    },
    "psi-header.changes-tracking": {
        "isActive": true,
        "modAuthor": "Modified By  : ",
        "modDate"  : "Date Modified: ",
        "modDateFormat": "date",
        "include": [],
        "exclude": [
            "markdown",
            "json"
        ]
    },
    "psi-header.license-text": [
        "Just have a little faith!"
    ],
    "psi-header.variables": [
        ["company", "MoonWhite inc."],
        ["author", "mooonwhite"],
        ["authoremail", "moonwh173@gmail.com"]
    ],
    "psi-header.lang-config": [
        {
            "language": "python",
            "begin": "###",
            "prefix": "# ",
            "end" : "###",
            "blankLinesAfter": 0,
            "beforeHeader": [
                "#!/usr/bin/env python3",
                "# -*- coding:utf-8 -*-"
            ]
        },
        {
            "language": "markdown",
            "begin": "---",
            "prefix": "",
            "end": "---",
            "blankLinesAfter": 2,
            "forceToTop": true
        },
        {
            "language": "javascript",
            "begin": "/**",
            "prefix": " * ",
            "end": " */",
            "blankLinesAfter": 2,
            "forceToTop": false
        }
    ],
    "psi-header.templates": [
        {
            "language": "c",
            "template": [
                "File: <<filepath>>",
                "Created Date: <<filecreated('YYYY-MM-DD HH:mm:ss')>>",
                "Author: <<author>>",
                "-----",
                "Last Modified: <<dateformat('YYYY-MM-DD HH:mm:ss')>>",
                "Modified By: ",
                "-----",
                "Copyright (c) <<year>> <<company>>",
                "",
                "<<licensetext>>",
                "-----",
                "HISTORY:",
                "Date      \tBy\tComments",
                "----------\t---\t----------------------------------------------------------"
            ],
            "changeLogCaption": "HISTORY:",
            "changeLogHeaderLineCount": 2,
            "changeLogEntryTemplate": [
                "<<dateformat('YYYY-MM-DD')>>\t<<initials>>\t"
            ]
        },
        {
            "language": "markdown",
            "template": [
                "layout: post",
                "title:  \"title\"",
                "date:   <<filecreated('YYYY-MM-DD hh:mm:ss')>> +0800",
                "categories: web"
            ]
        },
        {
            "language": "javascript",
            "template": [
                "File: <<filepath>>",
                "Created Date: <<filecreated('dddd, MMMM Do YYYY, h:mm:ss a')>>",
                "Author: <<author>>",
                "-----",
                "Last Modified: ",
                "Modified By: ",
                "-----",
                "Copyright (c) <<year>> <<company>>",
                "------------------------------------",
                "Javascript will save your soul!"
            ]
        },
        {
            "language": "typescript",
            "mapTo": "javascript"
        }
    ]

效果：新建一个markdown文件，然后连按两次热键：option + contrl + H 来自动添加文件头。

Blog

Mac本地Apache开启VirtualHost

简介

Mac自带Apache服务，配置文件在/etc/apache2/httpd.conf

把默认的下面两行注释放开

1
2
LoadModule userdir_module libexec/apache2/mod_userdir.so
Include /private/etc/apache2/extra/httpd-userdir.conf

.
修改默认目录，默认目录在/Library/WebServer/Documents下：

1
2
#DocumentRoot "/Library/WebServer/Documents"
DocumentRoot "/Users/yiny/Sites"

添加如下内容：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<Directory "/Users/yiny/Sites">
    Options Indexes FollowSymLinks
    AllowOverride None
    Require all granted
</Directory>

<VirtualHost *:80>
ServerName sjdt.online.test
DocumentRoot "/Users/yiny/Sites/sjdt.online"
DirectoryIndex index.html index.php
 <Directory "/Users/yiny/Sites/sjdt.online">
  Options -Indexes +FollowSymlinks
  AllowOverride All
  Require all granted
 </Directory>
</VirtualHost>

启动停止命令：

1
2
3
4
5
6
7
8
# 启动
sudo systemctl start

# 停止
sudo systemctl stop

# 重启
sudo systemctl restart

Mac本地安装配置PHP

安装php

1
brew install php
1
brew services start php

php.ini 配置文件位置：

1
/usr/local/etc/php/7.4
Blog

使用python和matplotlib实现数据可视化

背景

最近有个项目需要对批处理任务进行优化，批处理使用120个进程执行任务，但是任务之间存在依赖关系，任务执行的日志中记载了每个任务开始和结束的时间，看起来不够直观，于是考虑使用python和matplotlib进行可视化加以分析。

工具

  • pycharm
  • matplotlib

实现

关于matplotlib

Matplotlib 是 Python 的绘图库。 它可与 NumPy 一起使用，提供了一种有效的 MatLab 开源替代方案。
这里仅仅用到了Matplotlib的极小部分功能，画线和加文字：

1
2
3
4
5
# 绘制line
plt.plot([start_x_position, end_x_position], [start_y_position, end_y_position])

# 添加文字说明
plt.text(x_position, y_position, text, size, color, alpha, ...)

代码

日志中的时间格式为数值型表示的时间，比如12345表示的是1:23:45，需要进行一下转换。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
def conv2NormalTime(digitalTime):
    seconds = 0
    minuts = 0
    hours = 0
    if digitalTime < 60:
        seconds = digitalTime
    elif digitalTime < 3600:
        seconds = digitalTime % 60
        minuts = digitalTime // 60
    else:
        seconds = digitalTime % 60
        minuts = (digitalTime // 60) % 60
        hours = digitalTime // 3600

    if seconds < 10:
        seconds = '0' + str(seconds)
    else:
        seconds = str(seconds)

    if minuts < 10:
        minuts = '0' + str(minuts)
    else:
        minuts = str(minuts)

    if hours < 10:
        hours = '0' + str(hours)
    else :
        hours = str(hours)
    return hours + ":" + minuts + ":" + seconds

由于需要使用秒单位作为参数调用matplotlib，因此需要将时间转换为秒单位，添加函数实现。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
def conv2Seconds(digitalTime):
    seconds=0
    minuts=0
    hours = 0
    totalSeconds = 0
    if digitalTime < 100:
        seconds = digitalTime
        totalSeconds = seconds
    elif digitalTime < 10000:
        seconds = digitalTime % 100
        minuts = digitalTime // 100
        totalSeconds = minuts * 60 + seconds
    else:
        seconds = digitalTime % 100
        minuts = (digitalTime // 100) % 100
        hours = digitalTime // 10000
        totalSeconds = hours* 3600 + minuts* 60 + seconds
    return int(totalSeconds)

绘图代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
import matplotlib.pyplot as plt

def draw():
    f = open('log_file.txt', encoding='GBK')
    i = 0
    machid = 0
    jiaoyms = []
    fig = plt.gcf()
    # 设置宽高比
    fig.set_size_inches(100, 15)
    # fig.savefig('test2png.png', dpi=100)
    # 设置x轴和y轴以及标题显示内容
    plt.xlabel('time')
    plt.ylabel('process')
    plt.title('batch stat - 20201118 - TimeLine')

    mintime=1000000
    maxtime=0
    for line in f:
        i += 1
        machid += 1
        if machid == 120:
            machid = 1
        # 截取开始时间
        starttime = int(line.split('|')[-6])
        # 截取终止时间
        endtime = int(line.split('|')[-5])
        if starttime > 220000:
            continue
        # 截取其他显示信息
        info1 = line.split('|')[5]
        info2 = line.split('|')[8]
        machine = line.split('|')[17][0:4]
        # 开始时间秒数及结束时间秒数
        startsecs = conv2Seconds(starttime)
        endsecs = conv2Seconds(endtime)
        if starttime < mintime:
            mintime = starttime
        if endtime > maxtime:
            maxtime = endtime

        # 绘制
        plt.plot([startsecs, endsecs], [machid, machid])

        # 这里根据不同的任务执行时间长度，显示为不同的风格
        if endsecs - startsecs < 10: # 10秒内结束的任务
            plt.text(endsecs, machid, info1+":"+info2, size=4, alpha=0.3)
        elif endsecs - startsecs <60 : # 1分钟以内结束的任务
            plt.text(endsecs, machid, info1 + ":" + info2, size=5, color='green', alpha=0.4)
        elif endsecs - startsecs < 600: # 耗时十分钟以内的任务
            plt.text(endsecs, machid, info1 + ":" + info2, size=5, color='blue', alpha=0.5)
        else: # 耗时十分钟以上的任务，重点关注
            plt.text(endsecs, machid, info1+":"+info2, size=8, color='red', alpha=1)

    # 取整体任务的开始和结束时间
    minsecs=conv2Seconds(mintime)
    maxsecs=conv2Seconds(maxtime)

    # 每隔10分钟绘制时间刻度
    for i in range(minsecs, maxsecs):
        if i % 600 == 0:
            curTime = conv2NormalTime(i)
            plt.text(i, -5, curTime, size=10, alpha=0.7)
    # 将绘制结果保存为png图片
    plt.savefig("batch_analyze_result.png")
    plt.show()

执行结果

Blog

搭建本地Web开发环境

1 MAMP 配置

首先配置MAMP的Hosts，在MAMP -> Main Window

这里保留默认配置

修改Apache默认的端口为80，Nginx为8000，MySQL为3316

这样基本的Apache+MySQL+PHP环境就配置好了。

2 PHPStorm 配置

phpstorm 中新建php project，项目文档位置选择刚刚MAMP配置的Document Root目录下:/Applications/MAMP/htdocs/sjdt.online

选择：phpstorm -> Preference -> Build,Execution,Deployment -> Deployment，单击右侧的 + 加号新建一个服务器，类型选择In place，名字随便起，这里使用mamp

在Connection Tab页中配置Web server URL为http://localhost

在Mappings Tab页配置本地路径和远程路径之间的映射，这里选择将本地工程目录映射为远程的sjdt.online目录

这样在phpstorm中就可以使用PHPStorm中的preview按钮快速在浏览器中预览页面效果了。

3 Apache 多域名配置

实际工作中经常会遇到需要同时开发多个项目或者在一个Host上配置多个域名的情况，使用VirtualHost配置可以很好的解决这个问题。

首先，修改本地/etc/hosts解析文件，添加如下内容：

1
2
127.0.0.1	localhost
127.0.0.1	sjdt.online.test

然后修改MAMP的Apache配置文件：/Applications/MAMP/conf/apache/httpd.conf ，找到Virtual hosts的配置的位置：

1
2
# Virtual hosts
#Include /Applications/MAMP/conf/apache/extra/httpd-vhosts.conf

去掉Include前面的注释，像这样，然后保存退出：

1
2
# Virtual hosts
Include /Applications/MAMP/conf/apache/extra/httpd-vhosts.conf

然后，编辑修改VirtualHosts配置文件：/Applications/MAMP/conf/apache/extra/httpd-vhosts.conf：

尽管显示virtual host已经生效了，但是实际上是不好用的，MAMP的Document Root一直指向了MAMP的htdoc根目录，不知道是MAMP的bug还是httpd配置有问题

于是换个思路，使用MAMP的添加Hosts来解决开发环境多个域名的问题，实际生产上线使用VirtualHost。
在MAMP的Hosts界面中使用左下角的”+”加号按钮新建一个Host，Hostname输入sjdt.online.test

修改DocumentRoot：/Users/yiny/Sites/sjdt.online

phpstorm中新建项目，项目目录选择刚刚Apache中Document Root的位置/Users/yiny/Sites/sjdt.online
选择：phpstorm -> Preference -> Build,Execution,Deployment -> Deployment，单击右侧的 + 加号新建一个服务器mbp，Web server URL填写本地测试域名：http://sjdt.online.test

效果：

Blog

VSCode 中 snippets 的使用

新建snippet

Code -> 首选项 -> 用户片段

之后Code为我们生成了一个filename.code-snippets的json文件，内容如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
{
	// Place your 全局 snippets here. Each snippet is defined under a snippet name and has a scope, prefix, body and
	// description. Add comma separated ids of the languages where the snippet is applicable in the scope field. If scope
	// is left empty or omitted, the snippet gets applied to all languages. The prefix is what is
	// used to trigger the snippet and the body will be expanded and inserted. Possible variables are:
	// $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders.
	// Placeholders with the same ids are connected.
	// Example:
	// "Print to console": {
	// 	"scope": "javascript,typescript",
	// 	"prefix": "log",
	// 	"body": [
	// 		"console.log('$1');",
	// 		"$2"
	// 	],
	// 	"description": "Log output to console"
	// }
}

snippets 语法：

1
2
3
4
5
6
prefix      :代码片段名字，即输入此名字就可以调用代码片段。
body        :这个是代码段的主体.需要编写的代码放在这里,　　　　　
$1          :生成代码后光标的初始位置.
$2          :生成代码后光标的第二个位置,按tab键可进行快速切换,还可以有$3,$4,$5.....
${1,字符}    :生成代码后光标的初始位置(其中1表示光标开始的序号，字符表示生成代码后光标会直接选中字符。)
description :代码段描述,输入名字后编辑器显示的提示信息。

注：

  • 如果没有description，默认提示信息是类似上图中Print to console一样的信息（即key值）
  • 代码多行语句的以 , 隔开
  • 每行代码需要用引号包裹住
  • 字符串间如果值里包含特殊字符需要 \ 进行转义.

下面这些变量可以在snipates中使用:

1
2
3
4
5
6
7
8
9
10
11
TM_SELECTED_TEXT The currently selected text or the emptstring
TM_CURRENT_LINE The contents of the current line
TM_CURRENT_WORD The contents of the word under cursor othe empty string
TM_LINE_INDEX The zero-index based line number
TM_LINE_NUMBER The one-index based line number
TM_FILENAME The filename of the current document
TM_FILENAME_BASE The filename of the current documenwithout its extensions
TM_DIRECTORY The directory of the current document
TM_FILEPATH The full file path of the current document
CLIPBOARD The contents of your clipboard
WORKSPACE_NAME The name of the opened workspace or folder

当前日期和时间:

1
2
3
4
5
6
7
8
9
10
11
CURRENT_YEAR The current year
CURRENT_YEAR_SHORT The current year’s last two digits
CURRENT_MONTH The month as two digits (example ‘02’)
CURRENT_MONTH_NAME The full name of the month (example ‘July’)
CURRENT_MONTH_NAME_SHORT The short name of the month (example ‘Jul’)
CURRENT_DATE The day of the month
CURRENT_DAY_NAME The name of day (example ‘Monday’)
CURRENT_DAY_NAME_SHORT The short name of the day (example ‘Mon’)
CURRENT_HOUR The current hour in 24-hour clock format
CURRENT_MINUTE The current minute
CURRENT_SECOND The current second

针对当前语言，插入单行或多行注释:

1
2
3
BLOCK_COMMENT_START Example output: in PHP /* or in HTML <!–
BLOCK_COMMENT_END Example output: in PHP */ or in HTML -->
LINE_COMMENT Example output: in PHP // or in HTML <!-- -->

栗子：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
"c_header": {
        "prefix": "c_header",
        "body": [
            "/**",
            " * Copyright © 2020 Moonwhite. All rights reserved.",
            " * ",
            " * @author: Moonwhite",
            " * @date: $CURRENT_YEAR-$CURRENT_MONTH-$CURRENT_DATE ",
            " */",
            "#include <stdio.h>",
            "#include <stdlib.h>",
            "#include <string.h>",
            "",
            "int main() {",
            "    /****** your code ******/",
            "    $0",
            "    return 0;",
            "}"
        ]
        // "description": "Log output to console"
    }

生成的效果：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
/**
 * Copyright © 2020 Moonwhite. All rights reserved.
 *
 * @author: Moonwhite
 * @date: 2020-11-12
 */
#include <stdio.h>
#include <stdlib.h>
#include <string.h>

int main() {
    /****** your code ******/

    return 0;
}
Blog

使用Gitpage和Jekyll搭建个人博客

简介

工作生活中经常会遇到一些需要记录下来的东西，设想是本地编写markdown文档，文档中的各种图片资源会随时使用截图工具或者图片文件，使用Alfred或者AutoHotKey自动将图片或者剪贴板中的截图内容上传至七牛云图床，并返回markdown格式的图片链接，本地编写好之后git push到GitHub上面，使用GitPages自动生成博客。
将搭建的过程记录下来以备和我有相同需求或者遇到相同问题的同学参考，本页会不断更新。
本人使用Mac，搭建过程也以Mac过程为主，主要使用到的工具如下：

  • Github账户 + GitPage配置
  • Jekyll / Hexo （生成静态HTML页面）
  • 七牛云账户 + qshell（用于存储Blog重的图片）
  • Alfred + Powerpack + qimage-mac（用于本地截图或文档自动上传七牛云对象存储，Windows可使用AutoHotKey）
  • vscode + Markdown All in One + Markdown Preview Github Styling (用于本地编辑markdown及实时预览)
  • Snipaste 或其他截图工具
  • 一个免费或收费的域名

1. GitHub及相关配置

1-1 创建repository

登陆Github，并新建一个repository，这里需要注意一下的是需要按照username.github.io格式来创建repository，这样后面才能够使用https://username.github.io这样的URL来访问GitPage。

img

1-2 修改repository的Setting

找到Repository的Setting tab页面，如下图：
img

向下一直拖动到GitHub Pages页面，启用GitPages，这里可以设置GitPages使用哪个分支，修改显示的主题风格，以及修改为自定义的域名。

img

至此，基于GitPages的一个免费个人博客就已经搭建成功了，我们在代码中可以直接编辑html，然后访问username.github.io即可看到个人博客网站的显示结果。
比如将以下代码保存成index.html放到repository的根目录：

1
2
3
4
5
6
7
8
9
<!DOCTYPE HTML>
<html>
	<head>
	<title>m00nwhite</title>
	</head>
	<body>
		welcome to m00nwhite.github.io!
	</body>
</html>

然后访问username.github.io 即可看到显示结果

img

2.Jekyll及相关配置

Jekyll是一个的免费Blog生成框架，可以运行在GitHub Pages上，详细的使用教程请参考 官方文档。 也可以使用Hexo，看个人喜好，Jekyll和GitPage的契合度更高一些，但是生成静态页面的速度方面不如Hexo迅速，使用方面较Hexo也略微复杂一些，这里使用Jekyll，单纯的是因为想学习一下。

官方网址：Jekyll

2-1 jekyll的安装

先来看一下官方安装教程，简单得只有一张图：

需要安装bundler，gem

1
2
3
4
5
6
7
8
9
# 安装bundler和gem
gem install bundler jekyll

# 使用jekyll新建一个博客项目，m00nwhite请替换成你喜欢的名字
jekyll new m00nwhite

# 进入到jekyll为你创建的文件夹，并启动jekyll的本地服务
cd m00nwhite
bundle exec jekyll serve

执行了上面的命令之后，jekyll就为你在本地4000端口创建了一个博客服务。
img

使用浏览器访问一下，可以看到Jekyll为我们生成的页面：
img

3 图片配置

其实上面两步完成之后，对于简单的博客来说应该就基本够用了，但是对于追求效率的重度使用者来说还需要优化一下，比如贴图的过程。一张一张手工编辑链接地址并且上传的话未免效率低下，体验不是很友好。于是考虑使用七牛云图床，一来可以提高效率，二来可以使用CDN加速提高访问速度。

3-1 七牛云配置

需要注册七牛云账户并登陆至管理控制台，添加对象存储。

img

3-2 安装及配置qshell

创建完存储空间之后，我们就可以使用七牛提供的管理控制台来上传和管理我们的图片了。也可以使用客户端，这里选择使用七牛提供的命令行工具（qshell）来方便地上传和使用图片。

官方安装链接在七牛的：开发者中心
下载对应平台的qshell并安装即可。

一些需要鉴权的qshell命令需要先设置好AK（AccessKey）和SK(SecretKey)，这两个Key在七牛管理控制台右侧的密钥管理中可以找到。

img

然后使用下面的命令设置好qshell的AK和SK，这样我们就可以使用Alfred创建Workflow来调用qshell自动上传图片了。

1
qshell account ak sk name

其他qshell的使用请参考官方文档，这里不再赘述。

3-3 配置Alfred的workflow

这里使用qimage-mac
详细的教程请参考使用 Alfred 在 markdown 中愉快的贴图

导入workflow之后需要修改一下热键

修改一下参数配置，设置七牛的AK，SK和bucket等参数。
img

这里在执行的时候报错了，调试发现设置qshell账户的shell命令行参数数量不对，因为之前已经设置过了，这里就直接注释掉了，速度还能快一些。

最后，将GitHub上的仓库克隆到本地，修改之后再push就可以直接更新博客内容了。

1
2
3
4
git clone git@github.com:username/username.github.io.git
# 修改markdown文档
git commit -m "your comment"
git push

本地修改可以使用vscode或者typora，vscode需要安装Markdown All in One 和 Markdown Preview Github Styling两个插件，可以在编辑markdown文件的时候实时生成预览效果。

4. 丰富你的站点

4.1 Jeykll主题

在GitHub的setting中可以更换选择主题

img

4.2 Jeykll插件

  • 使用kramdown自动生成目录树
    在_config.yml 配置文件中添加如下内容：
    1
    2
    # 启用kramdown自动生成目录树
    markdown: kramdown
    然后在markdown文章中需要插入目录树的地方添加：
    1
    2
    * 目录
    {:toc}
    预览效果：

5. 一些问题

搭建过程中并不是一帆风顺的，难免遇到一些问题

GitPage上面七牛的图片显示不出。

原因：GitPage不绑定域名时默认使用https方式提供服务，而七牛云提供的图片外链是http的。
解决方法：GitPage使用自定义域名，并将服务方式修改为http，GitPage和七牛云都修改为Https应该也可以，留待以后验证。
首先申请一个域名，这里选择腾讯云的域名。然后在腾讯云的管理控制台中将域名的CNAME指向修改为GitPage的username.github.io

CNAME修改后一般需要十分钟左右才能生效

在GitPages的setting中也将域名修改为自定义域名

另外，由于七牛的测试域名只能使用30天，所以这里把七牛云空间也一并修改为自定义域名，修改方式也是在腾讯云的管理控制台里面把域名的CNAME修改为七牛云提供的CNAME即可。

Blog

Bootstrap4 笔记

Bootstrap4 笔记

示例代码

1
2
3
4
5
<div class="d-flex p-3 bg-secondary text-dark container-fluid">
    <div class="item p-2 bg-info">Flex item 1</div>
    <div class="item p-2 bg-warning">Flex item 2</div>
    <div class="item p-2 bg-primary">Flex item 3</div>
</div>

  • bg-info、bg-warning、bg-primary：设置各种背景色

  • text-white：白色字体

  • text-black-50: 半黑字体

  • container/container-fluid：容器/全屏容器

  • d-flex：

  • flex-direction：可以取四个值：

    • row: 主轴水平方向，从左至右排列

    • row-reverse：主轴水平方向，从右至左排列

    • column：主轴竖直方向，从上至下排列

    • column-reverse：主轴竖直方向，从下至上排列

  • flex-wrap/flex-nowrap ： 当容器显示不下时换行/不换行

    • flex-wrap:

    • flex-nowrap:

  • flex-basis：定义了item元素的空间大小。

  • flex-grow：若被赋值为一个正整数， flex 元素会以 flex-basis 为基础，沿主轴方向增长尺寸，后面的数值为增长比例。

  • flex-shrink：flex-grow属性是处理flex元素在主轴上增加空间的问题，相反flex-shrink属性是处理flex元素收缩的问题。按照后面的数值比例进行收缩。

  • flex简写：你可能很少看到 flex-grow，flex-shrink，和 flex-basis 属性单独使用，而是混合着写在 flex 简写形式中。 Flex 简写形式允许你把三个数值按这个顺序书写 — flex-grow，flex-shrink，flex-basis。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
.box {
  display: flex;
}

.one {
  flex: 1 1 auto;
}

.two {
  flex: 1 1 auto;
}

.three {
  flex: 1 1 auto;
}

1
2
3
4
5
<div class="box">
  <div class="one">One</div>
  <div class="two">Two</div>
  <div class="three">Three</div>
</div>

  • align-items：属性可以使元素在交叉轴方向对齐，应用于父容器。

    • streth： 拉伸到最大容器对齐

    • flex-start：

    • flex-end

    • center

  • Justify-content：使元素在主轴方向对齐，主轴方向是通过 flex-direction 设置的方向，初始值为flex-start，

    你也可以把值设置为space-between，把元素排列好之后的剩余空间拿出来，平均分配到元素之间，所以元素之间间隔相等。或者使用space-around，使每个元素的左右空间相等。

    • stretch ：

    • flex-start：

    • flex-end：

    • center：

    • space-evenly:

    • space-around：

    • space-between：