分项100个常见的CSS页面布局（代码+截图）

目录

第1个：一个大div中有4个小div，4个小div并列在大div中，上下左右都居中

 第2个：一个大div中有4个小div，4个小div分散并列在大div中，上下左右都居中

第3个：布局相同高度的列，也是我们业务中常见的需求，如下图所示：

 第4个：卡片布局，自动换行

---

Demo是在vue中实现的，可直接拷贝使用

第1个：一个大div中有4个小div，4个小div并列在大div中，上下左右都居中

 

<template>
  <div class="divClass">
    <div class="container">
      <div class="container_column">A</div>
      <div class="container_column">B</div>
      <div class="container_column">C</div>
      <div class="container_column">D</div>
    </div>
  </div>
</template>
<script>
export default {
  components: {},
  data() {
    return {};
  },
  beforeDestroy() {},
  created() {},
  mounted() {},
  props: {},
  methods: {},
  computed: {},
};
</script>
<style lang="scss" scoped>
.divClass {
  width: 100%;
  height: 100%;
}
.container {
  width: 100%;
  height: 400px;
  background-color: rgba(0, 255, 0, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
}
.container_column {
  height: 200px;
  width: 200px;
  font-size: 24px;
  background-color: red;
  margin: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>

 

 第2个：一个大div中有4个小div，4个小div分散并列在大div中，上下左右都居中

<template>
  <div class="divClass">
    <div class="container" v-if="1">
      <div class="container_column">A</div>
      <div class="container_column">B</div>
      <div class="container_column">C</div>
      <div class="container_column">D</div>
    </div>
  </div>
</template>
<script>
export default {
  components: {},
  data() {
    return {};
  },
  beforeDestroy() {},
  created() {},
  mounted() {},
  props: {},
  methods: {},
  computed: {},
};
</script>
<style lang="scss" scoped>
.divClass {
  width: 100%;
  height: 100%;
}

.container {
  width: 100%;
  height: 400px;
  background-color: rgba(0, 255, 0, 0.2);
  display: -webkit-flex;
  align-items: center;
  justify-content: space-around;
}

.container_column {
  height: 200px;
  width: 200px;
  font-size: 24px;
  background-color: red;
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>

 

第3个：布局相同高度的列，也是我们业务中常见的需求，如下图所示：

 

<template>
  <div class="divClass">
    <div class="container">
      <!-- 单元格-列 -->
      <div class="container__column">
        <!-- 内容封面 -->
        <div>封面：</div>

        <!-- 文字内容内容 -->
        <div class="container__content">内容：</div>

        <!-- 固定在底部的列 -->
        底部列:
      </div>
      <!--------------------------------------------------------------------------->
      <!-- 单元格-列 -->
      <div class="container__column">
        <!-- 内容封面 -->
        <div>封面：可以是个图片<br /></div>

        <!-- 文字内容内容 -->
        <div class="container__content">
          内容：<br />
          滚滚长江东逝水，浪花淘尽英雄；
          <br />是非成败转头空，青山依旧在，几度夕阳红。
        </div>

        <!-- 固定在底部的列 -->
        底部列
      </div>
      <!--------------------------------------------------------------------------->
      <!-- 单元格-列 -->
      <div class="container__column">
        <!-- 内容封面 -->
        <div>封面：</div>

        <!-- 文字内容内容 -->
        <div class="container__content">内容：</div>

        <!-- 固定在底部的列 -->
        底部列:
      </div>
      <!--------------------------------------------------------------------------->
      <!-- 单元格-列 -->
      <div class="container__column">
        <!-- 内容封面 -->
        <div>封面：</div>

        <!-- 文字内容内容 -->
        <div class="container__content">内容：</div>

        <!-- 固定在底部的列 -->
        底部列:
      </div>
      <!--------------------------------------------------------------------------->
    </div>
  </div>
</template>
<script>
export default {
  components: {},
  data() {
    return {};
  },
  beforeDestroy() {},
  created() {},
  mounted() {},
  props: {},
  methods: {},
  computed: {},
};
</script>
<style lang="scss" scoped>
.divClass {
  width: 100%;
  height: 100%;
}

.container {
  display: flex;
}

.container__column {
  flex: 1;

  /* 定于每列间隔的空间 */
  margin: 0 8px;

  /* 内容部分列布局 */
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(255, 0, 0, 1);
  background-color: rgba(0, 255, 0, 0.2);
}

.container__content {
  /* 内部部分占据剩余的高度部分 */
  flex: 1;
}
</style>

 第4个：卡片布局，自动换行

 

 

<template>
  <div class="divClass">
    <div class="cards">
      <!-- 需分配宽度给卡片单元格 -->
      <div class="cards__item">AAAA</div>

      <!-- 此处重复多个 cards__item 卡片单元格-->
      <div class="cards__item">bbbb</div>
      <div class="cards__item">bbbb</div>
      <div class="cards__item">bbbb</div>
      <div class="cards__item">bbbb</div>
      <div class="cards__item">bbbb</div>
      <div class="cards__item">bbbb</div>
    </div>
  </div>
</template>
<script>
export default {
  components: {},
  data() {
    return {};
  },
  beforeDestroy() {},
  created() {},
  mounted() {},
  props: {},
  methods: {},
  computed: {},
};
</script>
<style lang="scss" scoped>
.divClass {
  width: 100%;
  height: 100%;
}

.cards {
  display: flex;
  /* 超出容器宽度自动换行 */
  flex-wrap: wrap;
}

.cards__item {
  /* 初始化每个卡片的宽度，占据父容器的 1/4 */
  height: 200px;
  flex-basis: 24%;
  margin: 5px;
  border: 1px solid rgba(255, 0, 0, 1);
  background-color: rgba(0, 255, 0, 0.2);
  //   display: flex;
  //   align-items: center;
  //   justify-content: center;
}
</style>

参考文章：https://blog.youkuaiyun.com/Ed7zgeE9X/article/details/123038480