本文目录一览：
- 1、28、弹性布局flex
- 2、Flex弹性盒布局
- 3、Flex布局
28、弹性布局flex
布局类型：
1、浮动+定位
2、自适应（百分比）
3、响应式布局
4、弹性布局（flex布局）
弹性布局的优缺点：
1、优点：兼容性支持所有浏览器（Webkit内核的浏览器要加上-webkit-），可以随用户的喜好进行调节销知，可以将任何一个容器指定为Flex布局；
2、缺点：弹性布局较复杂，需兼容IE6；
注意：当使用了弹性布局，在css中的float、clear和vertical-align就会失效
1、flex-direction弹布局方向即容器方向
row：默认方向，从左到右
row-reverse：从右向左
column：从上到下
column-reverse：从下到上
2、flex-wrap换行
nowrap：默认不换行
wrap：向下换行
wrap-reverse：向上换行
3、flex-flow方向和换行的简写
例如，flex-flow：row nowrap；
4、justify-content容器方向上的对齐方式
flex-start：默认向左对齐
flex-end：向右对齐
center：居中对齐
space-between：两端对齐，子元素之间有间隔，子元素与边框之间无间隔
space-around：每个子元素两侧的间隔相等。子元素之间的间隔比子元素与容器边框的间隔大一倍
5、align-items默认垂直容器方向上的对齐方式
flex-start：垂直方向的起点对齐
flex-end：垂直方向的终点对齐
center：垂直方向搭明的中点对齐
baseline：与第一个子元素中文字的基线对齐
stretch（默认值）：如果子元素没有设置高度或者高度设为auto，那么它将占满整个容器的高度
6、align-content子元素两种方向上的对齐
flex-start：当容器方向子元素刚好填满时，与垂直方向的起点对齐
flex-end：当容器方向子元素刚好填满时，与垂直方向的终点对齐
center：当容器方向子元素刚好填满时，与垂直方向的中点对齐
space-between：当容器方向子元素刚好填满时，垂直方向两端对齐，子元素之间的等间距间隔
space-around：两个方向两侧的间隔都相等。所以轴线之间的间隔比轴线与边框的间隔亏枝消大一倍
stretch（默认值）：沾满整个垂直方向
1、order排序，integer（整数），数值小的在前面
2、flex-grow放大比例，number，默认值为0
3、flex-shrink缩小比例，number，默认值为1
注：给所有子元素设置该属性为1，当空间不足时，所有子元素将等比例缩小平分所有空间。如果单独给某个子元素设置为0，那么该子元素将空间不足时不缩小。
4、flex-basis属性
该属性定义了给子元素分配空间时其占据的空间为多少，可以设置为与其width和height属性一样的值，那么它将被分配固定的空间大小。
5、flex属性：flex-grow、flex-shrink和flex-basis的简写
6、align-self属性
该属性允许设置过额子元素有与其他子元素不一样的对齐方式，可以覆盖align-items属性
auto（默认值）：表示默认继承父级的align-items属性
flex-start：垂直方向的起点对齐
flex-end：垂直方向的终点对齐
center：垂直方向的中点对齐
baseline：与第一个子元素中文字的基线对齐
stretch（默认值）：如果子元素没有设置高度或者高度设为auto，那么它将占满整个容器的高度
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：项目之间间隔完全相等 包括上下
Flex布局
Flex布局也称弹性悔隐布局（flexiblebox）模块，主要是为了提供一个更有效的方式对容器之间的各项内容进行布局。弹性布局的主要思想是让容器能根据需要改变项目的宽度和高度，以填满可用空
间，满足所有类型的显示设备和屏幕尺寸。因此弹性布局模块的大小是未知或者动态变化的。
采用 Flex 布局的元素，称为 Flex 容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称"项目"。
Flex布局比较适合用于小规模的布局，比如应用程序中的组件布局。Flex布局容器默认存两条轴：茄前拦水平主轴（main
axis）和垂直的交叉轴（cross axis）。主轴的开始位置与边框的交叉点叫作main start。结束位置叫作main
end；交叉轴的开始位置叫作cross start，结束位置叫作cross end。项目默认沿主轴排列。
1.给父元素加上display:flex开始盒子布局
row | row-reverse | column | column-reverse
（1）row（默认值）：主轴为水平方向，起点在左端。
（2）row-reverse：主轴为水平方向，起点在右端。
（3）column：主轴为垂直方向，起点在上沿。
（4）column-reverse：主轴为垂直方向，起点在下沿。
nowrap | wrap | wrap-reverse
（1）nowrap：不换行
（2）wrap ：换行。第一行在上方
（3）wrap-reverse：换行。第一行在下方
flex-start | flex-end | center | space-between | space-around
（1）flex-start（默认值）：左对齐
（2）flex-end：右对齐
（3）center： 居中
（4）space-between：两端对齐，项目之间的间隔都相等
（5）space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍
flex-start | flex-end | center | baseline | stretch
（1）flex-start：交叉轴的起点对齐
（2）flex-end：交叉轴的终点对颤胡齐
（3）center：交叉轴的中点对齐
（4）baseline: 项目的第一行文字的基线对齐
（5）stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度
auto | flex-start | flex-end | center | baseline | stretch
该属性可取6个值，除了auto，其他都与align-items属性完全一致。
(完)
