用auto margins来布局flexbox吧！以及学术一点儿

2016-04-24 本文已影响827人蜂蜜柚子茶

常见的margin: 0 auto;可以将block元素水平居中，实际上auto margins可不止这一点用处呢。在flexbox布局中，auto margins不仅能实现左、右对齐和水平居中，还能实现上、下对齐和垂直居中，甚至可以在同一个container中同时实现多种对齐方式，布局功能颇为强大。在很多情况下，auto margins比align与justify系列对齐属性（alignment properties）更加简洁和巧妙，还不容易出错！

在flexbox布局中，auto margins之所以有这么强大的功能，是因为它能够将剩余空间（free space）全部“吃掉”。没有了剩余空间，justify-content与align-self属性也无从下手，自然变得无效了。

来看几个例子吧～

Example 1: 实现flex元素的响应式水平垂直居中

<head>
  <style>
    .container {
      height: 300px;
      background-color: lavender;
      display: flex;
      flex-wrap: wrap;
    }
    
    .item {
      background-color: cornflowerblue;
      width: 100px;
      height: 50px;
      margin: auto;
      text-align: center;
      line-height: 50px;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="item">Item 1</div>
    <div class="item">Item 2</div>
    <div class="item">Item 3</div>
    <div class="item">Item 4</div>
    <div class="item">Item 1</div>
    <div class="item">Item 6</div>
  </div>
</body>

Example 1-1.png 窗口宽800px

Example 1-2.png 窗口宽350px

Example 2: 实现同一个flex container中多种对其方式并存。特别适用于导航栏或表单栏，可将某些元素左对齐，另一些元素右对齐。

<head>
  <style>
    .nav {
      height: 100px;
      background-color: lavender;
      display: flex;
      flex-wrap: wrap;
    }
    
    .item {
      background-color: cornflowerblue;
      width: 100px;
      height: 50px;
      text-align: center;
      line-height: 50px;
      margin: auto 0;
    }

    .other {
      margin-left: auto;
    }
    
    .content {
      background-color: mistyrose;
      font-size: 5em;
      width: 100%;
      height: 300px;
      text-align: center;
      line-height: 300px;
    }
  </style>
</head>
<body>
  <div class="nav">
    <div class="item">Item 1</div>
    <div class="item">Item 2</div>
    <div class="item">Item 3</div>
    <div class="item">Item 4</div>
    <div class="item">Item 5</div>
    <div class="item other">Item 6</div>
  </div>
  <div class="content">CONTENT</div>
</body>

Example 2-1.png

类似的，使用auto margins可以更加简单地实现如下图的常见效果。
图片出自http://www.flexboxpatterns.com/home，原效果并没有使用auto margins实现。

Example 2-2.png

Example 2-3.png

Example 2-4.png

关于auto margins算法的一点想法

下面的内容有点学术啦，请做好心理准备～

Flex布局算法中对auto margins的对齐原理有如下解释，原文是英文，我尽量准确翻译：

在主轴（main axis）方向

如剩余空间为正数，则剩余空间会被平均分配在拥有主轴方向auto margin(s)的flex元素之间。

如剩余空间为负数，则将主轴方向的auto margin(s)设定为‘0’。

在侧轴（cross axis）方向

如果拥有侧轴方向auto margins(s)的元素的outer cross size（计算时将auto margins(s)作‘0’计算）小于其所在的flex line的cross size，则将剩余空间平均分配给auto margin(s)。

否则，如果侧轴方向block-start或inline-start方向的margin为auto，则将其设定为‘0’。设置相对方向的margin值，使此元素的outer cross size等于其所在的flex line的cross size。

我不太明白算法解释最后一句“设置相对方向的margin值，使此元素的outer cross size等于其所在的flex line的cross size”的意思。

补充知识：

在CSS Writing Modes中，block-start方向是根据书写模式属性（writing-mode）定义的block flow direction的开始端，在上至下书写模式下定义为顶端，在左至右书写模式下定义为左端，在右至左书写模式下定义为右端，inline-start方向由inline base direction属性定义，左至右则开始端定义为左端，右至左则开始端定义为右端。

从字面上分析，刚刚那最后一句的意思似乎是如果flex元素超高10px，相对方向的margin则会被设置为-10px，从而将outer cross size减小10px至与flex line的cross size相等，但我目前不知该如何核实这个理解。能够看到的结果是，侧轴（cross axis）方向的margin: auto与align-self: center产生了不同的效果。

Example 3: auto margins 与align-self: center的区别。

<head>
  <style>
    .container {
      height：300px;
      margin: 0 auto;
    }

    .box {
      width: 160px;
      height: 300px;
      display: flex;
      flex-direction: column;
      background-color: cornflowerblue;
      padding: 10px;  
      margin: 30px auto;
    }
    
    .item {
      background-color: lavender;
      height: 50px;
      margin-top: auto;
      margin-bottom: auto;
      align-self: flex-start;
      text-align: center;
      line-height: 50px;
      padding-left: 10px;
      padding-right: 10px;
    }
    
    .a {
      margin: auto;
    }
    
    .b {
      align-self: center;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="box">margin: auto
      <div class="item a">Item_1</div>
      <div class="item a">Item_2_LongLongLongLongLongLong</div>
      <div class="item a">Item_3</div>
    </div>
    <div class="box">align-self: center
      <div class="item b">Item_4</div>
      <div class="item b">Item_5_LongLongLongLongLongLong</div>
      <div class="item b">Item 6</div>
    </div>
  </div>
</body>

Example 3.png

在这个例子中，两个蓝色box的cross axis均为水平方向，上方box中元素使用margin: auto进行水平居中，下方box中元素使用align-self: center进行水平居中。margin: auto（margin-left: auto或margin-right: auto也可实现，但将会影响普通长度元素的水平居中）可将超长元素block-start方向、即左边的margin设定为‘0’，从而使元素具有完全的可读性；而align-self: centre将超长元素进行了绝对居中，在不需要可读性的情况下可能更有优势。

看过这些例图，auto margins的使用方法应该不会忘了吧。最后再来提个醒儿：

auto margins仅针对当前的flex item，对其子元素无效。
在计算flex-bases与flexible lengths （main size与cross size）时，auto margins取值为0。
auto margins优先于justify-content与align-self。由于相应方向上的剩余空间已分配给auto margins，justify-content与align-self将无效。
auto margins对溢出的（overflowing）flex item无效。

//如需转载，请联系作者//

用auto margins来布局flexbox吧！以及学术一点儿

猜你喜欢

热点阅读