Flex布局-从了解到使用只需5min

写在前面：

我是「沸羊羊_」，昵称来自于姓名的缩写 fyy ，之前呕心沥血经营的博客因手残意外注销，现经营此账号。
本人是个小菜，正向着全栈工程师的方向努力着，文章可能并不高产，也很基础，但每写一篇都在用心总结，请大佬勿喷。
如果您对编程有兴趣，请关注我的动态，一起学习研究。
感谢每位读者！

文章目录

Flex简介
其他布局
- table布局
- float布局
- absolute布局
- grid布局
Flex布局
- 容器属性
- - 元素结构
  - 使用flex布局
  - 改变主轴方向 - flex-direction属性
  - 改变换行方式 - flex-wrap属性
  - flex-flow属性（flex-directive和flex-wrap简写）
  - 主轴对齐方式 - justify-content
  - 交叉轴对齐方式 - align-items
  - 多根轴线对齐方式 - align-content
- 子元素属性
- - 子元素属性 -- order
  - 子元素属性 -- flex-grow
  - 子元素属性 -- flex-shrink
  - 子元素属性 -- flex-basis
  - 子元素属性 -- flex
  - 子元素属性 -- align-self
最后

Flex简介

页面布局的传统解决方案是基于盒状模型，使用 display属性+position属性+float属性，但对于特殊布局非常不方便。直到2009年，W3C提出了解决方案-----Flex布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，意味着，现在可以很安全的使用这项功能。

Flex是Flexible Box的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。

任何一个容器都可以指定为Flex布局。

注意，设为 Flex 布局以后，子元素的float、clear和vertical-align属性将失效。

其他布局

table布局

在实际的项目开发过程中，不建议用table进行布局。

缺点：

table 比其他html标签占更多的字节。造成下载时间延迟，占用服务器更多的流量资源（代码冗余）
table 会阻挡浏览其渲染引擎的渲染顺序，会延迟页面的生成速度，让用户等待时间更久。
灵活性差，一旦设计确定，后期很难通过CSS让它展现新的面貌。
不利于搜索引擎抓取信息，直接影响到网站的排名

优点：

兼容性好
容易上手

float布局

float 属性定义元素在哪个方向浮动。

缺点：

脱离文档流，需要清除浮动，高度塌陷（float的破坏性主要是指它会使父容器的高度塌陷，也就是父元素在高度计算的时候会忽略浮动的元素）。

优点：

兼容性好，比较简单。

absolute布局

relative属性：脱离文档流，但保留占位符，其偏移位置是相对于本身在正常文档流中时的位置

脱离文档流是说设置了relative属性之后，元素不在z-index:0;的正常文档流中，其z-index的值>0，但保留占位符，就是在正常文档流中位置保留着，后继元素不能占位，然后相对于本身正常位置进行偏移。

缺点：

脱离文档流，会导致后续元素全部脱离文档流，可用行差。

grid布局

Grid 布局是 CSS 中最强大的布局系统。与 flexbox 的一维布局系统不同，CSS Grid 布局是一个二维布局系统，意味着它可以同时处理列和行。

Flex布局

容器属性

元素结构

效果：

<template><div class="body"><div class="container"><div class="one">one</div><div class="two">two</div><div class="three">three</div></div></div>
</template><style scoped>
.body {margin: 0;padding: 0;
}
.container {width: 300px;background: #999;margin: 50px auto;
}
.one {width: 100px;height: 50px;background-color: #375;
}
.two {width: 100px;height: 50px;background-color: #854;
}
.three {width: 100px;height: 50px;background-color: #489;
}
</style>

使用flex布局

display:flex

因为flex布局默认主轴方向为 row ，以行为主轴，所以内容在主轴的起点和终点两根轴线之间。

改变主轴方向 - flex-direction属性

主轴方向： flex-direction: column;

把主轴方向改为 column后，以列为主轴，行为交叉轴，所以内容在主轴的两根轴线之间。

主轴方向：flex-direction: column-reverse;

以列为主轴，将排列方式反转，以原点为起点。

改变换行方式 - flex-wrap属性

换行：flex-wrap:wrap;

换行：flex-wrap:wrap-reverse;

flex-flow属性（flex-directive和flex-wrap简写）

以行为主轴，换行：flex-flow:row wrap;

以行为主轴，不换行：flex-flow:row nowrap;

以列为主轴，换行：flex-flow: column wrap;

以列为主轴，不换行：flex-flow: column nowrap;

主轴对齐方式 - justify-content

行为主轴，左对齐（默认值）: justify-content: flex-start;

行为主轴，右对齐: justify-content: flex-end;

行为主轴，居中: justify-content: center;

行为主轴，两端对齐，元素之间间隔相等: justify-content: space-between;

行为主轴，元素边框两侧间隔相等，元素之间间隔比元素边框间隔大一倍: justify-content: space-around;

列为主轴，左对齐（默认值）: flex-direction: column; justify-content: flex-start;

列为主轴，右对齐: flex-direction: column; justify-content: flex-end;

列为主轴，居中: flex-direction: column; justify-content: center;

列为主轴，两端对齐，元素之间间隔相等: flex-direction: column; justify-content: space-between;

列为主轴，元素边框两侧间隔相等，元素之间间隔比元素边框间隔大一倍: flex-direction: column; justify-content: space-around;

交叉轴对齐方式 - align-items

列为交叉轴，左对齐（默认值）: align-items: flex-start;

列为交叉轴，右对齐: align-items: flex-end;

列为交叉轴，居中: align-items: center;

列为交叉轴，以元素第一行文字基线对齐: align-items: baseline;

列为交叉轴，取消元素高度将占满整个容器高度（默认值）: align-items: stretch;

行为交叉轴，左对齐（默认值）: flex-direction: column; align-items: flex-start;

行为交叉轴，右对齐: flex-direction: column; align-items: flex-end;

行为交叉轴，居中: flex-direction: column; align-items: center;

行为交叉轴，以元素第一行文字基线对齐: flex-direction: column; align-items: baseline;

行为交叉轴，取消元素高度（默认值）: flex-direction: column; align-items: stretch;

多根轴线对齐方式 - align-content

注意：容器内必须有多行元素，align-content 属性才能渲染出效果。

子元素属性

子元素属性 – order

order属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。

.one {order: 2;
}
.two {order: 1;
}
.three {order: 1;
}

子元素属性 – flex-grow

flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。

如果所有项目的flex-grow属性都为1，则它们将等分剩余空间（如果有的话）。如果一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍。

.one {flex-grow: 1;
}
.two {flex-grow: 2;
}
.three {flex-grow: 1;
}

子元素属性 – flex-shrink

flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。数值越大，相对比例越小。

如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。

负值对该属性无效。

// case 1
.one {flex-shrink: 3;
}
.two {}
.three {}

// case 2
.one {flex-shrink: 0;
}
.two {}
.three {}

子元素属性 – flex-basis

flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。

它可以设为跟width或height属性一样的值（比如350px），则项目将占据固定空间。

.one {flex-basis: 500px;
}
.two {}
.three {}

子元素属性 – flex

flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。

.one {flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}

该属性有两个快捷值：auto (1 1 auto) 和 none (0 0 auto)。

建议优先使用这个属性，而不是单独写三个分离的属性，因为浏览器会推算相关值。

子元素属性 – align-self

align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。

//子元素容器
.container {display: flex;align-items: center;
}
.one {align-self: flex-start;
}
.two {}
.three {}

该属性可能取6个值，除了auto，其他都与align-items属性完全一致。

最后

以上为小编学习总结记录，如有错误，请大佬指出，不胜感激。