CSS Flexbox实现图片等宽布局与行内显示教程

<section id="Description" class="D">
  <div class="sub-description">
    <p>Hi, I'm My name here.</p>
    <p>
      As Software Engineer, I am a passionate Software Engineer, and I am
      skilled in HTML5, CSS3, JavaScript and React.
    </p>
  </div>
  <div class="container">
    <div class="box">
        <div class="imgBox">
            <img src="img/HTML5_Logo.png" alt="HTML5 Logo">
        </div>
        <div>
            <h2>Image Titile</h2>
            <p>ABCDEFGH</p>
        </div>
    </div>
    <div class="box">
        <div class="imgBox">
            <img src="img/css3_Logo.png" alt="CSS3 Logo">
        </div>
        <div>
            <h2>Image Titile</h2>
            <p>ABCDEFGH</p>
        </div>
    </div>
    <div class="box">
        <div class="imgBox">
            <img src="img/Javascript_Logo.png" alt="JavaScript Logo">
        </div>
        <div>
            <h2>Image Titile</h2>
            <p>ABCDEFGH</p>
        </div>
    </div>
  </div>
</section>

/* 基础样式，可根据项目需求调整 */
section {
  padding: 150px;
  margin: 0;
  box-sizing: border-box;
  font-family: 'montserrat', sans-serif;
}

/* Flex容器样式 */
.container {
  display: flex; /* 启用Flexbox布局 */
  /* 默认 flex-wrap: nowrap; 确保子项不换行 */
  gap: 20px; /* 定义Flex项目之间的间距 */
  width: 1100px; /* 示例宽度，可根据实际需求调整或设置为100%实现响应式 */
  margin: 0 auto; /* 容器居中 */
}

/* Flex项目样式 */
.container .box {
  flex: 1; /* 每个box占据相同的可用空间，实现等宽 */
  min-width: 0; /* 允许flex项缩小到其内容以下，防止内容溢出 */
  /* 或者可以设置固定宽度，例如：width: 350px; */
  height: 400px; /* 示例高度，可根据需求调整 */
  position: relative; /* 为后续可能的定位或悬停效果做准备 */
  overflow: hidden; /* 隐藏超出box的内容，特别是在图片高度不一致时 */
  box-sizing: border-box; /* 边框和内边距包含在宽度内 */
}

/* 图片容器样式 */
.container .box .imgBox {
    height: 200px; /* 设定图片容器的高度，图片将在此高度内填充 */
    overflow: hidden; /* 隐藏超出图片容器的部分 */
}

/* 图片样式 */
.container .box .imgBox img {
  width: 100%; /* 图片宽度填充其父容器(.imgBox) */
  height: 100%; /* 图片高度填充其父容器(.imgBox) */
  object-fit: cover; /* 保持图片宽高比，裁剪以填充容器 */
  display: block; /* 移除图片底部可能存在的额外空间 */
}

/* 其他内容样式 */
.container .box h2,
.container .box p {
    text-align: center;
    padding: 10px 0;
}