网站建设基础知识：CSS3学习笔记

学习网站建设基础知识之CSS3，以下是本作的学习笔记，有需要的同学请参考。

CSS3学习笔记

CSS3作为css的升级版，简化并新增了很多实用的功能，发展到现在也对各主流的浏览器有很好的兼容性。这是本作以自己的理解与语言进行记录的学习笔记。

一、结构伪类选择器：

1.element1>element2

选择父元素为element1的所有儿子辈element2元素

2.element1~element2

选择element1元素的后面所有同级的element2元素（即选择element1后面的兄弟标签，不计前面的）（如果element1与element2一样，则除了element1外的前后所有同级element2即element1元素）

3.element1+element2

选择前面有element1元素的后面第一个element2元素（后面第一个必须为element2元素才行）

4.p:first-child或p:last-child

相对于任意父元素而言，选择其第一个或最后一个必须是p元素的子元素（作用于多级嵌套）。

5.p:first-of-type或p:last-of-type

相对于任意父元素而言，选择其指定类型元素（此处指定类型为p元素，其它类型元素忽略）的第一个或最后一个是p元素的子元素（作用于多级嵌套）。

6.p:nth-child(n)

其中n为从1开始的序号，也可以是even（偶数）、odd（奇数）等关键词（与jquery不同，jquery的偶数是从0开始的下标号）；相对于任意父元素，选择第n个p元素（如果同一父元素内还有其它类型的元素，则其它类型的元素会占用序号）（作用于多级嵌套）。如果n不取值，如p:nth-child(n){}则表示对于任意父元素而言，选取所有为p元素的子元素。若n为(n+2)则从第2个开始选择。

7.p:nth-of-type(n)

与上类似，不同的是选择其指定类型元素（此指定类型为p元素，其它类型元素忽略）（作用于多级嵌套）。此处如果n为“-n+个数”（个数 为1至无限的正整数）则表示相对于任意父元素，选择前多少个数为p元素的子元素，如.div1 p:nth-of-type(-n+5){}表示相对父元素.div1，选择里面的前5个为p元素的子元素（若.div1 p:nth-last-of-type(-n+5){}则表示选择后5个为p元素的子元素）。

8.html:root

选择文档的根元素（即html标签）

9.:empty

选择空元素（连空格换行都没有的）

10.:target

选择当前活动的元素（可选择a标签锚链接对应的那个元素）

11.:not(p)

选择除了p元素外的所有元素

二、属性选择器：

（注：以下a为标签的属性名，v为标签的属性值）

1.[a]

选择带有a属性的所有元素

2.[a=v]

选择带有a属性且属性值为v的所有元素（选择器内不需双引号）

3.[a^=v]

选择带有a属性且属性值以v开头（v不能只有数字）的所有元素（选择器内不需双引号）

4.[a$=v]

选择带有a属性且属性值以v结尾（v不能只有数字）的所有元素（选择器内不需双引号）

5.[a*=v]

选择带有a属性且属性值包含v（v不能只有数字）字符串的所有元素（选择器内不需双引号）

三、伪对象(伪元素)选择器：

必须要有content属性，属性值可为空，其属于行内元素，要设置宽高必须变为块级元素（position定位也可将行内元素变为块级元素。用content插入图片后，要使文字上下居中，要给content插入的图片后加入float属性）（在低版本ie浏览器中只支持单冒号，新版浏览器它会自动解析为双冒号）。参考例子（CSS中使用unicode符号写法）

::selection

选择被用户选取的部份来设置样式（比如用户要复制文章，所选的文字显示的样式，一般只更改背景与文字的颜色）

::first-letter

选择文本的第一个字符

::first-line

选择文本的第一行

::before

指在选择元素的前面插入内容

::after

指在选择元素的后面插入内容

四、状态伪类选择器：

:focus

选择获得焦点的表单项目

:enabled

选择启用或可用的元素

:disabled

选择禁用的元素

:checked

选择被选中的单选或多选按钮（似乎目前所有浏览器都不支持？？）

颜色与不透明度：

rgba(r,g,b,a);其中rbg的范围是0-255或0%-100%，a的范围0-1；

新增颜色模式：色轮模式，与HSB不同

hsl(H,S,L);或hsla(H,S,L,A)其中

H：hue（色调或色相），范围0-360（0或360为红色，120为绿色，240为蓝色）

S：saturation（饱和度），范围0.0%-100.0%

L：lightness（亮度，或者是brightness明度，范围0.0%-100.0%），在html中与ps不同，此值范围比较特殊，默认为50%，增加变亮，减少变暗

A：alpha不透明度，0-1(可选)

标签的不透明度

1.（不支持低版本IE浏览器）opacity：范围0-1；

2.（专门用于IE浏览器）filter:alpha(opacity=x);x的范围0-100；

字体单位：

1. px 像素单位，比较稳定与精确，但不能自适应屏幕大小。
2. em 以父级大小为参考的单位，可以自适应，只是父级元素标签变化时字体大小将不确定。例子：父元素{font-size:14px;} 子元素{width:20em;}
3. rem 相对于根元素html为参考的单位，事先html中设定字体大小,要适应手机的小屏幕只改变html中的字体大小就可以了，很方便。例子：html{font-size:16px;} 其他元素{height:10rem;}
4. vw 以屏幕大小为参考的单位（百分比），自适应好但对旧浏览器不兼容。

以下当宽与高设为百分比时，宽与高只能设其中一个为百分比。为使内容不被浏览器或可视区域缩放而变形进行合适的限制：

min-width 设置元素的最小宽度; max-width 设置元素的最大宽度;

min-height 设置元素的最小高度; max-height 设置元素的最大高度;

box-sizing:

设置盒子尺寸。属性值如下：

• 1.content-box  border与padding不计算入宽高之内；
• 2.border-box 把border与padding计算入宽高之内；(适合设置hover效果，这样就不会挤压其它元素搞乱页面结构了，图片还要配合width或height设置为100%)

设置背景图片（background-image:url();）

1.设置背景图是否重复平铺的css3新增属性值：

background-repeat:round; 缩放背景图大小向水平与垂直方向重复平铺，以适合元素大小（每个小背景图都会完整显示）

background-repeat:space; 保证每个小背景图完整显示的情况下，缩放背景图之间的间距来重复平铺，以适合元素大小。

2.设置背景滚动方式或固定：

background-attachment:local; 对于当前容器元素，背景图跟随内容一起滚动

background-attachment:scroll; 对于当前容器元素，背景图不跟随内容一起滚动

background-attachment:fixed; 固定背景

3.设置背景图片的大小：

background-size:x y; x为宽度，y为高度（可只设置一个值，另一个为auto）；

background-size:cover; 等比例缩放，使背景图填满元素，如果背景图与元素宽高比例不同，背景图会有溢出；

background-size:contain; 等比例缩放；使背景图包含在元素内，如果背景图与元素宽高比例不同，元素会有留白。

4.设置背景坐标原点：

background-origin:border-box; 从元素border开始填充背景，会与border重叠。

background-origin:padding-box; 从元素padding开始填充背景，会与padding重叠。

background-origin:content-box; 从元素content（内容）开始填充背景，会与content重叠。

5.设置背景偏移：

background-position:x y; x为水平偏移量(也可以为left/center/right)，y为垂直偏移量(也可以为top/middle/bottom)

6.设置背景裁切：

background-clip:border-box; 裁切掉border外面的背景，只显示border区域及以内的背景。

background-clip:padding-box; 裁切掉padding外面的背景，只显示padding区域及以内的背景。

background-clip:content-box; 裁切掉content外面的背景，只显示content区域的背景。

outline(轮廓)：绘制于元素周围的一条线，可起到突出元素的作用(若与边框同时存在，则轮廓包含着边框)。

注：其设置与border的设置一样有同样三个参数，但是border占空间，outline不占空间更适合事件设置。

outline-width 设置边框的宽度

outline-style 设置边框的样式

outline-color 设置边框的颜色

transition（过渡效果）

指在指定时间内变化为指定属性，非瞬间变化。

动画与过渡的区别：动画可以有无数个状态变化，而过渡只能有两个状态变化。

transition-property:x; x为设置监控的某个属性（把x改为all可以监控所有属性，比较消耗性能）

transition-duration:多少秒（如2秒为：2s）; 设置过渡所花费的时间

transition-delay:多少秒（如2秒为：2s）; 设置延迟的时间

transition-timing-function: x; 设置过渡的运动方式（曲线），其中ease（默认值，逐渐变慢），linear(匀速)，ease-in(加速)，ease-out(减速)，ease-in-out(先加速再减速)

或者合起来设置：

transition:all 2s 3s ease-in;(后面两参数可选，多组值时用逗号隔开)

transition的step(数值)属性：定义分多少步完成过渡。如：transition:left 2s step(3);

多个过渡效果的使用(每组参数以逗号分隔)：transition:color 2s,font-size 3s;

transform（变形效果）

应用于元素的2D或3D转换。这个属性允许你将元素旋转，缩放，移动，倾斜等。

2D变形：

transform:rotate(多少deg); 旋转多少度，deg是单位：角度

transform:translate(x,y); （如果只有一个值则表示x水平移动距离）x为水平移动距离，y为垂直移动距离(重要：如果x或y的值为百分值，则是参照元素自身的宽高百分值，此特性可用于定位任意元素剧中显示)

也单独设置x或y的移动距离：

transform:translateX(x);

transform:translateY(y);

transform:scale(x,y);（如果只有一个值则表示x与y的缩放位数一样） 缩放效果，x为宽度缩放，y为高度缩放(如果x或y设置为1则不缩放)

也可以单独设置x或y的缩放位数：

transform:scaleX(x);

transform:scaleY(y);

transform:skew(x deg,y deg);（如果只有一个值则表示x水平扭曲） 扭曲(斜切)效果，x为水平扭曲角度（相对y轴的角度），y为垂直扭曲的角度（相对x轴的角度）

也可以单独设置x或y的扭曲方向：

transform:skewX(x);

transform:skewY(y);

transform-origin：x  y; 设置变形效果的基点位置（默认是中点），像素、百分比，左中右，上中下。

多种变形效果组合使用(之间用空格分开)。如：transform:rotate(30deg) translateX(100px);(注意：组合顺序不同，效果不同。因为有些效果会改变平面坐标每系的x或y轴的方向，比如rotate旋转就是)

注：上面的 过渡效果 与 变形效果 要避免返回效果，要把其写在事件内。

3D变形：

transform:rotate3d(x,y,z,多少deg); 分别沿x、y、z轴（三个轴的值都是向量值，三个向量值组合起来的方向为元素依据旋转轴）旋转多少度，deg是单位：角度。

可单独设置x、y或z轴旋转：

transform:rotateX(多少deg); 使元素沿x轴旋转多少度。

transform:rotateY(多少deg); 使元素沿y轴旋转多少度。

transform:rotateZ(多少deg); 使元素沿z轴旋转多少度。

transform:translate3d(x,y,z); 使元素沿x、y或z轴移动，与2D类似也可以分开逐个设置。（因为z轴是与屏幕垂直的，所以在z轴上的移动看不出来）

transform:scale3d(x,y,z); 使元素沿x、y或z轴缩放多少倍，与2D类似也可以分开逐个设置。（因为z轴是与屏幕垂直的，所以在z轴上的缩放看不出来）

animation（动画效果）

动画与过渡的区别：动画可以有无数个状态变化，而过渡只能有两个状态变化。

animation-name:name; 定义动画的名称

animation-duration:多少秒; 指定动画播放时长

animation-delay:多少秒; 指定延迟时间

animation-timing-function:x; 设置动画的运动方式，ease、ease-in、ease-in-out、linear、cubic-bezier，或者设置指定次数完成动画：steps(n),n为正整数（比如用于一分钟60秒）。

animation-iteration-count:数值; 指定动画循环次数（无单位默认1次，无限循环为“infinite”）

animation-direction:alternate; 设置是否正反交替播放动画，若属性值为“alternate”配合上面的循环属性可使动画无限交替往复运行。

或者合起来设置

animation:name 3s 2s linear infinite alternate; 后面4个参数可不设

必需配合以下监控规则使用

@keyframes name
{
from{属性:属性值;}
to{属性:属性值;}
}

或者

@keyframes name
{
0%{属性:属性值;}
20%{属性:属性值;}
……
100%{属性:属性值;}
}

还有：

animation-fill-mode:x; x为

forwards; 动画结束后，使元素保留在结束位置。

backwards; 动画有延迟属性时，使元素在动画还没开始时（在延迟时间内）就立即切换到初始设置的状态（即from或0%设置的状态）

both; 集合forwards与backwards两个属性的特点。

animation-play-state: running;或paused; 控制动画的运行与暂停（用于js控制动画的运行与暂停，如设置点击两个按钮，一个点击播放动画，一个点击停止动画。）

border-radius（圆角效果）

可以设置1至4个参数,每个参数可用1或2个值之间用”/”分隔(2个值时,左边的值为设置水平线的圆角,右边的值为设置垂直线的圆角,如:10px/30px,10px 20px/30px 40px。

一个参数时：四个角一样。如：10px。

两个参数时：第一个参数控制左上与右下角，第二参数控制右上与左下角。如：10px 20px。

三个参数时：一控制左上角，二控制右上与左下角，三控制右下角。如：1px 2px 3px。

四个参数时：控制顺序为左上、右上、右下、左下角。如：1px 2px 3px 4px。

以下的派生属性，若分开设置水平线与垂直线的值时因为下面方法只有一个角所以不能用“/”分隔，只需用空格隔开。

border-top-left-radius:设置左上角圆角边框（10px 30px）

border-top-right-radius:设置右上角圆角边框

border-bottom-left-radius:设置左下角圆角边框

border-bottom-right-radius:设置右下角圆角边框

向文本添加阴影：

text-shadow:x y a b;其中x为水平偏移位置（单位可以是像素），y为垂直偏移的位置（单位可以是像素），a为阴影大小或模糊程度（可选，单位可以是像素），b为阴影的颜色（可选，可用rgba模式）。

可重复设置添加多个阴影：text-shadow:x y a b，x y a b，x y a b……;

文字填充颜色：

text-fill-color:颜色;若是rgba（）模式，把不透明度设为0或属性值为transparent;则使文字透明

color:transparent;也能使文字透明。

文字描边颜色：

text-stroke:a b;a为文字描边厚度，b为颜色

可分拆为：

text-stroke-width:设置文字描边厚度

text-stroke-color:设置文字描边颜色

向元素添加盒子阴影：

box-shadow:x y a b c inset;其中x为水平阴影的位置，y为垂直阴影的位置，a为阴影模糊的大小，b为阴影向外延伸的距离，c为阴影颜色，inset使变为内阴影。(后4个参数为可选)

彩虹边框例子

对象的倒影:

box-reflect:位置 偏移 倒影使用的渐变或图片；可设置“none”表示没倒影

位置：above(上倒影),below(下倒影),left(左倒影)，right(右倒影)

偏移：单位像素

倒影使用的渐变或图片：渐变（linear-gradient(top,transparent,#fff)）

背景渐变(兼容性不好)

线性渐变：linear-gradient(a,c1,c2,c3,……);

1.a(或者to a)为向某方向的渐变方向或角度（如果为a，则为从某方向开始，如下面例子），其取值为

bottom(to top)：从下到上渐变。相当于0度：0deg

left(to right)：从左到右渐变。相当于90度：90deg

top(to bottom)：（这是默认值）从上到下渐变。相当于180度：180deg

right(to left)：从右到左渐变。相当于270度：270deg

也可以这样设置：to right bottom

2.c1,c2,c3及后面的参数都是按顺序渐变的颜色或者颜色+位置（位置以百分数表示）。

background:repeating-linear-gradient()用于重复线性渐变：

例子background:repeating-linear-gradient(red, yellow 10%, green 20%);

例子：背景渐变 background:linear-gradient(top left,red,green);表示从上左角开始渐变

径向渐变：radial-gradient(shape size at x y,c1,c2,c3,……);

1.shape 是可选的，参数定义了形状。它可以是值 circle 或 ellipse。其中，circle 表示圆形渐变，ellipse 表示以椭圆形适应形状渐变。默认值是 ellipse。

2.size 是可选的，参数定义了渐变的大小。它可以是以下四个值：

closest-side：最近边。径向渐变大小设置为由原点到距离最近的边，下面以此类推。

farthest-side：最远边

closest-corner：最近角

farthest-corner：最远角（默认值）

3.at x y是可选的，设置渐变原点。为空时默认是从中心（center center）开始也可以用具体像素值或两个百分数定义开始偏移位置如50% 60%；（如果只设置x值，则y值默认为y轴中心），也可以这样设置：at 0px 0px或者at left top:表示从左上角开始径向渐变。

4.而c1,c2,c3及后面的参数都是按顺序渐变的颜色或者颜色+位置（位置以百分数表示）。

background:repeating-radial-gradient() 用于重复径向渐变：

例子background:repeating-radial-gradient(red, yellow 10%, green 15%);

“transparent”是透明色

自适应（响应）屏幕大小

@media [not|only] mediatype [and|not|only] (media feature) {
    CSS-Code;
}

(中括号里的内容可省略)

媒体类型(mediatype)

all：表示所有媒体

screen：表示彩屏设备

print：表示打印机或打印预览

speech：表示屏幕阅读器等发声设备

其中：

only:表示限定某种设备,可省略.

and:逻辑与.

not:逻辑非，排除某种设备。

min-width和max-width：表示手机浏览器的最小宽度和最大宽度

min-device-width和max-device-width：表示手机屏幕显示的最小宽度和最大宽度

orientation:landscape：表示横屏

orientation:portrait：表示竖屏

-webkit-min-device-pixel-ratio: 2：表示像素比

你也可以针对不同的媒体使用不同 stylesheets :

<link rel=”stylesheet” media=”mediatype and|not|only (media feature)” href=”mystylesheet.css”>

例子：<link rel=”stylesheet” media=”screen and (max-width:720px)” href=”mystylesheet.css”>

orientation：portrait或landscape;定义输出设备中的页面可见区域高度是否大于或等于宽度。

portrait：指定输出设备中的页面可见区域高度大于或等于宽度

landscape：除portrait值情况外，都是landscape

例子：@media screen and (orientation:portrait){ … }

@media only screen and  (min-width:多少px ; 或者max-width:多少px ;){样式}

其中“@media only screen ”后面可以设置多个“and(……)”条件；

例子：@media only screen and  (min-width:500px){color:red;} 表示当前窗口的屏幕宽度达到并超过500px时文字颜色变为红色。

@media screen and(min-device-width:640px)and (max-device-width:960px){}

@media screen and(min-device-width:640px),screen and (max-width:720px){}

（注意：在桌面电脑端，浏览器的分辨率与电脑屏幕的分辨率是一致的。而智能手机的屏幕分辨率往往和手机浏览器分辨率不同。比如说，苹果iPhone4手机的屏幕分辨率是640*960，而其自带的Safari浏览器的分辨率却只有320*480。所以，我们在用HTML5+CSS3开发移动网站和移动应用时，就要注意了。）

如何根据屏幕引入相应的CSS外部文件：

<link  rel=”stylesheet”  type=”text/css”  media=”screen and  (min-width:多少px  或者max-width:多少px )”  href=”css.css” />

<link rel=”stylesheet” media=”screen and(max-width:480px),screen and(max-device-width:480px)” href=”css.css” />

tab缩进长度设置：

tab-size:8(默认值，倍数不带单位，可设置成其它倍数);也可以指定几像素。此样式要在<pre>标签之内才有效。

边框图片样式：

border-image:source slice/width/outset repeat;

设置用图像来填充边框(设置边框背景图)

其派生样式

border-image-source:none或url(路径); 图像或背景图路径

border-image-slice:浮点数值(不带单位)或百分比 fill; （fill为可选，用于填充内容）边框背景图的分割方式，分成9份(若要对称显示就按图片除以3或3的倍数，即图片最好是正方形且宽高是3的倍数里面的图形最好3或3的倍数等分，若有分割数值+填充fill则会显示中间的部分，如：27 fill；)

border-image-width:可选，边框厚度(最好是9分法的，1/3)

border-image-outset:可选，边框背景图的扩展（一般设为0，正数则边框向外扩大）

border-image-repeat:可选，stretch(拉伸，默认值);repeat(水平垂直重复平铺);round(根据边框大小动态调整背景图大小来匹配);space(go);边框背景图的平铺方式

用户界面属性：

设置是否允许用户缩放元素（比如用于textarea标签）：resize:

none 不允许缩放

both 可调节元素的宽与高

horizontal 可调节宽度

vertical 可调节高度

a标签中添加rel=”external nofollow”的意思:

external ：告诉搜素引擎，这是非本站的链接，这个作用相当于target=“_blank”,

external 和nofollow 这两个属性的大致可以解释为 “这个链接非本站链接，不要爬取也不要传递权重”

超链接 target=”_blank” 要增加 rel=”nofollow noopener noreferrer” 来堵住钓鱼安全漏洞。

web字体与字体图标：

一、web字体

开发人员通过某些在线生成字体的网站（如：https://www.iconfont.cn/webfont?spm=a313x.7781069.1998910419.d81ec59f2#!/webfont/index）为自己的网页中的部分文字生成web字体（网络字体），作为特殊的显示应用。（没生成的字没作用）

web字体格式介绍：（不同的浏览器支持度不同）

TureTpe(.ttf)格式：.ttf字体是win与mac的最常见字体，是一种RAW格式。

OpenType(.otf)格式：.otf字体被认为是原始的字体格式，其内置在TureType的基础上。

Web Open Font Format(.woff)格式：这是web字体中的最佳格式，它是一个开放的TrueType/OpenType的压缩版本，也支持元数据包的分离。

Embedded Open Type(.eot)格式：是IE专用字体，可从TrueType创建此格式字体，只支持IE4+浏览器。

AVG(.svg)格式：是基于SVG字体渲染的一种格式。

二、字体图标

web字体与字体图标的使用方法类似：

第一步：使用font-face声明字体

@font-face {
    font-family: '自定义web字体或字体图标的名称';
/* 正面url右边第一个括号为路径，要根据情况改变*/
    src: url('iconfont.eot'); /* IE9*/
    src: url('iconfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('iconfont.woff') format('woff'), /* chrome、firefox */
    url('iconfont.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
    url('iconfont.svg#iconfont') format('svg'); /* iOS 4.1- */
}

第二步：自定义web字体或字体图标的样式

.自定义样式名{
    font-family:"第一步自定义web字体或字体图标的名称" !important;/*后面的!important可不用*/
}

第三步：挑选本地页面文件里面存在的相应web字体或字体编码，应用于页面（字体图标还可利用伪元素更人性化应用，参考教程）

<i class=”自定义样式名”>生成过的web字体或者本地存在的字体图标编码</i>

分栏(多列)

(目前兼容性不好，column-span属性火狐不兼容)

columns:列宽 列数; 比较少用

column-width 列宽

column-count 列数

column-gap 列间距

column-rule 分隔线（与border设置同样的三个参数）

column-span 规定元素横跨多少列显示，参数为1（默认，占一列）或all（占所有列，即整个屏幕宽度），多用于标题样式。

伸缩布局

（在父容器内应用的属性）

用flex后其子元素的float、clear、vertical-align属性将失效。

能使块级元素的布局排列变得十分灵活，非常适合响应式布局。

1、display:flex; 使元素容器内部的所有子元素能够自动伸缩(自带float属性)。

2、justify-content：x; 设置元素容器内部的所有子元素的对方方式（默认是主轴即x轴方向）。

其中属性值x为：

flex-start; 让子元素从父容器的起始位置的最左边开始紧密排列

flex-end; 让子元素从父容器的结束位置的最右边开始紧密排列

center; 让子元素对齐父容器的水平中心居中紧密排列

space-between; 最左与最右边的子元素紧贴父容器，中间的子元素再平均间距分布。

space-around; 使父容器的水平多余宽度平均分给所有子元素的左右两边外边距来平均分布各子元素。

（display:flex属性特点：若各子元素的总宽度大于你容器的宽度，默认会使各子元素缩小，以适合父容器的宽度，当然可通过设置flex-flow或flex-wrap属性改变）

3、flex-flow属性是flex-wrap与flex-direction的组合属性。有两个属性值：

flex-flow:flex-wrap属性值 flex-direction属性值; (同时设置子元素是否换行与以水平还是垂直排列)。如：flex-flow:center row;

4、flex-wrap:x; 当所有子元素的总宽度大于父容器的宽度时，设置子元素是否换行。

其中属性值x为：

nowrap; 默认值，不换行（子元素会缩小适应父元素的宽度）

wrap; 换行，溢出的子元素会换行显示。

wrap-reverse; 换行并反向排列显示（溢出的子元素会排上面首行，没溢出的反而被挤下换行）

5、flex-direction:x; 设置子元素水平或垂直排列（即设置主轴为x轴还是y轴）。

其中属性值x为：

row; 默认值，水平排列，从左到右

row-reverse; 反向水平排列，从右到左

column; 垂直排列，从上到下

column-reverse; 反向垂直排列，从下到上

6、align-items:x; 设置父元素内的所有子元素在垂直方向侧轴（x轴为主轴，y轴为侧轴）的对齐方式。（单行）

其中x为：

stretch; 默认值，设置为拉伸填充，相当于height:auto;

flex-start; 设置在侧轴方向上顶部对齐

flex-end; 设置在侧轴方向上底部对齐

center; 设置在侧轴方向上居中对齐

baseline; 设置在侧轴方向上文本基线对齐

7、align-content:;设置侧轴上的子元素的排列方式（多行）

在子元素内使用的属性

flex-grow:数值; 当父容器宽度大于所有子元素的总宽度时，设置当前（子）元素水平放大（扩展）后所占据父容器空位的比例值（总比例值是所有子元素所设数值的总和），默认数值为0（即默认都不放大）。

flew-shrink:数值; 当父容器宽度小于所有子元素的部宽度时，设置当前（子）元素水平缩小后所占据溢出父容器宽度的比例值（总比例值是所有子元素所设数值的总和），默认值为1（即默认平均缩小）。

flex:a b c; flex属性是flex-grow、flex-shrink、flex-basis三个属性的集合简写。b与c参数可选。

默认值为：0 1 auto;（flex:1; 表示所有子元素平均分配父元素剩余空位）

其中flex-basis是设置元素的初始值的，用得少，具体可百度。

align-self:x;设置元素自身在侧轴的对齐方式。其中x的值与上面align-items属性的值是一样的。