谈谈很厉害的flexbox

[beiweiqiang]

谈谈很厉害的 flexbox

---

flexbox 很受欢迎，以至于 CSS-TRICKS 的推荐搜索就是 flexbox

我们来看看 flexbox 的各浏览器兼容情况

Flexbox Layout(Flexible Box) 的提出是为了提供一个更加有效的方式去完成页面布局、对齐、在组件间分配空间，甚至他们的尺寸是未知的或者是动态的。

flexbox是一整个模块，而不是单独的一个属性，其中包括容器(flex container)和其中的组件(flex items)。

其中有两个轴，主轴(main axis)和交叉轴(cross axis)。这两个轴可以决定 flex container 内 flex items 的排布方向。

flex container属性

    display: flex; //定义了一个flex container
    flex-direction: row | row-reverse | column | column-reverse; //定义items在container里的排布方向
    flex-wrap: nowrap | wrap | wrap-reverse; //换行
    justify-content: flex-start | flex-end | center | space-between | space-around; //定义对齐方式，帮助分配items间的空间
    align-items: flex-start | flex-end | center | baseline | stretch; //定义在交叉轴上items是如何排布的，如果前面设置了 flex-direction 是 column 或者 column-reverse 的话，这里就是指 main axis 了
    align-content: flex-start | flex-end | center | space-between | space-around | stretch; //多行 items 如何分配行间空间

flex items属性

    order: <integer>; //人为安排 items 顺序，<integer> 越小排序越前
    flex-grow: <number>; //定义 items 扩大
    flex-shrink: <number>; //定义 items 收缩
    flex-basis: <length> | auto; //分配 items 占据的主轴空间
    flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]; //flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto
    align-self: auto | flex-start | flex-end | center | baseline | stretch; //允许单个 item 与其他 items 的对齐方式不一样

下面我们举例子：

1.怎样做到居中？

    .parent {
      display: flex;
      height: 300px;
    }
    .child {
      width: 100px;
      height: 100px;
      margin: auto;
    }

或

    .parent {
      display: flex;
      height: 300px;
      align-items: center;
      justify-content: center;
    }

2.多个 items ，如何不用媒体查询就让 items 随浏览器尺寸变化而发生响应式排布呢？

    .parent {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-around;
    }

3.假设我们有一个右对齐的导航栏在页面顶部，当屏幕尺寸变小以后会变成居中，尺寸再变小导航栏会变成一列。

    .parent {
      display: flex;
      flex-flow: row wrap;
      justify-content: flex-end;
    }
    @media all and (max-width: 800px) {
      .parent {
        justify-content: space-around;
      }
    }
    @media all and (max-width: 500px) {
      .parent {
        flex-direction: column;
      }
    }

4.列与列间存在间隔

    .parent {
      display: flex;
      height: 300px;
      justify-content: space-around;
    }

还有由 flexbox 实现的栅格框架，比如 Flexbox Grid

参考资料

1. http://www.75team.com/post/don-039-t-overthink-it-flexbox-grids-css-tricks.html
2. https://philipwalton.github.io/solved-by-flexbox/demos/grids/
3. https://css-tricks.com/snippets/css/a-guide-to-flexbox/