Flexbox

更加优雅的布局

Created by 卢小健 / @_杂烩乱炖

1.能解决什么问题？

2.能用在哪里，哪些地方可以用？

3.为什么能用，它的实现逻辑？

这能够做什么？

绝对置中

flexbox

See the Pen perfectly center by 卢小健 (@luxiaojijan) on CodePen.

See the Pen vEQbEZ by 卢小健 (@luxiaojijan) on CodePen.

能用在哪里？浏览器兼容

W3C.ORG

兼容

can i use

兼容
兼容
兼容

实现逻辑

See the Pen pvQZoy by 卢小健 (@luxiaojijan) on CodePen.

`shrink`则是在宽度和比容器宽度大时候，才有用。按照shrink的值减去相应大小得到子元素的值。

公式： overflow_space(溢出的宽度)

  1. 1.计算溢出的宽度
  2. overflow_space=flex_item_total(子元素basis宽度之和)-container_width(容器宽度)
  3. 2.得到计算的子元素的宽度
  4. item_basis:子元素设置的flex-basis；item_shrink:子元素的flex_shrink；item_shrink_sum:所有子元素flex_shrink的和。
  5. flex_item_width(计算的子元素的宽度)=item_basis-(overflow_space*(item_shrink/item_shrink_sum))

See the Pen flex-shrink by 卢小健 (@luxiaojijan) on CodePen.

align-content

See the Pen align-content demo by 卢小健 (@luxiaojijan) on CodePen.

align-items

See the Pen align items demo by 卢小健 (@luxiaojijan) on CodePen.

align-self

See the Pen align-self demo by 卢小健 (@luxiaojijan) on CodePen.

一个覆盖align-item的例子

See the Pen MYZvoX by 卢小健 (@luxiaojijan) on CodePen.

justify-content

See the Pen justify-content by 卢小健 (@luxiaojijan) on CodePen.