How can I arrange items in rows with equal space between them, without a large gap in the last row?
<div fxFlex="row wrap" fxLayoutAlign="space-around">
<my-item *ngFor="let item of items"></my-item>
</div>
Current Issue:
https://i.stack.imgur.com/YRAH0.png
I want the same "space-between" layout for the items in the last row as in the other rows. https://i.stack.imgur.com/BN2hn.png
If you want to quickly find what you need, try adding an empty element following the last visible one:
<!-- These are your last 3 boxes -->
<div class="gray-box">
(content goes here)
</div>
<div class="gray-box">
(content goes here)
</div>
<div class="gray-box">
(content goes here)
</div>
<!-- Add an empty box with opacity: 0-->
<div class="gray-box transparent"></div>
If you prefer not using flexbox, consider using display: grid, as it allows for more precise grid size definitions:
display: grid;
grid-template-columns: repeat(4, 25%);
grid-gap: /* gap between your items */
Utilize "filler" elements to maintain the structure of your list. Include 3 invisible elements at the end of the list to ensure proper sizing and spacing when rows break.
const addButton = document.getElementsByClassName('add');
// referenceNode.parentNode.insertBefore(newNode, referenceNode.nextSibling);
const addElement = () => {
const newListItem = document.createElement('li');
newListItem.textContent = 'new flexible child';
const position = document.querySelector('li.filler');
position.parentNode.insertBefore(newListItem, position.previousElementSibling.nextSibling);
}
addButton[0].addEventListener('click', addElement);body {
display: flex;
}
ul {
display: flex;
flex-flow: row wrap;
justify-content: space-between;
padding: 0;
flex: 1;
}
ul>li {
flex: 0 1 24%;
background: #ccc;
display: block;
height: 40px;
margin-bottom: 20px;
}
ul>li.filler {
height: 0;
padding: 0;
}
button {
background: #333;
color: white;
border: none;
padding: 5px;
flex: 0 0 100px;
height: 100px;
margin: 10px;
}<button class="add">Click here to add children</button>
<ul>
<li>lorem</li>
<li>lorem</li>
<li>lorem</li>
<li>lorem</li>
<li>lorem</li>
<li>lorem</li>
<li class="filler"></li>
<li class="filler"></li>
<li class="filler"></li>
</ul>Assuming the structure of your HTML and CSS looks something like this:
.container {
width: 1000px;
display: flex;
flex-wrap: wrap;
justify-content: space-around;
}
.box {
background: lightgray;
width: 200px;
height: 100px;
border: 1px solid black;
}<div class="container">
<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>To maintain consistent spacing around each element, you can add margins and adjust the justify-content property to either center or flex-start based on your layout preferences.
.container {
width: 1000px;
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
}
.box {
background: lightgray;
width: 200px;
height: 100px;
border: 1px solid black;
margin: 0 20px;
}<div class="container">
<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>Having an issue with Angular materials components in my project. I have a shared module where I import all the necessary Angular materials modules, and the code runs fine. However, in my html files in VS Code, I see red squiggly lines under every Angular m ...
Currently, I am dynamically populating data into a jQuery accordion. My goal is to include a checkbox just before the <h2> text. <div id="checkbox"> <h2> <span> <input type="checkbox" class="mycheck" value="apple" / ...
I encountered a strange bug recently. There's been some issues with the HTML5 template I downloaded, specifically related to the contact form and MailHandler.php file. Despite having both files in the same directory, when inspecting element in Chrome, ...
I'm new to using Next.js and I have a question about how to utilize onclick to execute a function from an external file located in my public folder. Below is my index.js file: import Head from "next/head" import Script from "next/scrip ...
I'm currently facing a challenge in displaying an object within an array. Despite my efforts, I have been unable to make progress since the backend cannot be modified. This is what I have so far: M01, M02, M03... which may represent months. As it is ...
When developing an application for Portal, I encountered an issue where a newly created role is not displayed without refreshing the browser. How can I ensure that the added element is directly displayed in the table without needing to refresh the browser? ...
I successfully imported the table from MySQL to HTML, as shown below: My script is designed to highlight the two lowest and two highest values in each column: $(document).ready(function(){ var $table = $("#tbTodos"); $table.find("th").each(functio ...
Is there a way to achieve grayscale to color image rollover effects without duplicating images or using sprites? I'm looking for an alternative technique that can accomplish this. Any suggestions on how to implement it? ...
I'm attempting to distinguish the CSS properties of two tables based on which DIV they are contained within. If you take a look at http://jsfiddle.net/jdb1991/tpXKT/, you will notice that the table in "resultA" is utilizing the TD property designated ...
Custom Class: export abstract class CustomClass { constructor(); customMethod() { // accessing the name input of SomeComponent here; } } Some Component: export class AnotherComponent extends CustomClass { @Input() name: string; constru ...
Seeking advice on implementing an autosave feature for a reactive Angular 2 form. The idea is that as the user types in values, the form should automatically save if the input is valid. Below is the code snippet: export class BusinessFoundationsPage { ...
I'm having trouble changing the fill color of an SVG when the user hovers over it. Can someone help me figure out why my code isn't working? svg:hover { fill: blue; } <svg width="0" height="0" class="hidden"> <symbol viewBox="0 0 ...
My nodes sometimes have a dot in their ID attribute, as shown in this example: <div id="site_someSite.com"></div> When I try to select this element using jQuery with the following code: variable = $('#site_'+user); (where user is &a ...
Currently, I am working on creating a basic perimeter calculator specifically designed for a projector screen. This code is intended to take the response from a radio button input and the diagonal length in order to accurately calculate the perimeter base ...
I'm facing a challenge where I have to include a stylesheet in numerous HTML files. It seems like such a tedious task to do it manually for each file. Are there any tools or solutions available that can assist me with this process? Or perhaps there ar ...
My master's thesis requires me to dissect multiple Instagram profiles, each containing over 1000 posts. I am in need of a comprehensive list including the following details: Type of Post (Image, Multi Image, Video) Description Likes Comments (total c ...
Currently, I have a code snippet that allows me to draw an image onto a canvas. Here is the code: var imageLoader = document.getElementById('imageLoader'); imageLoader.addEventListener('change', handleImage, false); var ...
My CSS style is causing my background image to span across the whole screen instead of repeating within the 960px width of the body. body { width:960px; margin: 10px auto 10px auto; background-image:url(logo.png),url(backgroundimage.jpg); ...
In my project using angular js, I have implemented a drag and drop feature that allows items to be dragged between cells in two directions. I now want to enhance this functionality by allowing members with 'a's (e.g. 1a, 2a, etc.) to be dragged ...
There seems to be an issue with the underlining border in this example not extending across the entire width of the container. Any suggestions on how to resolve this would be greatly appreciated. .outer-container { width: 200px; overflow: auto; } . ...