Tips for implementing flex CSS to set a minimum width

I am developing a Calendar application and facing an issue with selecting and displaying intervals of months. When I limit the display to a maximum of 3 months, it appears like this

https://i.sstatic.net/F3jBA.png

... but when I try to display more than 3 months, it ends up looking like that.

https://i.sstatic.net/YUbI8.png

I have implemented css flex to make sure the calendars fit nicely within the browser window. However, I'm uncertain if I need to develop an algorithm for this purpose. Can anyone guide me on this?

Below is the snippet from my HTML file:

<div class="container-calendar1">
    <ca-month-calendar *ngFor="let selectedMonth of selectedMonths" [month]="selectedMonth"> 
    </ca-month-calendar>

  <ca-month-calendar>
  </ca-month-calendar>
</div>

And here's how I've defined the styling in my CSS file:

.container-calendar1{
    display: flex;
    flex: 2;
}

month-calendar {
    margin:20px;
}
htmlcssflexbox

Answer №1

To achieve wrapping in flex containers, use flex-wrap: wrap; and specify the desired width

For example:

.flex-container {
  display: flex;
  flex-wrap: wrap;
  width: 400px;
}

.flex-container > div {
  background-color: DodgerBlue;
  width: 100px;
  margin: 10px;
  text-align: center;
  line-height: 75px;
  font-size: 30px;
}
<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div>3</div>  
  <div>4</div>
  <div>5</div>
  <div>6</div>  
  <div>7</div>
  <div>8</div>
</div>

Answer №2

When you use the CSS property flex-wrap: wrap, it allows your flex items to wrap onto multiple lines.

.container-calendar1 {
  display: flex;
  flex-wrap: wrap;
  flex: 2;
}

.month-calendar {
  margin: 20px;
} 
<div class="container-calendar1">
  <div class="month-calendar">
    Calendar
  </div>
  <div class="month-calendar">
    Calendar
  </div>
  <div class="month-calendar">
    Calendar
  </div>
  <div class="month-calendar">
    Calendar
  </div>
  <div class="month-calendar">
    Calendar
  </div>
  <div class="month-calendar">
    Calendar
  </div>
  <div class="month-calendar">
    Calendar
  </div>
  <div class="month-calendar">
    Calendar
  </div>
  <div class="month-calendar">
    Calendar
  </div>
</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What could be causing the issue of Bootstrap source maps failing to load on the website

While serving my index.html file through a node.js server, I encountered an issue with loading the locally downloaded bootstrap library. Surprisingly, the website works perfectly fine when using bootstrap served from the web. Here's how the website f ...

javascripthtmlnode.jsbootstrap-4

Display an image tag using the site_url() function within PHP brackets

I have a loop in my view that is fetching all the data from the database: <?php foreach($content as $contentRow): ?> <?php echo $contentRow->value; ?> <?php endforeach; ?> This loop works well for HTML strings ...

phphtml

Zeroclipboard will fail to copy the text

I seem to be encountering an issue with the Zeroclipboard system. I suspect there might be an error in my code. Even though it indicates that the content has been copied, it actually hasn't been. The code I am currently using is as follows: <scri ...

javascriptjqueryhtml

Transferring data seamlessly between AJAX and PHP

<?php //Establishing site root variable; ?> <?php require_once("../includes/site_init.php"); ?> <!DOCTYPE HTML> <html lang = "en"> <head> <meta charset = "UTF-8"> <meta name = "viewport" content = "width ...

javascriptphpmysqlajaxhtml

Using Python and Selenium, you can locate an element inside another element

I've got the xpath for an element: /html/body/div[1]/div/div[2]/div[3]/div/div/div/div[2]/div[1]/div[2]/div[6]/div/div/div/div[1] Inside that div, there's another element: /html/body/div[1]/div/div[2]/div[3]/div/div/div/div[2]/div[1]/div[2]/div[ ...

pythonhtmlseleniumselenium-webdriverselenium-chromedriver

The align-items property in Flexbox is not functioning as expected when applied to Link components contained within

I'm in the process of creating a simple navigation bar using flexbox, but I'm encountering an issue where the content within the unordered list is not vertically centered. Below is the HTML code snippet: *,*::before,*::after{ margin: 0; ...

htmlcssreactjsflexboxnext.js

Steps for moving data from a JavaScript variable to a Python file within a Django project

I have created a unique recipe generator website that displays each ingredient as an image within a div. When the div is clicked, it changes color. My goal is to compile the ids of all selected divs into one array when the submit button is clicked. I have ...

javascriptpythonhtmljquerydjango

Tips for maintaining the active tab in Jquery even after the page is reloaded, especially for tabs that are constantly changing

$(document).ready(function(){ $('.scroll_nav li a').click(function(){ $('li a').removeClass("active_scroll"); $(this).addClass('active_scroll'); $('ul li .btn-br_all_gun').click(function(){ ...

jquerypythonhtmldjango

I am interested in utilizing PHP to send HTML content with CSS via email. Although I have made progress, the email recipient is not able to properly interpret the content that was sent

In this code snippet, I am attempting to send an email. When using file_get_contents(), I can retrieve the content but it is in plain text format and does not read the CSS style. <?php use PHPMailer\PHPMailer\PHPMailer; use PHPMailer\PH ...

phphtmlcssemailphpmailer

The ASP variable fails to display its value within the tags

I have the following code snippet that is part of a larger code base. <% dim rsFav sSQL = "(SELECT shorthand, display, larry_ranking, site_url FROM larrydb_site_list lsl JOIN larrydb_review lr on lsl.sid = lr.sid WHERE display=true AND niche=' ...

htmlasp-classic

After a PHP script is executed, a Bootstrap modal will automatically appear on the same page

Seeking assistance with integrating a bootstrap modal into a contact form submission. Despite multiple attempts, I have been unsuccessful in achieving this integration and now find myself at an impasse. My objective is simple: Upon clicking the submit bu ...

javascriptphpjqueryhtmlcontact-form

image disappears from view due to parallax scrolling

Exploring a side project to enhance my skills in html5, css3, and jQuery with Parallax Scrolling. However, facing an issue where the bottom image fails to scroll into view. It seems to be stuck behind the element above it, no matter what I try. Envisionin ...

javascriptjqueryhtmlcss

Tips for achieving a top score in my JavaScript Tetris game using HTML and CSS?

I am looking to incorporate a highscore system using localstorage in my tetris game on my website. I would like users to be able to input their username and have it displayed along with their score. Would appreciate any assistance, thank you! ...

javascripthtmlcsstetris

Building a table with the appendChild() method

I'm a beginner in the world of programming and I've been given a task to create a table of objects. I managed to do it using a certain method, but now I'd like to try creating it using the appendChild method. function addObject() { var ...

javascripthtmlhtml-tableappendchild

The Art of Positioning Containers in CSS

I am facing some issues with my CSS. In the JSP webpage, I have a container styled with a div that works perfectly. However, when I insert another div tag to style certain elements, those elements end up outside of the container for some reason. Below is ...

htmlcssjsp

The jQuery panel slider magically appears when you click the button, but refuses to disappear

One issue I am facing on my webpage involves a button that triggers a right panel to open using the jquery and modernizr frameworks. The button is positioned at the far right of the screen. When clicked, it slides to the left along with the panel it reveal ...

javascriptjqueryhtmlcss

Mobile media screen overrides CSS styles

I'm having an issue with my layout where the media screen for mobile is overriding my main CSS. On a laptop, the layout shows an orange color, but on mobile, it switches to yellow. Here's a snippet of my code: /* main container */ #resume ...

css

Attempting to create a smooth sliding effect for a div element on a webpage by utilizing the 'top' positioning property and jQuery's animate function triggered by

Essentially, when a user interacts with the .selector element, the div .dropDown should smoothly slide up -100px. Upon clicking again, it should then slide back down to top: 0px. $(document).ready(function(){ var orig = $(".dropDown").outerHeight(); / ...

javascriptjquerycsshtml

Error message: The import from './components/headerComponent/header' failed because it does not have a default export. Make sure to export it as default to be able to import it

I've been trying to bring a header from one file into another, but it's not cooperating. import React from 'react'; import { Typography, Card, CardContent } from '@material-ui/core'; import Header from './components/head ...

javascripthtmlcssnode.js

Can certain parts of an MP4 file be accessed remotely through a network connection?

With modern MP4 players, you have the ability to skip to any part of a video without needing to download the entire file. Take a look at this example video: You can navigate to any point in the video before it finishes downloading. I am curious if there ...

pythonhtmlvideo