How to use CSS and Flexbox to implement responsive layout of images and text at different screen sizes?

CSS Responsive Layout: The perfect combination of pictures and text

Creating responsive web layouts that allow images and text to be perfectly presented at different screen sizes is a common challenge in front-end development. This article will explain in detail how to use CSS's Flexbox and media query to achieve the effect of displaying pictures and text side by side on larger screens, while on smaller screens (such as mobile phones), the images are on top and text are on bottom.

Requirement background

The goal is to use CSS and Flexbox to build a layout with fixed-size pictures (200x200 pixels) and a piece of text. On a large screen, text takes up the remaining space; on a small screen, the image is located above the text.

Problem and Solution: The Importance of Viewport

Previous attempts may have encountered the problem that the layout does not change with the screen width, which is usually due to the lack of viewport settings. The viewport is the area in the browser window that displays the content of the web page. Correct viewport settings ensure that web pages are rendered and scaled correctly on different devices.

Complete solution: HTML and CSS code

In order to achieve responsive layout, it is necessary to Partially add the viewport meta tag and adjust the CSS code:

 


    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Flexbox layout examples</title>
    <style>
        .container {
            display: flex;
        }

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

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

        /* 小屏幕媒体查询 (例如手机) */
        @media (max-width: 600px) {
            .container {
                flex-direction: column; /* 垂直布局 */
            }
            .text {
                flex: initial; /* 取消 flex 属性，让文本自适应宽度 */
            }
        }
    </style>


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

Code explanation:

• meta name="viewport" : Set the viewport to make the page scale according to the device width.
• .container : Use Flexbox layout.
• .image : Set the image size.
• .text : flex: 1; Make text occupy the remaining space.
• @media (max-width: 600px) : Media query. When the screen width is less than 600px, set flex-direction to column to achieve vertical layout, and remove the flex attribute of .text to allow the text content to adapt to the width.

Through the above settings, the web page layout will be automatically adjusted according to the screen size to achieve a perfect responsive effect. Remember, you can adjust the value of max-width according to actual needs.

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