访客

Flex 各种常用布局示例

967 大谋儿 知识探索

一、传统布局与 flex 布局

传统布局:

  • 兼容性好

  • 布局繁琐

  • 局限性,不能在移动端很好的布局

flex 弹性布局

  • 操作方便,布局极为简单,移动端应用很广泛

  • IE 10 (含)以下浏览器支持情况较差

建议:

1. 如果是 PC 端页面布局,我们还是使用传统布局
2. 如果是移动端布局或者不考虑兼容性问题的 PC 端页面布局,我们还是使用 flex 弹性布局

布局原理:flex 是 flexible Box 的缩写,意为“弹性布局”,用来为盒状模型提供最大的灵活性,任何一个容器都可以指定为 flex 布局。

二、开始学习 Flex 布局

以下由 6 个属性是对父元素设置的:

  • flex-direction:设置主轴的方向

  • justify-content:设置主轴上的子元素排列方式

  • flex-wrap:设置子元素是否允许换行

  • align-content:设置侧轴上的子元素的排列方式(多行)

  • align-items:设置侧轴上的子元素排列方式(单行)

  • flex-flow:复合属性,相当于同时设置了 flex-direction 和 flex-wrap

2.1 基础排列

Flex 各种常用布局示例 知识探索

<style>
        .card {
          background-color: #91d5ff;
          width: 100px;
          height: 100px;
          margin: 4px;
        }
</style>
      
<div style="display: flex; background-color: #e6f7ff">
        <div class="card">1</div>
        <div class="card">2</div>
        <div class="card">3</div>
</div>

2.2 垂直排列

Flex 各种常用布局示例 知识探索

        <style>
        .card {
          background-color: #91d5ff;
          width: 100px;
          height: 100px;
          margin: 4px;
        }
      </style>
      
      <div style="display: flex; flex-direction: column; background-color: #e6f7ff">
        <div class="card">1</div>
        <div class="card">2</div>
        <div class="card">3</div>
      </div>

2.3 靠末尾对齐(靠右、靠下)

Flex 各种常用布局示例 知识探索

        <style>
        .card {
          background-color: #91d5ff;
          width: 100px;
          height: 100px;
          margin: 4px;
        }
        </style>
        
        <div style="display: flex; justify-content: flex-end; background-color: #e6f7ff">
          <div class="card">1</div>
          <div class="card">2</div>
          <div class="card">3</div>
        </div>

2.4 中间对齐

Flex 各种常用布局示例 知识探索

        <style>
        .card {
          background-color: #91d5ff;
          width: 100px;
          height: 100px;
          margin: 4px;
        }
        </style>
        
        <div style="display: flex; justify-content: center; background-color: #e6f7ff">
          <div class="card">1</div>
          <div class="card">2</div>
          <div class="card">3</div>
        </div>

2.5 平分剩余空间

Flex 各种常用布局示例 知识探索

        <style>
        .card {
          background-color: #91d5ff;
          width: 100px;
          height: 100px;
          margin: 4px;
        }
        </style>
        
        <div style="display: flex; justify-content: space-around; background-color: #e6f7ff">
          <div class="card">1</div>
          <div class="card">2</div>
          <div class="card">3</div>
        </div>

2.6 两边贴边,再平均分配剩余空间

Flex 各种常用布局示例 知识探索

        <style>
        .card {
          background-color: #91d5ff;
          width: 100px;
          height: 100px;
          margin: 4px;
        }
        </style>
        
        <div style="display: flex; justify-content: space-between; background-color: #e6f7ff">
          <div class="card">1</div>
          <div class="card">2</div>
          <div class="card">3</div>
        </div>

2.7 超过空间长度,自动换行

Flex 各种常用布局示例 知识探索

        <style>
        .card {
          background-color: #91d5ff;
          width: 100px;
          height: 100px;
          margin: 4px;
        }
        </style>
        
        <div style="display: flex; flex-wrap: wrap; width: 280px; height: 400px; background-color: #e6f7ff">
          <div class="card">1</div>
          <div class="card">2</div>
          <div class="card">3</div>
        </div>

Tips:中间出现了大面积空白区域,并没有跟紧第一行进行排列,可参考示例 9. 横向 + 纵向居中(多行) 添加 align-content: flex-start; 即可解决该问题。

2.8 横向 + 纵向居中(单行)

Flex 各种常用布局示例 知识探索

        <style>
        .card {
          background-color: #91d5ff;
          width: 100px;
          height: 100px;
          margin: 4px;
        }
        </style>
        
        <div style="display: flex; justify-content: center; align-items: center; height: 400px; background-color: #e6f7ff">
          <div class="card">1</div>
          <div class="card">2</div>
          <div class="card">3</div>
        </div>

之前的示例,一直设置的都是主轴 justify-content 属性,我们再加上侧轴的 align-items 属性可以实现更多排列可能性

两者都设置为 center 则完成了整体画面居中的效果。

注意:该排列方式只适用于单行排列

2.9 横向 + 纵向居中(多行)

Flex 各种常用布局示例 知识探索

        <style>
        .card {
          background-color: #91d5ff;
          width: 100px;
          height: 100px;
          margin: 4px;
        }
        </style>
        
        <div style="display: flex; justify-content: center; align-content: center; flex-wrap: wrap; height: 400px; width: 400px; background-color: #e6f7ff">
          <div class="card">1</div>
          <div class="card">2</div>
          <div class="card">3</div>
          <div class="card">4</div>
          <div class="card">5</div>
          <div class="card">6</div>
        </div>

2.10 上下平均分配(多行)

Flex 各种常用布局示例 知识探索

        <style>
        .card {
          background-color: #91d5ff;
          width: 100px;
          height: 100px;
          margin: 4px;
        }
        </style>
        
        <div style="display: flex; justify-content: center; align-content: space-around; flex-wrap: wrap; height: 400px; width: 400px; background-color: #e6f7ff">
          <div class="card">1</div>
          <div class="card">2</div>
          <div class="card">3</div>
          <div class="card">4</div>
          <div class="card">5</div>
          <div class="card">6</div>
        </div>

2.11 上下贴到底后,再平均分配(多行)

Flex 各种常用布局示例 知识探索

        <style>
        .card {
          background-color: #91d5ff;
          width: 100px;
          height: 100px;
          margin: 4px;
        }
        </style>
        
        <div style="display: flex; justify-content: center; align-content: space-between; flex-wrap: wrap; height: 400px; width: 400px; background-color: #e6f7ff">
          <div class="card">1</div>
          <div class="card">2</div>
          <div class="card">3</div>
          <div class="card">4</div>
          <div class="card">5</div>
          <div class="card">6</div>
          <div class="card">7</div>
          <div class="card">8</div>
          <div class="card">9</div>
        </div>

2.12 flex-flow 复合属性

Flex 各种常用布局示例 知识探索

        <style>
        .card {
          background-color: #91d5ff;
          width: 100px;
          height: 100px;
          margin: 4px;
        }
        </style>
        
        <div style="display: flex-flow: column wrap; height: 400px; background-color: #e6f7ff">
          <div class="card">1</div>
          <div class="card">2</div>
          <div class="card">3</div>
          <div class="card">4</div>
          <div class="card">5</div>
        </div>

相当于同时设置了 flex-direction: column; 以及 flex-wrap: wrap; 属性的一种简写形式

父级 flex 属性示例结束提示

如果以上示例没有您想要的效果,请尝试以上相似示例并多加上一个 flex-direction: column; 来设置主轴的方向(也就是主要排列方向)

三、子项属性布局示例

3.1 flex 属性实现(圣杯布局)

实现目标:左侧占据 100px、右侧占据 100px、中间占满剩余

Flex 各种常用布局示例 知识探索

        <style>
        .card {
          background-color: #91d5ff;
          width: 100px;
          height: 100px;
          margin: 4px;
        }
        </style>
        
        <div style="display: flex; background-color: #e6f7ff">
          <div class="card" style="width: 100px; background-color: #ff7875;">1</div>
          <div class="card" style="flex: 1;">2</div>
          <div class="card" style="width: 100px; background-color: #ffc53d;">3</div>
        </div>

子项的 flex:1 属性,表示一共占用 多少份 ,这里的 1 ,即表示占掉 1 份。 因为没有其他的同级元素有赋值 flex: number 属性,所以它占满全部。
请前往 3.2.flex 属性实现平均分配 例子进行参考 flex 属性的应用

3.2 flex 属性实现平均分配

实现目标:左侧 1 /4,中间 2 /4,右边 1 /4 的宽度占比

Flex 各种常用布局示例 知识探索

        <style>
        .card {
          background-color: #91d5ff;
          width: 100px;
          height: 100px;
          margin: 4px;
        }
        </style>
        
        <div style="display: flex; background-color: #e6f7ff">
          <div class="card" style="flex: 1; background-color: #ff7875;">1</div>
          <div class="card" style="flex: 2;">2</div>
          <div class="card" style="flex: 1; background-color: #ffc53d;">3</div>
        </div>

至此,flex 常用布局就完结了, flex 的属性不止于本文档中所示。它还有其他的不太常用的属性,可以自行查阅相关文档进行学习。

THE END
相关文章
评论列表
  • 暂时还没有人评论哦,来占个沙发吧?
发布评论
提交