I posted this plunker instead of the previous one.
My goal is to align the flex container horizontally while keeping its items aligned at the start.
I want to use align-content: flex-start along with justify-content: center.
Currently, if the last row has fewer items, they will be centered in the flex container rather than starting at the beginning of the row.
This is the desired outcome:
When it comes to the justify-content and align-content properties in CSS, they can only be applied to the flex container, yet they have an impact on the flex items. To center the container, you would need to include justify-content: center in the parent of .flex-container (which is typically the body).
Another way to achieve this is by using auto margins on the .flex-container.
The align-content property focuses on the cross-axis of the flex container (the vertical axis in this situation) and may not always be necessary for adjusting your layout.
Consider implementing the following code:
body {
display: flex;
justify-content: center;
}
.flex-container {
display: flex;
justify-content: flex-start;
flex-wrap: wrap;
}
Check out the updated plunker demo.
You could also try this variation:
.flex-container {
display: flex;
justify-content: flex-start;
flex-wrap: wrap;
margin: 0 auto;
}
View the modified plunker demo.
UPDATE (in response to comments)
If dealing with excess whitespace on the right side of the container, explore these resources:
I have discovered a solution utilizing the grid technique:
While it may seem intricate, nesting two grids in the following manner can achieve the desired result:
.grid {
overflow: hidden;
--grid__col-width: 200px;
--grid__column-gap: 20px;
--grid__row-gap: 20px;
max-width: 1200px;
margin: 0 auto;
}
.grid__outer-grid {
display: grid;
margin: 0 calc(var(--grid__column-gap) * -1);
column-gap: var(--grid__column-gap);
row-gap: var(--grid__row-gap);
--grid__column-gap-double: calc(var(--grid__column-gap) * 2);
--grid__column-gap-half: calc(var(--grid__column-gap) / 2);
--grid__row-gap-half: calc(var(--grid__row-gap) / 2);
--grid__inner-grid: repeat(auto-fit, minmax(min(var(--grid__col-width), calc(100% - var(--grid__column-gap-double))), var(--grid__col-width)));
grid-template-columns: minmax(0, 1fr) [grid-start] var(--grid__inner-grid) [grid-end] minmax(0, 1fr);
}
.grid__inner-grid {
display: grid;
grid-column-start: grid-start;
grid-column-end: grid-end;
column-gap: var(--grid__column-gap);
row-gap: var(--grid__row-gap);
grid-template-columns: var(--grid__inner-grid);
}
.box {
background: red;
height: 200px;
}<div class="grid">
<div class="grid__outer-grid">
<div class="grid__inner-grid">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
</div>
</div>Struggling with a modal appearing inside my side div and can't find any solutions in the bootstrap5 documentation or online forums. https://i.stack.imgur.com/gHsBi.png I just want the modal to display centered on the page with the background fade ef ...
Is there a way to center a div on the screen without encountering scrolling issues when the screen size is reduced? If you have any alternative solutions (excluding the use of transform), please share, as I've tried various approaches but have not be ...
Having some trouble with the CSS menu on my website click here. I've tried adjusting the code, but can't seem to get all the menu levels to line up properly. As a beginner in CSS, I'm sure I'm overlooking something simple. When hovering ...
I am struggling with achieving consistent height for all the products on my website, while allowing for variable widths. I attempted to resolve this using UI, but unfortunately it was unsuccessful. Does anyone have suggestions on how to accomplish this u ...
I am having an issue with my SVG element (shown below) where it stops animating after a certain period of time. I want the animation to continue indefinitely like in this jsfiddle. .path { stroke-dasharray: 20; animation: dash 10s linear; } @ ...
As someone new to web development, I am facing an issue with my code where the CSS id selector is not functioning as expected: li { border: 3px solid red; } h3 { background: green; } #special { color: green; } <h3>Todo List</h3> < ...
Is there a way to have the menu slide in smoothly from the right side after clicking on the menu bar icon, including sliding the menu bar icon itself? The current code displays the menu directly upon clicking on the menu bar, but I would like it to slide i ...
Check out the menu at this link: The issue lies with the dropdown functionality, which is a result of WordPress's auto-generated code. Css: .menu-tophorizontalmenu-container { margin: 18px auto 21px; overflow: hidden; width: 1005px; ...
I am looking to design a FAQ page similar to Twitter's FAQ. The goal is to have the left column remain fixed in its position while allowing users to scroll through the content. Here is what I have attempted so far, but it is not functioning as expect ...
Encountering a problem with CSS on my Wordpress websites. Using WP's editor to float images to the right or left of text, I noticed an issue when viewed on mobile: https://i.sstatic.net/gVFRq.jpg The text gets cut off. How can I ensure that no tex ...
Struggling to make my navigation bar collapsible on my site designed for a class project. Wondering if this requires both HTML and CSS, or can it be achieved with just HTML since this is my first time working on responsive design. Below is the code I have ...
I have a generated svg path code that I want to customize using CSS to remove the default stroke. How can I override the stroke property and set it to none? code: <div class="container" style="position: absolute; left: 3px; z-index: 1;"> <svg he ...
My div is packed with content, including a chart from amCharts and multiple sliders from noUiSlider. It also features various AngularJS functionalities. To hide the page quickly, I use $('#container').addClass('hidden'), where the rule ...
Could really use some assistance here and apologize if it's a hassle: Link to contact form To view the contact form, simply click the "Contact" button in the top left corner. The jqTransform jQuery plugin is being used to style it. Initially, it&apo ...
Given: Bootstrap 5.1 Visual Studio 2022 Professional Edition Blazor Server Application How do I modify the container to occupy the entire screen without any margins? <div class="container bg-primary"> Hello World! </div> Thi ...
Having trouble with the bootstrap accordion feature. When the page loads, the accordions are expanded by default instead of being collapsed. I want them to start collapsed and then expand when clicked. Here is the HTML code: <!DOCTYPE html> &l ...
Currently, I am working on a jQuery animation where clicking on a tile should display its information by hiding all other tiles and showing its details. While I have implemented .stop() to prevent queuing issues, I encountered a problem with the transition ...
Within a scrollable div, I have multiple draggable divs. However, when I drag them into another scrollable div (the droppable zone), only the page scrolls and not the droppable div itself. How can I make it so that only the droppable div scrolls while drag ...
I am attempting to add animation to a modal using a transition effect. My goal is to open it slowly, either from the center of the screen or from the bottom. However, I am struggling to understand how this can be achieved... While searching on Google, I c ...
I am currently facing an issue with displaying addresses retrieved from a database in my project. The problem lies in the formatting of the address when it is displayed on the page. Currently, the address is being displayed as follows: Address: 1 Kings S ...