flex布局

flex布局

一、认识flexbox

1.1、Flexbox翻译为弹性盒子

• 弹性盒子是一种用于按行或按列布局元素的一维布局方法 ;

• 元素可以膨胀以填充额外的空间, 收缩以适应更小的空间;

• 通常我们使用Flexbox来进行布局的方案称之为flex布局(flex layout);

1.2、flex布局是目前web开发中使用最多的布局方案：

• flex 布局（Flexible 布局，弹性布局）;

• 目前特别在移动端可以说已经完全普及;

• 在PC端也几乎已经完全普及和使用, 只有非常少数的网站依然在用浮动来布局;

1.3、为什么要使用flex布局呢？

• 长久以来，CSS 布局中唯一可靠且跨浏览器兼容的布局工具只有 floats 和 positioning。

• 但是这两种方法本身存在很大的局限性, 并且他们用于布局实在是无奈之举;

可以才canuse.com中查看flex的兼容性

二、flex布局的重要概念、

2.1、两个重要概念

• 开启了 flex 布局的元素叫 flex container

• flex container 里面的直接子元素叫做 flex item

2.3、当flex container中的子元素变成了flex item时,具备一下特点：

1. flex item的布局将受flex container属性的设置来进行控制和布局;

2. flex item不再严格区分块级元素和行内级元素;

3. flex item默认情况下是包裹内容的, 但是可以设置宽度和高度;

4. flex item 设置float 失效

2.4、设置 display 属性为 flex 或者 inline-flex 可以成为 flex container

• flex： flex container 以 block-level 形式存在

• inline-flex： flex container 以 inline-level 形式存在

三、flex布局的模型 (main axis)主轴 (cross axis)交叉轴

四、flex相关的属性汇总

应用在 flex-container 上的 CSS 属性	应用在 flex-items 上的 CSS 属性
flex-direction	flex-grow
flex-wrap	flex-basis
flex-flow	flex-shrink
justify-content	order
align-items	[align-self](###6.2、align-self(自己) 相当于单个的align-items)
align-content	flex

五、flex-container 的 CSS 属性

5.1、flex-direction

作用：flex items **默认都是沿着 main axis（主轴）**从 main start 开始往 main end 方向排布

• flex-direction 决定了 main axis 的方向，有 4 个取值
• row（默认值）、row-reverse、column、column-reverse

5.2、flex-wrap

作用：flex-wrap 决定了 flex container 是单行还是多行,占满的时候是否会换行

• nowrap（默认）：单行（不换行）
• wrap：多行（换行）
• wrap-reverse：多行（对比 wrap，cross start 与 cross end 相反）

5.3、flex-flow（重要）

作用：flex-flow 属性是 flex-direction 和 flex-wrap 的简写。

• 顺序任何, 并且都可以省略，一共就2个值;

5.4、justify-content（重要）

作用：justify-content 决定了 flex items 在 main axis（主轴） 上的对齐方式

• flex-start：默认值）：与 main start 对齐
• flex-end：与 main end 对齐
• center：居中对齐
• space-between：
  • flex items 之间的距离相等
  • 与 main start、main end两端对齐
• space-around：
  • flex items 之间的距离相等
  • flex items 与 main start、main end 之间的距离是 flex items 之间距离的一半
• space-evenly：
  • flex items 之间的距离相等
  • flex items 与 main start、main end 之间的距离 等于 flex items 之间的距离

5.5、align-items 交叉轴的对齐方式

align-items 决定了 flex items 在 cross axis 上的**对齐方式**

• normal：在弹性布局中，效果和stretch一样 默认没有设置高度的时候会拉伸撑满盒子，flex-direction：cloum的时候不设置宽度效果也是一样的

  注意:

  1. 不想被拉满的话设置flex-start
  2. 当前元素高度为auto时，margin-left: auto; margin-right: auto 可以避免拉伸

• stretch：当 flex items 在 cross axis 方向的 size 为 auto 时，会自动拉伸至填充 flex container

• flex-start：与 cross start 对齐

• flex-end：与 cross end 对齐

• center：居中对齐

• baseline：与基准线对齐

5.6、align-content 交叉轴所有item的排布方式

align-content 决定了多行 flex items 在 cross axis 上的**排布方式**，用法与 justify-content 类似

个人理解：交叉轴方向的所有flex item的对其方式，align-item：是单行行cross asis 的自适应对其方式

• 默认值是normal : 就像没有设置对齐内容值一样。
• flex-start：与 cross start 对齐
• flex-end：与 cross end 对齐
• center：居中对齐
• space-between：
  • flex items 之间的距离相等
  • 与 cross start、cross end两端对齐
• space-around：
  • flex items 之间的距离相等
  • flex items 与 cross start、cross end 之间的距离是 flex items 之间距离的一半
• space-evenly：
  • flex items 之间的距离相等
  • flex items 与 cross start、cross end 之间的距离 等于 flex items 之间的距离

六、flex-item属性

6.1、order

作用：order 决定了 flex items 的排布顺序

• 可以设置任意整数（正整数、负整数、0），值越小就越排在前面
• 默认值是 0

6.2、align-self(自己) 相当于单个的align-items

作用：flex items 可以通过 align-self 覆盖 flex container 设置的 align-items

• auto（默认值）：遵从 flex container 的 align-items 设置
• stretch、flex-start、flex-end、center、baseline，效果跟 align-items 一致

6.3、flex-grow(成长)

作用：flex-grow 决定了 flex items 如何扩展(拉伸/成长)

• 可以设置任意非负数字（正小数、正整数、0），默认值是 0 ，可以有小数但是一般都是写整数的

• 当 flex container 在 main axis 方向上有剩余 size 时，flex-grow 属性才会有效

• ***注意：***如果所有 flex items 的 flex-grow 总和 sum 超过 1，每个 flex item 扩展的 size 为flex container 的剩余 size * flex-grow / sum

  其实就是剩余的空间按照flex-grow设置的值的比例来进行分配

  • 默认是0不放大

• flex items 扩展后的最终 size 不能超过 max-width\max-height

6.4、flex-shrink

作用：flex-shrink 决定了 flex items 如何收缩(缩小)

• 可以设置任意非负数字（正小数、正整数、0），默认值是 1

• 当 flex items 在 main axis 方向上超过了 flex container 的 size，flex-shrink 属性才会有效

• 如果所有 flex items 的 flex-shrink 总和超过 1，

  每个 flex item 收缩的 size为flex items 超出 flex container 的 size * 收缩比例 / 所有 flex items 的收缩比例之和

  按照flex-shrink的比例来进行缩小，默认是1

  • 0就是不收缩
  • 默认是1，可以自动缩小，值越大收缩的比例越大

• 注意（这个很重要注意下）：flex items 收缩后的最终 size 不能小于 min-width\min-height

6.5、flex-basis（基础大小）

flex-basis 用来设置 flex items 在 main axis 方向上的 base size(基础大小)

• auto（默认值）、具体的宽度数值（100px）

• 决定 flex items 最终 base size 的因素，从优先级高到低

  1. max-width \max-height \min-width \min-height

  2. flex-basis

  设置基础大小之后，单词（英文单词比较长）不加width限制的时候他会将flex item撑大

  3. width \height

  如果在flex-basis的基础上面同时加width限制宽度的话，对于较长的英文单词不会被覆盖

  4. 内容本身的 size

6.6、flex属性（简写属性）

• 一个值：flex-grow
• 两个值和三个值：第一个都是flex，剩下两个看单位，之后flex-basis单位值px
• 使用flex会有一点点的性能优化，（只是一点点）

七、解决justify-content：space-between最后一行的问题

7.1、可以不用justify-content，用margin

7.2、目前想到的比较好的解决思路

• 1、在flex container里面 最后面添加<i></i>或者<span></span>i标签比较短一点优先选择
• 2、给i标签设置和flex item相同的宽度
• 3、设置i标签的数量为column-2