flex布局

flex布局

Flexbox 是 flexible box 的简称（注：意思是“灵活的盒子容器”），是 CSS3 引入的新的布局模式。它决定了元素如何在页面上排列，使它们能在不同的屏幕尺寸和设备下可预测地展现出来。

一： flex布局和传统布局的对比

1.1 传统布局

• 兼容性好
• 布局繁琐
• 局限性，不能在移动端很好的布局

1.2 flex布局

• 操作简单，感受众多个flex布局属性的迷人魅力，移动端使用广泛

  容器属性：

  • flex-flow
  • flex-direction
  • flex-wrap
  • justify-content
  • align-items
  • align-content

  元素属性：

  • order
  • flex-grow
  • flex-shrink
  • flex-basis
  • flex
  • align-self

  flex,属性好多，每个属性还有好多属性值，好多不会的英文单词，好难啊！

  [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-hc79hg6E-1590666008733)(C:\Users\Abel\Desktop\P1\讲义图片\flex_1.jpeg)]

• 不考虑IE以及低端安卓机兼容的情况下，可以放心大胆的使用

二： flex弹性盒模型

对于某个元素只要声明了display:flex，那么这个元素就成为了弹性容器，具有flex弹性布局的特性。

1. 每个弹性容器都有两根轴，主轴和交叉轴，两轴之间成90度关系。
2. 每根轴都有起点和终点，这对于元素的对齐非常重要
3. 弹性容器中的所有子元素都成为<弹性元素>，弹性元素永远沿主轴排序
4. 弹性元素也可以通过display：flex设置成另一个弹性容器，形成嵌套关系。因此一个元素既可以是弹性容器也可以是弹性元素

三： 主轴

flex布局是一种一维布局模型，一次只能处理一个维度(一行或者一列)，大部分属性作用于主轴，交叉轴很多时候被动的跟着主轴的变化而变化。

3.1 主轴的方向

我们再弹性容器上通过flex-direction修改主轴的方向。如果主轴方向改变了，那么：

①、交叉轴就会相应的旋转90度。

②、弹性元素的排列方式也会发生改变，因为弹性元素永远沿主轴排列

flex-direction属性，属性值：	效果
row（默认值）	→
column	↓
row-reverse	←
column-reverse	↑

@问题：弹性元素永远沿主轴排列，那么如果主轴排不下去呐？

3.2沿主轴的排列处理

主轴排列方式：

flex-wrap属性，属性值：	效果
nowrap（默认）	不换行
wrap	换行
wrap-reverse	反向换行

3.3 复合属性

flex-flow = flex-drection + flex-wrap

flex-flow相当于规定了flex布局的工作流(flow)

例：

flex-flow:row nowrap;

@情景再现：

当flex-wrap: nowrap不折行的时候，容器宽度有剩余或者不够分，弹性元素该如何进行应对，体现出它们弹性元素的特征

四： 元素如何弹性伸缩应对

应对武器**,特定情境下生效**的武器：

4.1 flex-shrink:缩小比例

默认值是1

武器实战→

​ 容器缺少宽度：100px

​ 分成每份：10

​ 元素缩小为：100-16.66

4.2 flex-grow:放大比例

默认值：0

武器实战→

​ 容器剩余宽度：100

​ 分成每份：25

​ 元素放大为：125

@情景再现：如果，我们需要再弹性盒子中加入一个一定要显示出来的元素，在宽度富裕的时候有固定值，在宽度不够的时候，借其他元素的也一定要优先给它，让它显示出来，比如 logo。

五： 弹性处理与刚性尺寸

如何简单暴力的规定元素尺寸：

我们已经知己知彼的属性：width,height

flex为我们提供的属性：flex-basis

5.1 公正的执行者，width/height

资源(宽度)不够或者富裕的时候，是多少就是多少

5.2 再苦也先紧着孩子的父母，flex-basis

资源(宽度)不够时，借也要给足基本需求，富裕时，也不放纵，该是多少就是多少

5.3 条件模拟：

1.当width以及flex-basis都为0的时候

• width: 0 ——就是零
• flex-basis: 0 ——依旧显示文字

2.当width以及flex-basis都不为0的时候

• width: !0 ——50
• flex-basis: !0 ——50

总结 :

3.flex-basis 为auto

当flex-basis为auto时，如果设置了width,则元素尺寸由width决定，如果没有设置则由内容决定

重难点

5.4 第二个复合属性flex

flex = flex-grow + flexshrink + flex-basis

常用简写：

flex: 1 = flex: 1 1 0%

flex: 2 = flex: 2 1 0%

flex: auto = flex: 1 1 auto

flex: none = flex: 0 0 auto

@情景再现：我们学习浮动的时候，有左浮动右浮动，可以控制元素的浮动方式，那么flex可以控制弹性元素的对齐方式嘛？

@问题：浮动属性是给谁加的，浮动元素本身还是它的父级元素？

六：容器内，弹性元素的对齐方式

如何对齐，是弹性元素处理的一个重要部分，对齐方式，分别作用在主轴和交叉轴来设置的

6.1 主轴上的对齐方式

justify-content属性，属性值	效果
flex-start默认	从左往右
flex-end	从右往左
center	居中
space-between	先置于两边，然后再平分剩余空间
space-around	直接平分剩余空间

6.2 交叉轴上的对齐方式

主轴只是一个方向，还较为好理解，在交叉轴上，则涉及了单行或多行的两种情况。

交叉轴上的单行对齐

align-items属性，属性值	效果
stretch	拉伸
flex-start(默认)	开始
flex-end	结尾
center	居中
baseline	文字对齐

@问题：如何让弹性元素多行排列，形成多行的情况？

交叉轴上的多行对齐

align-content属性，属性值	效果
stretch
flex-start
flex-end
center
space-between
space-around

@思考：在多行的情况下，同时设置多行对齐和单行对齐，弹性元素听谁的？

@情景：如何让某个元素与众不同脱颖而出，脱离原本的对齐方式？

6.3 单个元素的对齐方式

align-self属性，属性值	效果
stretch
flex-start
flex-end
center
baseline

观察可得：

七： 排序

order，设置元素间的排列顺序

• 数值越小，越靠前，默认为0
• 值相同时，以dom中元素排列为准