用弹性布局巧做版面设计

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

请马上登录，朋友们都在花潮里等着你哦：）

您需要登录才可以下载或查看，没有账号？立即注册

x

本帖最后由马黑黑于 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 编辑

Logo图片

宣传图片

后台邮箱等

中部：正文部分

中部：右侧边栏

底部：细节省略

马黑黑 · 发表于 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，少了任何一样都是有缺陷的。