How to create a responsive card layout using CSS Flex layout

How to use Css Flex elastic layout to create a responsive card layout

In modern web design, responsive layout is an essential design method. Flexbox is a powerful and flexible layout model that allows us to create responsive layouts more easily. This article will introduce how to use CSS Flex elastic layout to create a simple responsive card layout and provide specific code examples.

1. Create HTML structure

First, we need to create an HTML structure that contains cards. We'll use the ul and li elements to create a card container and add some styling.

<ul class="card-container">
  <li class="card">
    <img  class="card-image lazy"  src="/static/imghwm/default1.png"  data-src="image1.jpg"  alt="How to create a responsive card layout using CSS Flex layout" >
    <div class="card-content">
      <h2 id="Card">Card 1</h2>
      <p class="card-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    </div>
  </li>
  <li class="card">
    <img  class="card-image lazy"  src="/static/imghwm/default1.png"  data-src="image2.jpg"  alt="How to create a responsive card layout using CSS Flex layout" >
    <div class="card-content">
      <h2 id="Card">Card 2</h2>
      <p class="card-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    </div>
  </li>
  <li class="card">
    <img  class="card-image lazy"  src="/static/imghwm/default1.png"  data-src="image3.jpg"  alt="How to create a responsive card layout using CSS Flex layout" >
    <div class="card-content">
      <h2 id="Card">Card 3</h2>
      <p class="card-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    </div>
  </li>
</ul>

2. Add CSS styles

Next, we need to add some CSS styles to create a flexible layout. We will use display: flex; to set the card container as a flex container and use some flex properties to control the layout of the card.

.card-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.card {
  margin: 10px;
  width: 300px;
  background-color: #f1f1f1;
  border-radius: 10px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

.card-image {
  width: 100%;
  height: auto;
  border-radius: 10px 10px 0 0;
}

.card-content {
  padding: 10px;
}

.card-title {
  font-size: 20px;
  margin-top: 0;
}

.card-description {
  font-size: 14px;
}

In the above code, we use justify-content: center; to align the card horizontally and center, flex-wrap: wrap; to make the card automatically Wrap lines to fit different screen sizes.

3. Responsive Layout

In order for the cards to line up well on screens of different widths, we can use media queries and elastic properties to implement responsive layout.

@media only screen and (max-width: 600px) {
  .card {
    width: calc(50% - 20px);
  }
}

@media only screen and (max-width: 400px) {
  .card {
    width: 100%;
  }
}

In the above code, we use media queries to detect the width of the screen. When the screen width is less than 600px, the width of the card will be 50% of the screen width, and since we set a 10px margin for the card, use calc(50% - 20px) to allow the cards to be arranged normally. When the screen width is less than 400px, the width of the card will be 100% and the cards will be stacked on a single line.

Through the above steps, we can use Css Flex elastic layout to create a simple responsive card layout. Not only can cards be arranged adaptively on different devices, but the card container and card styles can be easily adjusted.

Summary

This article introduces how to use Css Flex elastic layout to create a responsive card layout. With a simple HTML structure and some CSS styles, we can easily create a responsive layout. The power of flexible layout is that it can adapt to different screen sizes and device types, allowing our web pages to display well on various devices. I hope this article can help you understand and apply flexible layout.

The above is the detailed content of How to create a responsive card layout using CSS Flex layout. For more information, please follow other related articles on the PHP Chinese website!