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

CSS Flexbox Responsive Layout: The Perfect Combination of Images and Text

It is crucial to build adaptive web layouts to deal with different screen sizes. This article will demonstrate how to use CSS Flexbox to achieve a common layout requirement: fixed-size pictures on the left and adaptive text content on the right. On widescreen devices, text occupies the remaining space; on narrowscreen devices (such as mobile phones), images are displayed above the text.

Challenge: Implementing adaptive layout of screen size

Target: Use the Flexbox layout, displaying a 200x200 pixel image on the left and text on the right. Under the large screen, text fills the remaining space; under the small screen, the picture is located above the text.

Previous attempts (such as code generated by ChatGPT) may have problems: the layout is only scaled equally and cannot be dynamically adjusted according to the screen size.

Solution: Cleverly use viewport metadata and media query

The key is: add viewport metadata and media queries.

First, in HTML Partially add viewport metadata:

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

This line of code tells the browser that the page width should match the device width, with the initial scaling ratio of 1.0, ensuring responsive effects.

Secondly, adjust the CSS code and use media query to control the layout under different screen sizes:

 .container {
  display: flex;
}

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

.text {
  flex: 1; /* occupy the remaining space*/
}

@media (max-width: 600px) { /* for small screen devices*/
  .container {
    flex-direction: column; /* Change the layout to vertical*/
  }
  .text {
    flex: initial; /* Cancel the flex attribute to adapt the text width*/
  }
}

HTML structure example:

<div class="container">
  <div class="image">picture</div>
  <div class="text">Text content</div>
</div>

Through the above adjustments, the layout will change dynamically according to the screen width. Under the large screen, the pictures and text are arranged horizontally; under the small screen, the pictures are located above the text, perfectly adapted to different devices.

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