Generate div elements with a row capacity of 3 and a column size of N

I am trying to arrange divs in a way that they can be scrolled horizontally. I have set up a flex container, but I'm unsure what other steps are needed to ensure the boxes align to the left.

You can view the demo code here

.container {
  height: 95px;
  border: 1px solid black;
  display: flex;
  flex-direction: column;
  overflow-x: auto;
}

.box {
  border: 1px solid black;
  margin: 5px;
  width: 100px;
}

The code without comments appears to be working as expected. However, once I add the cols, there seems to be extra spacing present.

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

Answer №1

Utilizing the CSS properties align-content and justify-content gives you the ability to determine the placement of items within a flexbox. I recommend researching these properties further, such as checking out resources like CSS tricks, in order to fully grasp their functionality. To achieve the desired result, consider setting align-content: flex-start; for the .container element.

Answer №2

Did you find what you were looking for?: CLICK HERE

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

.container {
  height: 95px;
  border: 1px solid black;
  display: flex;
  /* flex-direction: column; */
  overflow-x: auto;
}

.box {
  border: 1px solid black;
  margin: 5px;
  flex: 0 0 33%;
}

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

Angular interceptors in sequence

I'm looking to implement a queue system in Angular. My goal is to store requests in an array and process them sequentially, moving on to the next request once the current one is successful. Below is the code I tried, but unfortunately it didn't ...

Finding the closest button using Selenium in Python

I am attempting to click on the "Delete Comment" button once I have identified a comment that contains the specific hashtag, husky, which is a clickable link. Since there are multiple "Delete Comment" buttons on the page, my approach is to locate the comm ...

The iframe is not adjusting its size in relation to the parent window

For more information, click here: http://jsfiddle.net/5HYve/ <div style="position: fixed; top:0; right:0; width:300px; height: 100%; text-align:justify; overflow:hidden;" class="chat-container"> <iframe id="chat_1" style="width:300px;height:1 ...

Leveraging this jQuery code across multiple div elements

As a newcomer to jQuery, I am currently experimenting with a test script. My goal is to create an effect where when an image is clicked, a div slides down displaying more information similar to the new google images effect. The issue with the current scri ...

The modal popup will be triggered by various button clicks, each displaying slightly different data within the popup

As a newcomer to Angular 4, I have encountered an interesting challenge. Currently, my code consists of two separate components for two different modals triggered by two different button clicks (Add User and Edit User). However, I now face the requiremen ...

Disappear Image Overlay when Mouse Hovers

Currently, I am in the process of working on a new webpage. You can view the progress at the following link: . When hovering over the Referrals Button, a Background Overlay will appear. To enhance the visual effect, I am looking to implement a gradual appe ...

Tips for arranging images in a horizontal layout using FlatList in React Native

Is there a way to display feed images horizontally instead of vertically in FlatList? I've tried wrapping the images in a view with flex-direction set to row, as well as adding horizontal={true} to the FlatList, but nothing seems to work. Any suggesti ...

Encountering issues while attempting to integrate ngrx store following ESLint setup

I'm currently working on an Angular 13 application that already has ESLint set up. I recently added ngrx store and dev tools using the following commands: ng add @ngrx/store ng add @ngrx/store-devtools However, when I tried to add a store using t ...

How to assign the 'src' attribute to an HTML element using Node.js

I am currently using 'express' in Node.js and have implemented the following code to send a URL input into text: <form method="GET" action='/download' class="my-5"> <div class="form-group"> ...

Loading asp.net controls dynamically using JavaScript

In the process of creating ASP.NET controls that facilitate the development of dynamically generated websites based on a class.cs file, these controls are loaded into a Placeholder within an update panel. My goal is to leverage technologies like AJAX and ...

Enhanced Navbar Dropdown Menu with Multiple Columns in Bootstrap 4 Beta 2

My attempt at building a navbar using Bootstrap 4.0.0-Beta 2 with right-aligned elements is not turning out as expected, especially when viewed on a full page. The dropdown element is not displaying correctly and seems off. I have included the code below ( ...

Analyzing HTML markup to locate an anchor tag

While attempting to parse an HTML code using BeautifulSoup in order to retrieve a link that is hidden and does not appear on the website, I have encountered difficulties as it only retrieves links visible on the page. Is there a method to effectively par ...

How to implement a button spinner in Angular 6 without making a service call

I need to toggle the spinner visibility while downloading a PDF file. Here is the code in my Html component: <div > <ng-container *ngFor="let p of selectedStudent.photos.list; let i = index"> <div *ngIf="p.even ...

Discover the process of utilizing doc.getElementbyClassName to determine if any of its elements are blank

On my HTML invoice table, I sometimes have empty elements that cause the row to misalign. To fix this, I want to add whitespace if an element is empty. Here is the structure of the table: <div class="invoiceTable"> <div class="titles2" style=" ...

Is there a way to stop a for loop when the mouse hovers over a Google Map?

When hovering over markers on Google Maps, I am looping the data to display in an info window. Initially, the data is coming as expected, but when hovering over the same marker again, the data is adding to the existing data. Here is the StackBlitz URL fo ...

Should we utilize the component @Input as a parameter for the injected service constructor, or should we opt for the ServiceFactory

Within Angular 12 lies a simplified component structured as follows: @Component({ selector: 'app-list', templateUrl: './list.component.html', styleUrls: ['./list.component.less'] }) export class ListComponent implements ...

Can three photos be included in this code?

For this particular task, I am required to select 3 photos and create a button that allows me to cycle through them. The challenge lies in being able to select the photos from my file directory. Any assistance would be greatly appreciated! :D <!DOCTYPE ...

Tips for positioning the Google Custom Search bar

I am looking to position the Google custom search box on the left side of my website. Currently, I am using a website builder called imxprs and have implemented this code for my custom search box. <script> (function() { var cx = '013012 ...

Ways to prevent any controls or clicks in the background page from functioning while an Angular Material dialog is open

                 In our application using angular material dialog version 7, we have cells that are editable in the dialog box as well as on the main page with text areas and input fields. When the dialog box is open, if I press ctrl+z, the undo ...

The hover effect flickers in Firefox, but remains stable in Google Chrome

Here is an example link to check out: I am facing a dilemma on how to solve this issue and unsure if it is related to jQuery or the DOM structure. If you have any suggestions, they would be greatly appreciated. Thank you! ...