flexbox不能做的一件事

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了flexbox不能做的一件事相关的知识,希望对你有一定的参考价值。

看起来flexbox能解决任何问题。垂直居中。告别浮动。列布局变得异常简单!可作者发现了flexbox的阿喀琉斯之踵——row spans.
 
flexbox——这个神奇的样式正在解放我们,让工作更加轻松。想象一下:没有浮动,没有设置margin为负值以使得一些基础样式正常工作的怪异CSS代码。你在过去十年间学到的所有技巧此刻可以完全抛弃,因为你不需要它们。
 
想实现在一个高度未知的容器里垂直居中的效果?flexbox只用了一行代码就能实现!
代码如下:
 
.container{
    display: flex;
}
.centered{
    flex: 1;
}

html代码如下:

<div class="container">
<div class="centered">
This is centered
</div>
</div>
 
很明显比几年前的CSS实现垂直居中的方法简单的多:这些方法包括设置负margin值和利用tabel-cell实现垂直居中。而且,对CSS而言比垂直居中更难实现的是三列等高布局。目前没有一种优秀的方法可以实现它,直到flexbox出现。
 
想实现三列等高且宽度占容器比例相同的布局?HTML代码如下:
 
<div class="container">
  <div class="column" style="background: red">
    Column 1
  </div>

  <div class="column" style="background: green">
    Column 2
  </div>

  <div class="column" style="background: blue">
    Column 3
  </div>
</div>

CSS代码如下:

.container {
  display: flex;
  width: 100%;
  height: 300px;
}

.column {
  flex: 1;
  color: white;
}

(代码链接:http://codepen.io/swizec/pen/vXONdj/

很简单对吧?将container的display属性设为flex,之后设置每个子div占据相同水平空间。在链接中你可以尝试改变窗口大小,效果不变。
 
Row Span in Flexbox
 
当设计师想到了这样的效果:
 
技术分享

 

这是一个由大小相同的按钮组成的网格,可是你却为之挠头。
 
你知道按钮必须是可配置的,也就是说你的代码能随不同的配置改变。按钮的标签内容与颜色等均可改变。
 
这些按钮相当于数据。你得到一个标签名的数组,给这些标签赋予按钮的样式。最理想的是遍历它们,在HTML中创建一个按钮列表,用CSS实现布局。
 
flex-flow: row wrap很好用,它可实现元素的换行效果。HTML代码如下:
 
<div class="container">
    <div class="button" style="background: red;">
      Column 1
    </div>

    <div class="button" style="background: green">
      Column 2
    </div>

    <div class="button" style="background: blue">
      Column 3
    </div>

   <div class="button" style="background: blue">
      Column 4
    </div>

   <div class="button" style="background: red">
      Column 5
    </div>

    <div class="button" style="background: green">
      Column 6
    </div>

    <div class="button" style="background: green;">
      Column 7
    </div>

    <div class="button" style="background: blue">
      Column 8
    </div>   

    <div class="button" style="background: red">
      Column 9
    </div>
</div>

CSS代码如下:

.container {
  display: flex;
  width: 100%;
  height: 300px;
  flex-wrap: wrap;
}

.button {
  flex: 0 33.3%;
  color: white;
}

(代码链接:http://codepen.io/swizec/pen/XjbrLP/

效果如下:

技术分享

 

实现这样的分行布局似乎一点也不难,可设计师想要第一个元素跨两行。
flexbox实现跨行效果......现在你彻底混乱了,如果你用的方法和我一样,那么得到的结果应该是这样:
 
技术分享

 

你必须承认:flexbox的跨行效果不能这样实现。你应该忍耐这种需求,将内容放在列元素中。
 
代码如下:
 
<div class="container">
  <div class="column">
    <div class="button rowspan" style="background: red;">
      Column 1 - rowspan
    </div>

    <div class="button" style="background: green;">
      Column 7
    </div>
  </div>

  <div class="column">
    <div class="button" style="background: green">
      Column 2
    </div>

    <div class="button" style="background: red">
      Column 5
    </div>

    <div class="button" style="background: blue">
      Column 8
    </div>
  </div>

  <div class="column">
    <div class="button" style="background: blue">
      Column 3
    </div>

    <div class="button" style="background: green">
      Column 6
    </div>

    <div class="button" style="background: red">
      Column 9
    </div>
  </div>
</div>

CSS代码:

.container {
  display: flex;
  width: 100%;
  height: 300px;
  flex-wrap: wrap;
}

.column {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.button {
  flex: 1;
  color: white;
}

.button.rowspan {
  flex: 2;
}

(代码链接:http://codepen.io/swizec/pen/NRqGLQ/) 

用flexbox列布局实现,即分为三列。设置第一列的第一个元素占列的2/3,第二个元素占1/3。设置其他列的元素均占列的1/3。这样就实现了第一个元素的跨行效果。如下:

技术分享

 

 看,flexbox的跨行效果还不算太难。

注:本文为译文。

原文链接:https://dzone.com/articles/the-one-thing-flexbox-cant-do

 

 

以上是关于flexbox不能做的一件事的主要内容,如果未能解决你的问题,请参考以下文章

尹伊:Datawhale做的一件事

我对Sapper / Svelte有一些疑问

Kotlin !!操作员使用使代码不清晰

空指针异常 - 片段活动

我需要为我所做的每一件事都创建一个新的主要功能吗? C++

PHP 字符串回显结束前的一件事