首页 > itarticle > 前端经典布局

前端经典布局

admin 11月 13, 2020 0

在实际工作中，我们需要用到各种各样的布局，老套路基本都是浮动加定位，那么有没有更简单，代码更少的办法？

那么，这就是flex布局了。但是flex布局也有自己的问题，第一是兼容性问题；第二呢就是没有被广泛采用，但是现在不用，不代表将来不用，所以呢，多多了解，万一下一个项目就要用呢

另外呢，移动端是完美支持flex布局的，所以，移动端的项目可以放心大胆用。

左边或右边固定，另一边自适应布局

这个呢，在布局中也是用的居多，还有也是前端面试90%会问到的， 那么，该如何处理呢？

  • 使用传统布局方法

传统布局方法是采用padding加position,这里就不放代码，因为大家都会，主要是讲一下flex布局是如何实现的

  • 使用flex布局

思路：既然是一边固定，一边自适应，那么，就应该将一边的宽度设定为固定值，另外一边完全按照父级的宽度减去固定宽度

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
 
<style>
  #box {
    height: 100px;
    display: flex;
  }
  .left {
    flex: 1;
    background: red;
  }
  .right {
    flex: 0 0 100px;
    background: green;
  }
</style>
<div id="box">
  <div class="left">左边</div>
  <div class="right">右边</div>
</div>

以上代码就是实现右边固定，左边自适应的代码，是不是特简单

双飞翼布局

这个呢也是前端面试题被问很多的。当然，padding + position 方法实现的方法也不再赘述，直接就看flex布局是怎么实现的

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
 
<style>
  #outer{
      display: flex;
      height:50px;
  }
  .left,.right{
      width:200px;
      background: red;
  }
  .middle{
      flex-grow: 1;         
      background: yellow;
  }
  </style>
<div id="outer">
  <div class="left">left</div>
  <div class="middle">middle</div>
  <div class="right">right</div>
</div>

怎么样呢，是不是比定位的方式简单多了。

flex布局能实现的布局方式很多，只要掌握了基本的属性，以最少的代码实现想要的布局样式，是最爽不过的了

微海报分享

近期文章

近期评论

标签

热门

文章归档

分类目录

功能