.card {
display: flex; /* This activates flexbox on the .card container */
flex-wrap: wrap; /* This allows the child elements to wrap onto the next line if there isn't enough space */
justify-content: center; /* This centers the child elements horizontally within the container */
}display: flex;: This property turns the.cardelement into a flex container, allowing its direct children (the.flower-containerelements) to be laid out using flexbox.flex-wrap: wrap;: This property enables the flex items (child elements) to wrap onto multiple lines. Without this, all the items would stay on a single line, potentially overflowing the container.justify-content: center;: This centers the flex items horizontally within the flex container. If the flex items don't take up the full width of the container, they will be centered.
.flower-container {
flex: 1 1 30%; /* Flex-grow, flex-shrink, and flex-basis */
max-width: 300px; /* Sets a maximum width for each flex item */
}flex: 1 1 30%;: This shorthand property sets the flex-grow, flex-shrink, and flex-basis properties.flex-grow: 1;: This allows the flex item to grow to fill the available space proportionally. Each.flower-containerwill take an equal amount of space in the flex container.flex-shrink: 1;: This allows the flex item to shrink if necessary, meaning that it can reduce its size proportionally when there isn't enough space.flex-basis: 30%;: This sets the initial size of the flex item before any growing or shrinking takes place. Each.flower-containerwill initially take up 30% of the container's width.
max-width: 300px;: This ensures that each.flower-containerdoes not exceed 300px in width, even if there is more space available.
@media (max-width: 768px) {
.flower-container {
flex: 1 1 45%; /* Adjusts the flex-basis for tablet-sized screens */
}
}
@media (max-width: 480px) {
.flower-container {
flex: 1 1 100%; /* Makes each container take up the full width on mobile screens */
}
}- Tablet Screens (
max-width: 768px):flex: 1 1 45%;: This adjusts the flex-basis to 45%, meaning each.flower-containerwill initially take up 45% of the container's width. This allows for two cards to fit side by side on smaller screens like tablets.
- Mobile Screens (
max-width: 480px):flex: 1 1 100%;: This adjusts the flex-basis to 100%, meaning each.flower-containerwill take up the full width of the container. This ensures that only one card is displayed per row on mobile devices, making the layout more user-friendly for small screens.
-
Desktop View:
- The
.cardcontainer holds multiple.flower-containerelements. - Each
.flower-containertakes up 30% of the width, allowing three cards per row. - The cards are centered within the
.cardcontainer.
- The
-
Tablet View (max-width: 768px):
- Each
.flower-containernow takes up 45% of the width, allowing two cards per row. - The cards still wrap onto the next line as needed.
- Each
-
Mobile View (max-width: 480px):
- Each
.flower-containertakes up 100% of the width, displaying one card per row. - This ensures readability and usability on smaller screens.
- Each
- The
.cardcontainer usesdisplay: flex;andflex-wrap: wrap;to create a flexible layout where items can wrap onto new lines. - Each
.flower-containerusesflex: 1 1 30%;to set its initial size and make it flexible, adjusting its size based on available space. - Media queries adjust the flex-basis for different screen sizes, ensuring the layout remains responsive and user-friendly on tablets and mobile devices.
This combination of flexbox properties and media queries creates a responsive design that adapts to different screen sizes while maintaining a consistent and visually appealing layout.