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

写在前面：

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

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属性完全一致。

最后

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