深入浅出了解Flex弹性布局（一）

最新推荐文章于 2024-04-03 07:34:46 发布

VIP文章「已注销」

最新推荐文章于 2024-04-03 07:34:46 发布

阅读量718

点赞数 4

分类专栏：前端设计基础文章标签： flex

本文链接：https://blog.csdn.net/abc701110/article/details/105509379

版权

文章目录

- 一、布局回顾
- 二、弹性布局

一、布局回顾

布局从无到有经历了几个阶段：
在这里插入图片描述

1）无布局：html和web的出现源于科学文献的交流，当时人们更注重的是文字的传达，这一时期人们注重的是文字、文本的排版，比如说单个文字的粗细、斜体，段落、标题、列表如何排列等等。

2）Table布局：最基本的就是行与列，我们首先要考虑的是Table布局有多少行，然后列数最多的行有多少列，所有的行都有最多的列数。Table布局有两个问题：

行列合并：不管怎么合并，同一列上的内容宽度基本上都是一致的，无法有错落相交的感觉
表格嵌套：整体页面的复杂度会变高，不好控制

3）框架布局：分为框架集和内联框架。

框架集，即frame、frameset已经在h5的时代被淘汰了，因为它需要在框架内部嵌入新的网页，它对资源的消耗非常大。比如，做一个上左右的框架结构，我们需要嵌套三个网页，加上整体的网页，我们需要四个网页。

内联框架现在还无法逃脱，即iframe。

4）DIV+CSS：在栅格系统出现之前，出现了很多布局，比如blueprint、960gird，但是它没有考虑移动设备的应用。

5）栅格系统：以bootstrap、ElementUI为代表，提出了移动设备优先（Mobile First）、响应式布局（Responsive，根据不同的分辨率改变自己的样式），但是它们有一些共同的特点：

它们通过浮动进行布局，一个行可以把多个div横着排起来，它会带来一些影响，而且复杂度也会变高

6）Flex：弹性盒子

在这个过程中，有些技术一直在使用，一方面是浮动，一方面是定位。定位中的常用技术有：

relative：相对定位
absolute：绝对定位
fixed：固定的

我们常用的布局有两栏或三栏自适应、圣杯布局、垂直水平方向都居中

做一个布局的举例，这个布局倾向于局部布局：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>form布局</title>
    <link rel="stylesheet" href="../../../../plugin/bootstrap-3.3.7/css/bootstrap.css">
</head>
<body>
    <div class="container">
        <div class="row">
            <form class="form-horizontal">
                <div class="form-group">
                    <div class="col-md-5">
                        <div class="input-group">
                            <span class="input-group-addon">编号</span>
                            <input class="form-control"/>
                        </div>
                    </div>
                    <div class="col-md-5">
                        <div class="input-group">
                            <span class="input-group-addon">姓名</span>
                            <input class="form-control"/>
                        </div>
                    </div>
                </div>
                <div class="form-group">
                    <label class="control-label col-md-1">编号</label>
                    <div class="col-md-4">
                        <input class="form-control"/>
                    </div>
                    <label class="control-label col-md-1">姓名</label>
                    <div class="col-md-4">
                        <input class="form-control"/>
                    </div>
                </div>
                <div class="form-group">