前端 CSS 经典：flex + margin 布局

前言：如今我们布局大多时候都是用的 flex 布局，但是有时我们也可以使用 margin 小技巧去完成布局。在弹性盒中当我们把 margin 某一个方向上设置为 auto，他的含义是用 margin 吃掉这个方向的剩余空间。

1. 元素垂直和水平居中


html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta
      name="viewport"
      content="initial-scale=1.0, user-scalable=no, width=device-width"
    />
    <title>documenttitle>
    <style>
      .box {
        width: 500px;
        height: 500px;
        border: 1px solid;
        display: flex;
      }
      .item {
        width: 100px;
        height: 100px;
        background: blue;
        margin: auto;
      }
    style>
  head>
  <body>
    <div class="box">
      <div class="item">div>
    div>
    <script>script>
  body>
html>

2. 三个子元素，两个居左一个居右


html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta
      name="viewport"
      content="initial-scale=1.0, user-scalable=no, width=device-width"
    />
    <title>documenttitle>
    <style>
      .box {
        width: 500px;
        height: 500px;
        border: 1px solid;
        display: flex;
      }
      .item {
        width: 100px;
        height: 100px;
        background: blue;
      }
    style>
  head>
  <body>
    <div class="box">
      <div class="item">div>
      <div class="item">div>
      <div class="item" style="margin-left: auto">div>
    div>
    <script>script>
  body>
html>

相关阅读:
java实现阿里云rocketMQ消息的发送与消费(http协议sdk)
商品推荐系统浅析
【RocketMQ】MMAP零拷贝在RocketMQ中的运用
续航605km，价格 11.77 万起带激光雷达，你卷我也卷
TrueLicense源码解析-寻找license安装后存放的位置
人工智能导论网课笔记与实战
使用pdfjs实现在线预览pdf
香港科技大学广州｜机器人与自主系统学域博士招生宣讲会—武汉大学专场！！！（暨全额奖学金政策）
fastdds库架构
餐饮新零售增长：真功夫集团如何组织各事业部实现规模化增长运营能力

原文地址：https://blog.csdn.net/weixin_64684095/article/details/139845274