Flex弹性盒布局
1、做html的时候 如果img和html不在同级路径可以用（../）表示在上一级目录下 （./）表示同级当前目录下 （/）表示根目录 服务器目录下
2、例如使用字体文件的时候 路径//用本地打开的时候 会默认在本地的根目录（会在本地根服务器寻找） 可以把//去掉换成 https:// 表示在网络服务器中寻找
3、删除当前行快捷键：shift+ctrl+k
称为Flex：容器
它的所有子元素称为：项目
主轴是X轴 交叉轴是Y轴
布局方式分类： ①、行内级（单、双行文本垂直居中） ②、块级布局 ③、浮动、定位布局 ④ Flex布局
块级元素 display : flex;
行内元素 display : inline-flex;
浏览器兼容问题：可以加上内核前缀（display : -webkit-flex;）
注意：设为 Flex 布局以后，flex item的float、clear（浮动、浮动清除）和vertical-align属性将失效
例：给父盒子加上 display : flex; 如果用其他的浏览器可以加上内核
主轴是x轴水平方向排列：
①、row ：水平靠左边开始排序
②、row-reverse ：水平靠右边开始排序
主轴是y轴垂直方向排列：
①、column ：垂直从上到下开始排序
②、column-reverse ：垂直从下往上开始排序
flex布局默认会在一行 导致元素挤压变形
①、wrap：换行，第一行在上方
②、wrap-reverse：换行，第一行在下方
③、nowrap（默认）：不换行
是flex-direction和flex-wrap的简写形式
格式：flex-flow:值；值（顺序可以颠倒）
①、flex-start（默认值）：左对齐（ 不改变项目顺序 ）
②、flex-end：右对齐 （ 不改变项目顺序 ）
③、center： 居中
④、space-between：两端对齐，项目之间的间隔都相等，两端紧贴
⑤、space-around：中间项目是两侧项目间隔的2倍
⑥、space-evenly ： 项目之间间隔完全相等 包括两侧
stretch（默认值）： 如果项目未设置高度或设为auto，将占满整个容器的高度
flex-start （默认值）：交叉轴起点对齐（贴上方）
flex-end：交叉轴终点对齐（贴下方）
center：交叉轴的中点对齐（垂直居中）
baseline（都有文字的情况可以使用）: 项目的 第一行 文字的基线对齐（项目内文字水平对齐第一行文字）
①、flex-start：交叉轴起点对齐（贴上方）
②、flex-end：交叉轴终点对齐（贴下方）
③、center：与交叉轴的中点对齐（居中）
④、space-between：多行上下分开间隔均匀
⑤、space-around：中间项目是上下项目间隔的2倍
⑥、stretch（默认值）：项目的高度是auto或者不设置 会默认占满交叉轴
⑦、space-evenly：项目之间间隔完全相等 包括上下
css基础之flex布局
很多时候跟着书和不系统的视频学习，会发现没有方向，学了很多却不知道自己能够做出什么成绩。
学习要有一个清晰的职业学习规划，学习过程中会遇到很多问题，你可以到我们的web学习交流君羊- 点击此处 ，
同时准备了基础，进阶学习资料。学友都会在里面交流，分享一些学习的方法和需要注意的小细节，每天也会准时讲一些项目实战案例。
————————————————
1.什么是flex
flex 是 Flexible Box 的缩写,意为 弹性布局
flex布局中把一个元素作为容器，容器中的子元素称为项目
可以通过容器的flex属性，设置所有项目的排列样式。也可以通过项目的flex属性，设置指定项目的排列样式。
2.flex布局的方向
flex布局项目的排列方向可以有两个维度，一水平，二垂直
项目排列方向称为主轴，与主轴垂直的方向叫交叉轴
在每个轴上有两个方向，从左至右，从右到左；从上到下，从下到上。
2.1 flex水平布局
在水平维度，默认方向是从左至右
可以通过 flex-direction：row-reverse设置为从右到左排列
效果图：
1).默认方向,从左至右
2).反方向
2.2 垂直布局
效果图：
1).默认方向，从上到下
2).反方向
3. 容器内项目换行
通过flex-wrap属性，设置项目在容器内是否可以换行，默认不允许换行。
不换行的称为单行容器，换行的称为多行容器
也可以通过flex-flow属性同时设置容器主轴方向和是否换行（推荐使用）
效果图：
1).默认不允许换行，项目被压缩
2).允许换行，当剩余宽度不足容纳一个项目块时，就换行
相关知识：
css如何实现边框长度控制功能
详细介绍css中的数学表达式calc()
关于书籍：需要学习资料的小伙伴们可以加群， 点击此处
微信小程序flex布局
Flex布局：意为“弹性布局”，为盒模型提供巨大的灵活性
使用说明：
1. 任何容器都可以使用flex布局
display: flex;
2.行内元素可以使用flex布局
display: inline-flex;
外层flex容器的属性：
1.flex-direction属性
flex-direction: row | row-reverse | column | column-reverse;
row（默认值）：主轴为水平方向，起点在左端。
row-reverse：主轴为水平方向，起点在右端。
column：主轴为垂直方向，起点在上沿。
column-reverse：主轴为垂直方向，起点在下沿。
2.flex-wrap属性
flex-wrap: nowrap | wrap | wrap-reverse;
nowrap (默认值) ：不换行。
wrap：换行，第一行在上方。
wrap-reverse：换行，第一行在下方。
3. flex-flow属性：是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap
flex-flow: 《flex-direction》 || 《flex-wrap》;
4. justify-content属性：定义item在主轴上的对齐方式
justify-content: flex-start | flex-end | center | space-between | space-around;
flex-start（默认值）：左对齐
flex-end：右对齐
center： 居中
space-between：两端对齐，项目之间的间隔都相等。
space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。
5. align-items属性：定义项目在交叉轴上如何对齐
align-items: flex-start | flex-end | center | baseline | stretch;
flex-start：交叉轴的起点对齐。
flex-end：交叉轴的终点对齐。
center：交叉轴的中点对齐。
baseline: 项目的第一行文字的基线对齐。
stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。
6. align-content属性：定义多跟轴线的对齐方式，如果只有一根轴线则不起作用
align-content: flex-start | flex-end | center | space-between | space-around | stretch;
flex-start：与交叉轴的起点对齐。
flex-end：与交叉轴的终点对齐。
center：与交叉轴的中点对齐。
space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。
space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。
stretch（默认值）：轴线占满整个交叉轴。
项目item的属性
1. order属性：定义项目的排列顺序，数值越小越靠前，默认值为0，负数在0前面
order: 《integer》;
2. flex-grow属性：定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大
flex-grow: 《number》; /* default 0 */
3. flex-shrink属性：定义项目缩小比例，默认是1，即如果空间不足，该item将缩小
flex-shrink: 《number》; /* default 1 */
4. flex-basis属性：在分配多余空间之前，item占据的主轴空间（main size），默认值auto，即item本身大小
flex-basis: 《length》 | auto; /* default auto */
5. flex属性：是flex-grow，flex-shrink，flex-basis的简写，默认值为0 1 auto，后面两个属性可选
flex: none |
该属性有两个快捷值：auto (1 1 auto) 和 none (0 0 auto)。
建议优先使用这个属性，而不是单独写三个分离的属性，因为浏览器会推算相关值。
6. align-self属性：允许单个item与其他item有不一样的对其方式，可覆盖align-items属性
align-self: auto | flex-start | flex-end | center | baseline | stretch;
神奇的flex布局
在最近的学习中，接触到了flex布局，发现flex很好用，所以今天决定写一写关于flex的一些内容。
在之前的探索中，当一列有很多元素的时候，我通常是通过修改元素的百分比来进行排布。但是当某些时候（例如需要给他们添加等间距时会撑到下一行，或者定位到一定的位置）会很难办。
这时候就要用到
先来看看这个整体属性。它的语法如下
来看看各个属性都是什么意思吧
看完这个表之后，我们来细讲一下各个属性。
flex-grow用来规定项目将相对于其他flex的项目进行扩展的量。 如果元素不是flex盒对象的元素，则该属性不起作用。
语法：
这个属性可以在flex元素的子元素下设置，设置后的值是相对于同级子元素来说的。利用这个属性，我们可以很方便的排布出各种比例宽度的排版。
这个属性的值就是相对于grow将数字变为倒数。例如在flex-grow中
表示的是将该元素设为同级flex元素的3倍
那么
则是将该元素设为同级元素的三分之一。
这个就不多讲了，和flex-grow差不多。
flex-basis属性用于设置或检索flex盒伸缩基准值。
如何理解呢？差不多就是有一堆flex的元素，你只想要调整其中一个的宽度（例如第四个），就可以使用d
来调整。
这个属性用于规定flex项目的方向。
这个属性可以很便利的将一行显示的元素变为竖向的一列，或者将元素倒置过来。你也可以通过嵌套div实现某部分倒置或者在某处拐弯。
这个属性让flex元素在必要的时候拆行（碰到浏览器边界或者div边界。）同时横轴的方向决定了新行堆叠的方向。
这个属性是flex-direction和flex-wrap属性的复合属性。语法如下
由于这两个属性的值已经说过，所以就不列表显示了，只要注意使用顺序就好了。
flex弹性布局彻底掌握
flex布局又称为弹性布局，相对于更早出来的float浮动布局更加方便，在兼容性方面还有不足，但随着很多浏览器版本的淘汰，今后的flex布局会被更加广泛使用。在掌握flex布局前先认识两个概念。
1.flex container
2.flex items
如图所示：
flex布局包含两个重要的轴，main axis和cross axis，各自起点、终点分别对应strat和end。了解到flex布局的基本原型后，我们来看看其属性，属性又分为flex container的属性和flex items的属性，如下图：
默认情况下flex的排列方向为main start到main end，当切换到其他属性时：
flex-direction：row-reverse
flex-direction：column-reverse
1.2justify-content属性
justify-content属性表示flex items在main axis上的对齐方式，其值有center、flex-start、flex-end、space-between、space-around。
justify-content：center
justify-content：flex-end
justify-content：space-between
是每个items间隔相等
justify-content：space-around
items间的间隔是边缘间隔的两倍
1.3align-items
align-items属性决定了items在cross axis的对齐方式，属性值有stretch、flex-start、flex-end、center、baseline
stretch属性值为align-items的默认属性：当items在cross axis方向的size为auto时，会将其自动拉伸填充整个flex container，如：
align-items：flex-start
items与cross start对齐
1.4flex-wrap
flex-wrap属性是控制items换行的，其属性值有：nowwrap、wrap、wrap-reverse
flex-wrap：nowwrap默认值不换行，每个items会自动调整宽度填充完整个flex container
1.6align-content
align-content：flex-start（这就解决了上述中换行没有紧挨的问题）
align-content：flex-end
align-content：center
align-content：space-between（两端cross start 与cross end对齐）
align-content：space-around（与justify-content一样）
align-content：space-evenly
二、flex items上的css属性
2.1order
order属性决定items之间的排列的先后顺序，如图将原本排列的模块倒序排列如下所示，可知order越小排在越前。
2.3flex-grow
flex-grow属性用来对items的宽度进行放大，默认值为0，这里3个items的初始宽度为100px，离flex container边缘还有200px，当将3个items的flex-grow设置为1时，则每个items的宽度增加200px的三分之一，如：
CSS3中的弹性框布局Flexbox可以实现的效果有哪些
flex-box 弹性布局可以实现的效果：自适应布局，效果图如下：
代码如下：
《!DOCTYPE HTML》
《html》
《head》
《meta charset=“utf-8“》
《title》 flex box 弹性布局 《/title》
《meta name=“Keywords“ content=““》
《meta name=“Description“ content=““》
《style type=“text/css“》
html,body{height:100%;margin:0;}/*需要添加高度控制，否则无法撑满整个屏幕*/
body{
display:-webkit-box;
-webkit-box-orient:vertical;/*按照垂直方向上进行自适应处理*/
}
.content{-webkit-box-flex:1;/*分配剩余的所有空间*/} .header{height:50px;min-width:500px;}/*顶部模块高度定死*/
.logo{width:100px;height:50px;background:#99f;}/*为区分模块，设置了背景色 logo部分固定宽高*/
.nav{height:50px;background:#ccc;}/*nav模块不固定宽度*/
.content{min-height:100px;}/*为防止之后的调整窗口大小是出现影响视觉效果的问题，特设置最小高度*/
.content,.header{display:-webkit-box;/*为content,header部分也添加box的展示模式*/}
.nav{-webkit-box-flex:1;}
.con2{-webkit-box-flex:1;}
.con1{width:200px;background:#f99;}/*固定宽度，高度不定*/
.con2{min-width:200px;background:#999;}/*同上的min-height*/
.con3{width:100px;background:#9f9;}/*固定宽度，高度不定*/
.footer{height:50px;min-width:500px;background:#ccc;}/*固定高度*/
《/style》
《link href=““ style=“text/css“ rel=“stylesheet“/》
《/head》
《body》
《div class=“header“》
《div class=“logo“》logo部分，宽高固定《/div》
《div class=“nav“》nav部分，高度固定，宽度自适应《/div》
《/div》
《div class=“content“》
《div class=“con1“》内容初始化第1模块《/div》
《div class=“con2“》内容初始化第2模块《/div》
《div class=“con3“》内容初始化第3模块《/div》
《/div》
《div class=“footer“》底部，宽度不定，高度固定《/div》
《/body》
《/html》
flex 布局
一、Flex 布局是什么？
Flex 是 Flexible Box 的缩写 ，意为“弹性布局” 用来为盒状模型提供最大的灵活性
任何一个容器都可以指定为 Flex 布局 （行内元素也可以）
二、基本概念
采用 Flex 布局的元素，称为Flex 容器 它的所有子元素自动成为容器成员，称为Flex项目
三、容器的属性 （重点记忆）
以下6个属性设置在容器上。
3.1 flex-direction 属性决定主轴的方向（即项目的排列方向）
flex-direction:row | row-reverse | colume | colume-reverse;
1）row：横向从左到右排列（左对齐），默认的排列方式。
2）row-reverse：反转横向排列（右对齐，从后往前排，最后一项排在最前面。
3）column：纵向排列
4）column-reverse：反转纵向排列，从后往前排，最后一项排在最上面。
flex-wrap 定义如果一条轴线排不下，如何换行
flex-wrap: nowrap | wrap | wrap-reverse
1) nowrap (默认)不换行
2）wrap 换行，第一行排列在上方
3）wrap-reverse: 换行，第一行在下方
3.2 .flex-flow 是 flex-direction 属性和 flex-wrap 属性的简写形式，默认值为 row nowrap
justify-content 定义了项目在主轴上的对齐方式
justify-content : flex-start | flex-end | center | space0-between | space-around
align-items 定义项目在交叉轴上如何对齐
align-item: flex-start | flex-end | center | baseline | stretch
align-content 定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用
flex弹性布局
弹性布局可以响应式的实现各种页面布局，所有浏览器都支持。
让所有的li在ul当中垂直居中，实现如下：
效果如下：
接下来再细聊每个属性的特性。
任何一个容器都能使用flex布局，这里有一个flex-container的概念。ul即为flex-container，li是容器内的所有单元吧，官方叫项目，flex item。
借官方几句话： 容器默认存在两根轴，水平主轴main axis和垂直交叉轴cross axis，主轴开始位置与边框交叉点叫main start,结束位置main end,交叉轴开始位置cross start,结束为止cross end,项目默认按照主轴排列，单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。
一、flex-container有6个属性
1、flex-direction: row | row-reverse | column | column-reverse;
按顺序展示效果
2、flex-wrap: nowrap | wrap | wrap-reverse;
更改ul宽度为460px后，li宽100px，当ul宽度减小小于li总宽度时，设置flex-wrap: nowrap，不换行，项目依然排在一条轴线上，但是宽度缩小。
3、flex-flow 属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap
flex-flow: row nowrap = = flex-direction: row;flex-wrap: nowrap;
4、justify-content: flex-start | flex-end | center | space-between | space-around; 定义了项目在主轴上的对齐方式，以上所有图均设置了 justify-content: space-around；效果依次如下：
5、align-items: flex-start | flex-end | center | baseline | stretch; 该属性定义了项目在交叉轴上的对齐方式
在此属性之前以上的属性案例 都是设置align-items：center 对齐方式为交叉轴中点对齐
如果li未设置高度或为auto，那么项目将充满整个容器高度。
6、align-content: flex-start | flex-end | center | space-between | space-around | stretch;该属性定义多根轴线的对齐方式，容器内的项目只有一根轴线时，该属性不起作用。我们得调整一下ul li的样式了。调整flex-wrap:wrap;换行出现多条轴
容器高度400px, 项目高度100px, 设置完align-content: space-around 每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。
二、flex-item项目的属性
1、order： 《integer》 数值越小，排列越靠前，默认值为0
2、flex-grow: 《number》; 定义项目的放大比例，默认为0，如果存在剩余空间也不放大。
设置为2的比1的占据的空间多1倍，60px
3、flex-shrink: 《number》; 定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小，负值无效。
该属性用来设置，当父元素的宽度小于所有子元素的宽度的和时（即子元素会超出父元素），子元素如何缩小自己的宽度的
值越大，缩小的越厉害。如果值为0，表示不缩减小。
4、flex-basis: 《length》 | auto; flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。 注意单词别打错了，不是basic！！！
5、flex: none | 有两个快捷值：auto (1 1 auto) 和 none (0 0 auto)
建议优先使用这个属性，而不是单独写三个分离的属性，因为浏览器会推算相关值。
flex 属性用于设置或检索弹性盒模型对象的子元素如何分配空间, flex 属性是 flex-grow、flex-shrink 和 flex-basis 属性的简写属性。
默认值 0 1 auto 如果元素不是弹性盒模型对象的子元素，则 flex 属性不起作用。
这里有个面试题：当flex：1时，其三个属性值是什么？对应的值是多少？
flex: 1; 相当于flex: auto 默认三个属性值是1 1 auto ；flex-grow、flex-shrink 和 flex-basis 放大不缩小，按照项目原本大小
flex: none; 三个属性值0 0 auto
flex: initial; 三个属性值 0 a auto 默认值
6、align-self: auto | flex-start | flex-end | center | baseline | stretch |initial | inherit;
把li的高度设置去掉，来看这几个属性值的效果。
align-self: auto; align-self: center; align-self: initial; align-self: inherit; 这几个效果没啥差距
align-self: auto; 默认值。元素继承了它的父容器的 align-items 属性。如果没有父容器则为 “stretch“。
align-self: center; 元素位于容器的中心。弹性盒子元素在该行的侧轴（纵轴）上居中放置。（如果该行的尺寸小于弹性盒子元素的尺寸，则会向两个方向溢出相同的长度）。
align-self: initial; 设置该属性为它的默认值 ，等同于 align-self: auto;
align-self: inherit; 从父元素继承该属性，等同于align-self: auto;
align-self: flex-start；弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴起始边界
align-self: flex-end; 弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴结束边界
元素位于容器的基线上。
如弹性盒子元素的行内轴与侧轴为同一条，则该值与’flex-start’等效 。 其它情况下，该值将参与基线对齐。？？什么是内轴和测轴？？小疑问
align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。 注意: Internet Explorer 和 Safari 浏览器不支持 align-self 属性
一、flex布局
任何一个容器都可以指定为 Flex 布局。
行内元素也可以使用 Flex 布局。
采用 Flex 布局的元素，称为 Flex 容器（flex container），简称“容器“。它的所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称“项目“。
属性决定主轴的方向（即项目的排列方向）
项目中 ，一般row和column用的比较多。
彻底搞懂弹性布局flex
说明：大家在看弹性布局这一块，最好按照从上到下一点一点看，因为上下联系比较紧密。
想看我的原文地址，请点击这里。
弹性布局基本概念
任何一个容器都可以设置弹性布局，一旦容器设置了 弹性布局以后，子元素的float、clear和vertical-align属性将失效。
如果设置容器的 水平方向 为 主轴 ，则 垂直方向 为 交叉轴 。
如果设置容器的 垂直方向 为 主轴 ，则 水平方向 为 交叉轴 。
弹性布局父类容器常用属性
设置容器为弹性布局 display
display：flex 设置块元素为弹性布局
display：inline-flex 设置行内元素为弹性布局
子元素排列方向 flex-direction
flex-direction : row（默认值）
设置容器的水平方向为主轴，垂直方向为交叉轴，起点在左端，子元素在主轴上从左向右排列。
flex-direction : row-reverse
设置容器水平方向为主轴，垂直方向为交叉轴，起点在右端，子元素在主轴上从右向左排列。
flex-direction : column
设置容器垂直方向为主轴，水平方向为交叉轴，起点在上端， 子元素在主轴上从上向下排列。
flex-direction : column-reverse
设置容器垂直方向为主轴，水平方向为交叉轴，起点在下端， 子元素在主轴上从下向上排列。
子元素换行方式 flex-wrap
子元素换行是相对于主轴来说的。
flex-wrap ：nowrap（默认）
子元素不换行，当子元素宽度超过父类，会压缩子元素的宽度。
《html》
《head》
《style》
.box{
width: 800px;
height: 500px;
border: 5px solid red;
display: flex;
flex-direction: row;
flex-wrap :nowrap;
}
.boxSelf{
width: 100px;
height: 50px;
border: 5px solid red;
}
《/style》
《/head》
《body》
《div class=“box“》
《div class=“boxSelf“》1《/div》
《div class=“boxSelf“》2《/div》
《div class=“boxSelf“》3《/div》
《div class=“boxSelf“》4《/div》
《div class=“boxSelf“》5《/div》
《div class=“boxSelf“》6《/div》
《div class=“boxSelf“》7《/div》
《div class=“boxSelf“》8《/div》
《/div》
《/body》
《/html》
flex-wrap ：wrap
子元素换行，在交叉轴上等距离平分。自己感受换行方式。
flex-wrap ：wrap-reverse
子元素换行，在交叉轴上等距离平分。自己感受换行方式。
在主轴上子元素对齐方式justify-content
justify-content ：flex-start（默认值）
设置子元素子在主轴起点对齐
《html》
《head》
《style》
.box{
width: 800px;
height: 500px;
border: 5px solid red;
display: flex;
flex-direction: row;
justify-content: flex-start;
}
.boxSelf{
width: 100px;
height: 50px;
border: 5px solid red;
}
《/style》
《/head》
《body》
《div class=“box“》
《div class=“boxSelf“》1《/div》
《div class=“boxSelf“》2《/div》
《div class=“boxSelf“》3《/div》
《div class=“boxSelf“》4《/div》
《div class=“boxSelf“》5《/div》
《/div》
《/body》
《/html》
justify-content ：flex-end
设置子元素子在主轴终点对齐
justify-content ：center
设置子元素子在主轴居中对齐
justify-content ：space-between
设置子元素子在主轴两端对齐，子元素之间的间隔都相等。
justify-content ：space-around
设置子元素子在主轴两侧的间隔相等。子元素之间的间隔比子元素与边框的间隔大一倍。
在交叉轴上子元素对齐方式align-items
align-items属性一般在单行使用
align-items：flex-start
设置子元素在交叉轴上起点对齐。
《html》
《head》
《style》
.box{
width: 800px;
height: 500px;
border: 5px solid red;
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: flex-start;
}
.boxSelf{
width: 100px;
height: 50px;
border: 5px solid red;
}
《/style》
《/head》
《body》
《div class=“box“》
《div class=“boxSelf“》1《/div》
《div class=“boxSelf“》2《/div》
《div class=“boxSelf“》3《/div》
《div class=“boxSelf“》4《/div》
《div class=“boxSelf“》5《/div》
《/div》
《/body》
《/html》
align-items：flex-end
设置子元素在交叉轴上的终点对齐。
align-items：center
设置子元素在交叉轴上居中对齐。
《html》
《head》
《style》
.box{
width: 800px;
height: 500px;
border: 5px solid red;
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items:center;
}
.boxSelf{
width: 100px;
height: 50px;
border: 5px solid red;
}
《/style》
《/head》
《body》
《div class=“box“》
《div class=“boxSelf“》1《/div》
《div class=“boxSelf“》2《/div》
《div class=“boxSelf“》3《/div》
《div class=“boxSelf“》4《/div》
《div class=“boxSelf“》5《/div》
《/div》
《/body》
《/html》
align-items：baseline
设置子元素在交叉轴的第一行文字的基线对齐。
align-items：stretch（默认值）
如果子元素未设置高度或auto，子元素将占满整个容器的高度。
align-content
align-content属性一般在多行使用
align-content：flex-start
设置子元素在交叉轴上起点对齐。
《html》
《head》
《style》
.box{
width: 800px;
height: 500px;
border: 5px solid red;
display: flex;
flex-direction: row;
justify-content: flex-start;
flex-wrap: wrap;
align-content: flex-start;
}
.boxSelf{
width: 100px;
height: 50px;
border: 5px solid red;
}
《/style》
《/head》
《body》
《div class=“box“》
《div class=“boxSelf“》1《/div》
《div class=“boxSelf“》2《/div》
《div class=“boxSelf“》3《/div》
《div class=“boxSelf“》4《/div》
《div class=“boxSelf“》5《/div》
《div class=“boxSelf“》6《/div》
《div class=“boxSelf“》7《/div》
《div class=“boxSelf“》8《/div》
《div class=“boxSelf“》9《/div》
《div class=“boxSelf“》10《/div》
《/div》
《/body》
《/html》
align-content：flex-end
设置子元素在交叉轴终点对齐。
align-content：center
设置子元素在交叉轴中点对齐。
align-content：space-between
子元素在交叉轴两端对齐，子元素在交叉轴之间的间隔相等。
align-content：space-around
子元素在交叉轴两侧的间隔相等，子元素之间的间隔 比 子元素与边框的间隔 大一倍。
align-content：stretch（默认值）
如果子元素没有设置高度，子元素占满整个交叉轴。
弹性布局 子元素常用属性
子元素前后排列顺序order
子元素的 order 属性 控制子元素前后排列顺序，默认值为0，order 属性值越小越排在前面。
《html》
《head》
《style》
.box{
width: 800px;
height: 500px;
border: 5px solid red;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
}
.boxSelf{
width: 200px;
height: 50px;
border: 5px solid red;
}
《/style》
《/head》
《body》
《div class=“box“》
《div class=“boxSelf“》1《/div》
《div class=“boxSelf“》2《/div》
《div class=“boxSelf“》3《/div》
《div class=“boxSelf“》4《/div》
《div class=“boxSelf“》5《/div》
《div class=“boxSelf“》6《/div》
《div class=“boxSelf“》7《/div》
《div class=“boxSelf“》8《/div》
《div class=“boxSelf“ style=“order: -2“》9《/div》
《div class=“boxSelf“ style=“order: -1“》10《/div》
《/div》
《/body》
《/html》
flex-grow
子元素的 flex-grow属性， 设置子元素在 主轴剩余份额的 占比。
flex-shrink
当空间不够时，设置子元素的缩小比例
设置子元素的大小flex-basis
子元素的 flex-basis属性 用来 设置子元素 在 主轴 的大小 (水平方向为主轴 flex-basis属性控制的就是宽度，垂直方向为主轴 flex-basis属性控制的就是高度) ，flex-basis属性优先级高于width属性或height属性。
子元素在交叉轴上对齐方式align-self
子元素的align-self属性值 和 align-items属性值相同，只不过align-items是设置在父类容器上控制所有子元素在交叉轴的对齐方式，而align-self属性是单独设置在子元素上仅仅控制设置了 align-self属性的元素在交叉轴的对齐方式，align-self属性优先级高于 align-items属性。