前端开发攻略---利用Flexbox和Margin实现智能布局：如何巧妙分配剩余空间，让你的网页设计更上一层楼？

作者：知新_RL | 2024-04-11 17:58:20

踩

1、演示

2、flex布局

Flex布局是一种用于Web开发的弹性盒子布局模型，它可以让容器内的子元素在空间分配、对齐和排列方面具有更大的灵活性。以下是Flex布局的基本用法：

容器属性：

display: flex;：将容器指定为Flex布局。
flex-direction：定义主轴的方向。可以是row（默认值，水平方向）、row-reverse（水平方向反向）、column（垂直方向）或column-reverse（垂直方向反向）。
flex-wrap：定义子元素如何换行。可以是nowrap（默认，不换行）、wrap（换行）、wrap-reverse（反向换行）。
justify-content：定义子元素在主轴上的对齐方式。可以是flex-start（默认，起点对齐）、flex-end（终点对齐）、center（居中对齐）、space-between（两端对齐，项目之间的间隔相等）、space-around（项目两侧的间隔相等，项目与项目之间的间隔是它们的间隔的一半）或space-evenly（项目之间的间隔相等）。
align-items：定义子元素在交叉轴上的对齐方式。可以是flex-start（起点对齐）、flex-end（终点对齐）、center（居中对齐）、baseline（基线对齐，以第一行文字的基线对齐）、stretch（默认，拉伸填充容器）。
align-content：定义多根轴线的对齐方式。只有一根轴线时不起作用。可以是flex-start、flex-end、center、space-between、space-around或stretch（默认）。

项目属性：

order：定义项目的排列顺序，默认为0，可以为负值。
flex-grow：定义项目的放大比例，默认为0，即即使存在剩余空间，也不放大。
flex-shrink：定义项目的缩小比例，默认为1，即如果空间不足，项目将缩小。
flex-basis：定义项目在主轴上的初始大小，默认为auto，即根据内容自动调整大小。
flex：是flex-grow、flex-shrink和flex-basis的简写，默认值为0 1 auto。可以设置为none（等同于0 0 auto）或auto（等同于1 1 auto）。
align-self：单独定义某个项目在交叉轴上的对齐方式，覆盖容器的align-items属性。

Flex布局非常适用于构建响应式网页布局，可以轻松实现各种复杂的排版效果，并且在移动端和PC端都有良好的兼容性。

4、margin

margin是CSS中用来设置元素外边距的属性，它控制着元素与周围元素之间的空间间隔。margin属性可以应用于所有HTML元素，其主要作用是控制元素之间的间距和布局。

以下是margin的基本用法：

设置单个方向的外边距：

margin-top：设置元素的上外边距。
margin-right：设置元素的右外边距。
margin-bottom：设置元素的下外边距。
margin-left：设置元素的左外边距。

设置所有方向的外边距：

margin：通过设置一个值，可以同时设置元素的上、右、下、左四个方向的外边距。例如，margin: 10px;表示上、右、下、左外边距都是10像素；或者可以分别指定四个方向的值，例如，margin: 10px 20px 15px 25px;分别表示上、右、下、左外边距的数值。

负外边距：

通过设置负数值的外边距，可以让元素在页面布局中产生重叠或调整位置的效果。

注意事项：

外边距会影响元素的宽度和高度，通常在进行布局设计时需要考虑外边距的影响。
外边距会叠加（collapse），即当两个相邻元素的外边距重叠时，最终的外边距取两者中的最大值。

通过合理地运用margin属性，可以实现页面元素之间的间距调整和布局设计，从而达到更好的视觉效果和用户体验。

3、代码


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      body {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
      }
      .container {
        width: 800px;
        border: 1px solid #266fff;
        background-color: #eee;
        padding: 10px;
        display: flex;
        margin-bottom: 10px;
      }
      .item {
        width: 50px;
        height: 50px;
        margin-left: 10px;
      }
      .item:nth-child(1) {
        margin-left: 0px;
        background-color: saddlebrown;
      }
      .item:nth-child(odd) {
        background-color: rgb(19, 139, 55);
      }
      .item:nth-child(even) {
        background-color: rgb(214, 246, 6);
      }
      .container5 {
        flex-wrap: wrap;
      }
      .container5 .item {
        --n: 7;
        --space: calc(100% - var(--n) * 50px);
        --h: calc(var(--space) / var(--n) / 2);
        margin: 10px var(--h);
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="item" style="margin: auto"></div>
    </div>
    <div class="container">
      <div class="item"></div>
      <div class="item"></div>
      <div class="item" style="margin-left: auto"></div>
    </div>
    <div class="container">
      <div class="item"></div>
      <div class="item"></div>
      <div class="item" style="margin-left: auto"></div>
      <div class="item"></div>
    </div>
    <div class="container">
      <div class="item"></div>
      <div class="item"></div>
      <div class="item" style="margin: auto"></div>
      <div class="item"></div>
      <div class="item"></div>
    </div>
    <div class="container container5">
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
    </div>
  </body>
</html>

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/知新_RL/article/detail/406520