How to implement responsive layout of images and text using CSS and Flexbox?

CSS and Flexbox implement responsive picture text layout

Building a responsive web layout is a core requirement in web development. This article will demonstrate how to use CSS and Flexbox to implement a responsive layout with pictures on the left (200x200 pixels) and text on the right. On a large screen, text occupies the remaining space on the right; on a small screen (such as a mobile phone), the image is displayed above the text.

The following code shows how to achieve this using Flexbox and media queries:

Initial code (there is a problem):

<meta charset="utf-8">
<title>Flexbox example</title>
<style>
  .container {
    display: flex;
    flex-direction: row; /* 默认水平布局 */
  }

  .image {
    width: 200px;
    height: 200px;
    background-color: #f0f0f0;
    margin-right: 20px; /* 图片和文本之间的间距 */
  }

  .text {
    flex: 1; /* 右侧文本占据剩余空间 */
  }

  /* 在小尺寸屏幕上媒体查询 */
  @media screen and (max-width: 600px) {
    .container {
      flex-direction: column; /* 垂直布局 */
    }

    .image {
      margin-bottom: 20px; /* 图片下方留出间距 */
    }
  }
</style>
<div class="container">
  <div class="image"></div>
  <div class="text">
    <p>lorem ipsum dolor sit amet, consistetur apiscing elit. sed consequat placerat lorem.</p>
  </div>
</div>

The problem with the above code is that the layout is not adaptable to the screen width, but is scaled equally. This is because of the missing viewport metadata settings.

Solution: Add viewport metadata and adjust CSS

To solve this problem, we need to Partially add viewport metadata tags and adjust the CSS code:

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<style>
  .container {
    display: flex;
  }

  .image {
    width: 200px;
    height: 200px;
  }

  .text {
    flex: 1;
  }

  /* 在小尺寸设备上，重置布局 */
  @media (max-width: 600px) {
    .container {
      flex-direction: column;
      /* 将布局改为垂直方向 */
    }

    .image {
      width: 200px;
      height: 200px;
    }
    .text {
      width: auto;
      /* 让元素宽度自适应 */
      height: auto;
      /* 让元素高度自适应 */
    }

    /* 取消 .text 的 flex 属性 */
    .text {
      flex: initial;
      /* 或者可以使用 flex: none; */
    }
  }
</style>
<div class="container">
  <div class="image">picture</div>
  <div class="text">text</div>
</div>

We implement a truly responsive layout by adding viewport metadata and tweaking flex properties, and changing flex-direction to column in small screen situations. The layout will now be adaptively adjusted according to the device's screen width.

The above is the detailed content of How to implement responsive layout of images and text using CSS and Flexbox?. For more information, please follow other related articles on the PHP Chinese website!