首頁 > web前端 > html教學 > 用auto margins来布局flexbox吧!以及学术一点儿的对比研究:auto margins与align-self_html/css_WEB-ITnose

用auto margins来布局flexbox吧!以及学术一点儿的对比研究:auto margins与align-self_html/css_WEB-ITnose

WBOY
發布: 2016-06-24 11:20:00
原創
934 人瀏覽過

常见的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将超长元素进行了绝对居中,在不需要可读性的情况下可能更有优势。

什么?你们还想拿它俩和verticle-align: middle做对比?饶了我吧,关于verticle-align和baseline的确定就可以讲到明天啦~下次下次喽^_^


看过这些例图,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无效。

The end.

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

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板