当前位置：首页 > news >正文

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

news 来源：原创 2024/4/25 21:04:52

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

响应式设计出现好多年，这些年我们一直使用浮动与block来布局，也没觉得什么不好。。

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

一种似曾熟悉的感觉袭来，就像在我使用gulp后突然明白了grunt为什么会被取代一样。

以下全当总结

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

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

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

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

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

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

2.如何使表单对齐。

<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输入框有大有小不整齐，标签文字与表单文字没有对齐。按照普通方案搞定这些将非常麻烦：涉及到元素高度，文字居中。。。

.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学习资源：