Flex布局到底解决了什么问题

时间 2019-12-05

标签 flex 布局到底解决什么问题栏目 Flex 繁體版

原文原文链接

Flex布局到底解决了什么问题--这一直是让我以为困惑的地方。javascript

响应式设计出现好多年，这些年咱们一直使用浮动与block来布局，也没以为什么很差。。css

flex的教程看了挺多，但理解老是很模糊。这几天我从另外一个角度开始了flex的学习，在实际对比了flex和普通布局后，发现它不只更加符合响应式设计的特色，并且之前的一些布局难点也迎刃而解了。html

一种似曾熟悉的感受袭来，就像在我使用gulp后忽然明白了grunt为何会被取代同样。java

如下全当总结git

1.如何在一个超短的页面中，使footer固定在最下方。代码以下github

<body>
    <div class="wrapper">
        <p>404 not found</p>
    </div>
    <div class="footer">
        <p>Copyright (c) 2008</p>
    </div>
</body>

正如404这种页面，通常的解决方案为以下。经过设置负边距来容纳页脚，达到全屏的效果。web

.wrapper {
  height: 100%;
  margin: 0 auto -2em;
}
.footer {
  height: 2em;
}

利用flex自己自适应的特色以下，达到的效果一致。但不用手动设置footer的宽高，完美实现footer放置在最下面的需求。gulp

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

2.如何使表单对齐。app

<div class="cover">
  <form class="flex-form">
      <input type="search" placeholder="Where do you want to go?">
      <label for="from">From</label>
      <input type="date" name="from">
      <label for="from">To</label>
      <input type="date" name="to">
      <select name="" id="">
        <option value="1">1 Guest</option>
        <option value="2">2 Guest</option>
      </select>
      <input type="submit" value="Search">
  </form>
</div>

一个长表单。input输入框有大有小不整齐，标签文字与表单文字没有对齐。按照普通方案搞定这些将很是麻烦：涉及到元素高度，文字居中。。。ide

.cover {
  display: flex;
}
.flex-form {
  display: flex;
  align-items: center;
  border: 1px solid black;
}

/*如下为完善效果所需*/
.flex-form > * {
  border: 0;
  padding:10px;
  font-size: 20px;
  line-height: 50px;
  outline: 0;
  border-right:1px solid rgba(0,0,0,0.2);
  -webkit-appearance:none;
}

.flex-form > *:not([type="date"]) {
  border-top:1px solid white;
  border-bottom:1px solid white;
}

.flex-form input[type="submit"] {
  background:#FF5A5F;
  border-top: 1px solid #FF5A5F;
  border-bottom: 1px solid #FF5A5F;
  color:white;
}

仍是利用flex自适应高度的特色，咱们没有设置任何一个框的宽高，就达到了文字所有水平对齐的效果。

3.响应式设计

若是上面两个例子依然让你以为flex没什么大不了的话，第三个例子绝对会让你大吃一惊。
在设计页面时，为了达到响应式的效果，咱们在最初布局时就须要考虑到在移动端的显示效果。状况每每是当须要移动端实现某些效果时，才发现html里的结构已经固定了，某些板块布置起来怎么写css都没法实现。有时耗费的时间比开发两套页面还要多。但flex布局的出现使css有了改变html结构的能力。footer板块能够放置到header板块之上还不用改变html结构，就这么神奇！

<div class="wrapper">
    <header class="top">
        <h1>What The Flexbox?!</h1>
    </header>
    <nav class="flex-nav">
        <a href="#" class="toggleNav">☰ Menu</a>
        <ul>
            <li><a href="#">Item 01</a></li>
            <li><a href="#">Item 02</a></li>
            <li><a href="#">Item 03</a></li>
        </ul>
    </nav>
</div>
<script type="text/javascript">
  const toggle = document.querySelector('.toggleNav');
  const menu = document.querySelector('.flex-nav ul')
  toggle.addEventListener('click', () => menu.classList.toggle('open'));
</script>

这个页面由两部分组成。标题是第一部分，菜单是第二部分，但在移动端呈现时每每是菜单在最上面，之前的css是没法实现这种效果的
。利用flex能够设置子元素的排序，这个特性能够把页面中的块变得像积木同样--咱们想怎么搭就怎么搭，随便你排列组合。

.wrapper {
  display: flex;
  flex-direction: column;
}
.top {
  text-align: center;
}
h1 {
  padding: 40px 0;
  background-image: linear-gradient(60deg, #2bcfd8 0%, #93d02b 100%);
}
a {
  display: inline-block;
  text-decoration: none;
  background-image: linear-gradient(260deg, #2376ae 0%, #c16ecf 100%);
  padding: 20px 5px;
  text-align: center;
  width: 100%;
}
.flex-nav ul {
  display: flex;
  margin: 0 auto;
  border:1px solid black;
}
.toggleNav{
  display: none;
}

ul li{
  flex: 3;
}


@media all and (max-width:500px) {
  .wrapper > * {
    order: 999;
  }
  .toggleNav {
    display: block;
  }
  .flex-nav {
    order: 1;
  }
  .flex-nav ul{
    display: none;
  }
  .top {
    order: 2;
  }
  .flex-nav .open {
    display: block;
  }
}

在pc端时，标题在上方菜单在下方，当屏幕小于500px时，菜单移动到最上面。
这个事例简单介绍了flex灵活的排列方式，即使你有 10 个内容块，在响应式设计的时候也能够随意更改他们的排序，达到任何你想要的效果。省时省力。

固然flex远远不止这些，但它的出现解决了很多css长久以来积累下的布局疼点。利用浮动和行内块来布局致使的各类BUG层出不穷，由于它们的初衷均不是用来布局。在响应式设计已经成为网站标配的情况下，浮动和行内块越显得力不从心，这也是flex出现的缘由。flex更符合响应式的特色，你从不用给它设置一个固定的宽高，它就能达到你想要的效果。

分享两个flex学习资源：

css-tricks flex彻底指南图多字少，清晰明了。
github上的一个项目 flex解决了哪些问题告诉你flex到底解决了哪些以往css很难解决或没法解决的问题。