论坛 › 马黑黑教程专版 › 用弹性布局巧做版面设计

马黑黑 发表于 2022-1-5 08:19

用弹性布局巧做版面设计

本帖最后由 马黑黑 于 2022-1-5 09:58 编辑

flex属性引入CSS之前，做一个三行的版面设计有点繁琐，表格好控制但代码多，且表格装载整个网页不科学，而定位、漂浮的盒子实现法是最常见的，它的问题是要精准计算，每一个细节的改动都可能造成版面的凌乱，很考验人。flex或许可以让我们抛却这些烦恼。

flex有弹性之意，设计flex这个属性自然也是用这层意思，让元素的堆叠是可以有弹性的，从而有些时候可以忽略某个元素尺寸（当然不能完全忽略），布局工作可以轻松很多。

以上、中、下三行总布局为例，我们可以先设置一个大容器，它垂直装载顶部、中部和底部三个“行”：

#大容器 {
    margin: 0 auto;
    width: 800px;
    display: flex; /* 指定用弹性布局 */
    flex-direction:column; /* 垂直方向布局/*
}

大容器就简单设计好了，display 和 flex-direction 是弹性布局的关键。下面接着定义三个“行”，它们也是容器，比如顶部：

#顶部 {
    width: 200px;
    height: 120px;
    display: flex;
    flex-direction: row; /* 水平方向布局/*

}

顶部又分割成左中右，左边放置logo，中间放个广告什么的，右边则是登录、邮箱等信息什么的都可以，细节设计这里不展开。

中部是页面的主阵地，一般分左右两列也可以多分；底部也有相应的布局设计。

这些都弄好之后，下面就是 HTML 代码了（这里仅给出样式）：

<div id="大容器">
    <div id="顶部">
      <div>左边</div>
      <div style="flex-grow:2;">中间</div>
      <div>右边</div>
    </div<
    <div id="中部">
      <div>左边栏</div>
      <div style="flex-grow:2;">右边栏</div>
    </div>
    <div id="底部">
       <div>上边栏</div>
      <div>下边栏</div>
    </div>
</div>

上述HTML代码中，红色部分利用了子元素的 flex-grow 属性，让它们抢占剩余的空间。比如顶部，左右设定固定宽度，中间加个 flex-grow 值，这顶部就会布满元素；中部也是用如此思路。这就是弹性的表现之一：元素可固定尺寸，又能通过给子元素添加相应属性令其自由伸缩。

提示：论坛做帖尽量不用 id ，建议用 class，故此，#大容器 可以改为 .大容器。

马黑黑 发表于 2022-1-5 09:51

本帖最后由 马黑黑 于 2022-1-5 10:42 编辑 <br /><br /><style type="text/css">
.大容器 {
        margin: 0 auto;
        width: 720px;
        border:1px solid red; /* 测试用 */
        display: flex;
        flex-direction: column;
}

.大容器 > div { margin: 4px; padding: 4px; border: 1px solid green; } /* 测试用 */

.顶部 {
        display: flex;
        flex-direction: row;
}

.顶部 > div { margin: 4px; padding: 4px; border: 1px solid yellow; } /* 测试用 */

.顶左 { width: 200px; height: 100px; }

.顶中 {}

.顶右 { width: 120px; }

.中部 {
        display: flex;
        flex-direction: row;
}

.中部 > div { margin: 4px; padding: 4px; border: 1px solid gray; } /* 测试用 */

.中左 { height: 260px; } /* 测试用 */

.中右 { width: 200px; }

.变长 { flex-grow: 2; }

</style>

<div class="大容器">

        <div class="顶部">
                <div class="顶左">Logo图片</div>
                <div class="顶中 变长">宣传图片</div>
                <div class="顶右">后台邮箱等</div>
        </div>
        <div class="中部">
                <div class="中左 变长">中部：正文部分</div>
                <div class="中右">中部：右侧边栏</div>
        </div>
        <div>底部：细节省略</div>
</div>

马黑黑 发表于 2022-1-5 09:53

本帖最后由 马黑黑 于 2022-1-5 10:41 编辑

二楼完整代码分享：

<style type="text/css">

.大容器 {
      margin: 0 auto;
      width: 720px; /* 论坛测试用的宽度 */
      border:1px solid red; /* 测试用 */
      display: flex;
      flex-direction: column;
}

.大容器 > div { margin: 4px; padding: 4px; border: 1px solid green; } /* 测试用 */

.顶部 {
      display: flex;
      flex-direction: row;
}

.顶部 > div { margin: 4px; padding: 4px; border: 1px solid yellow; } /* 测试用 */

.顶左 { width: 200px; height: 100px; }

.顶中 {}

.顶右 { width: 120px; }

.中部 {
      display: flex;
      flex-direction: row;
}

.中部 > div { margin: 4px; padding: 4px; border: 1px solid gray; } /* 测试用 */

.中左 { height: 260px; } /* 测试用 */

.中右 { width: 200px; }

.变长 { flex-grow: 2; }

</style>

<div class="大容器">

      <div class="顶部">
                <div class="顶左">Logo图片</div>
                <div class="顶中 变长">宣传图片</div>
                <div class="顶右">后台邮箱等</div>
      </div>

      <div class="中部">
                <div class="中左 变长">中部：正文部分</div>
                <div class="中右">中部：右侧边栏</div>
      </div>

      <div>底部：细节省略</div>

</div>

马黑黑 发表于 2022-1-5 10:06

前端开发就是把设计图纸切割成一个一个的元素，然后用HTML、CSS、JavaScript来布局元素令其和图纸上设计的一样，并实现所有内在功能。

小辣椒的代码里有用 jQuery 做播放器的，那是基于 JavaScript 封装的 JS 功能模块大集合，很厉害的。

马黑黑 发表于 2022-1-5 10:10

但 JavaScript 不是 HTML 必须的，唯 CSS 不能缺少，否则 HTML 的容颜就不仅是素面朝天了。当然，JavaScript 能让 HTML 更具有动感和交互功能，也很重要。HTML，CSS，JavaScript犹如 office 的 Word，Excel 和 PowerPoint，少了任何一样都是有缺陷的。

加林森 发表于 2022-1-5 11:10

谢谢老黑，又一教程，讲得很清楚。{:4_199:}

马黑黑 发表于 2022-1-5 12:04

加林森 发表于 2022-1-5 11:10
谢谢老黑，又一教程，讲得很清楚。

这是个大概框架，细节需要下功夫

红影 发表于 2022-1-5 14:24

让各种元素各在其位，各司其职，这就是版面设计的根本吧，而弹性元素能很好地实现这个目的。

马黑黑 发表于 2022-1-5 14:26

红影 发表于 2022-1-5 14:24
让各种元素各在其位，各司其职，这就是版面设计的根本吧，而弹性元素能很好地实现这个目的。

flex主要是能较好处理一些不好预测的尺寸问题

红影 发表于 2022-1-5 14:27

马黑黑 发表于 2022-1-5 10:06
前端开发就是把设计图纸切割成一个一个的元素，然后用HTML、CSS、JavaScript来布局元素令其和图纸上设计的 ...

以前一直觉得设计版面无法想象的难，看了黑黑的介绍，忽然有点知道其中的原理了{:4_204:}

红影 发表于 2022-1-5 14:28

马黑黑 发表于 2022-1-5 10:10
但 JavaScript 不是 HTML 必须的，唯 CSS 不能缺少，否则 HTML 的容颜就不仅是素面朝天了。当然，JavaScrip ...

嗯嗯，知道是一回事，真的能做好是另一回事，很是需要花费工夫的事。

红影 发表于 2022-1-5 14:29

马黑黑 发表于 2022-1-5 12:04
这是个大概框架，细节需要下功夫

做得好需要花费大工夫{:4_173:}

马黑黑 发表于 2022-1-5 15:03

红影 发表于 2022-1-5 14:29
做得好需要花费大工夫

功夫大小都是功夫

马黑黑 发表于 2022-1-5 15:05

红影 发表于 2022-1-5 14:28
嗯嗯，知道是一回事，真的能做好是另一回事，很是需要花费工夫的事。

功夫也要下的

马黑黑 发表于 2022-1-5 15:14

红影 发表于 2022-1-5 14:27
以前一直觉得设计版面无法想象的难，看了黑黑的介绍，忽然有点知道其中的原理了

以前惯用的实现方法有一定难度，但 flex 是在 CSS早期版本就有的，不被主流设计重视罢了。我觉得 flex 一直是被冷落的，不知道为什么人们（包括我在内）宁可去用JS来搞对齐而不用 flex，用了flex，那些JS计算都是多余的

红影 发表于 2022-1-5 16:42

马黑黑 发表于 2022-1-5 14:26
flex主要是能较好处理一些不好预测的尺寸问题

这个帖子真好，看着这个帖子，觉得对很多页面设计都有了模糊的感觉。不像以前那样完全不知方向了。

红影 发表于 2022-1-5 16:43

马黑黑 发表于 2022-1-5 15:14
以前惯用的实现方法有一定难度，但 flex 是在 CSS早期版本就有的，不被主流设计重视罢了。我觉得 flex 一 ...

简洁而有效，这个功能真好。

加林森 发表于 2022-1-5 17:36

马黑黑 发表于 2022-1-5 12:04
这是个大概框架，细节需要下功夫

跟着你学习真好{:5_108:}

马黑黑 发表于 2022-1-5 18:06

加林森 发表于 2022-1-5 17:36
跟着你学习真好

这个帖所说的，希望能对做做帖子的布局有帮助

马黑黑 发表于 2022-1-5 18:08

红影 发表于 2022-1-5 16:43
简洁而有效，这个功能真好。

但用的人还真不多

查看完整版本: 用弹性布局巧做版面设计