Aligning CSS items to flex-start prevents them from being centered

My flex container has justify-content: flex-start, but I want to center the items inside it.

EDIT: For reference, I'd like it to resemble the video recommendations on the YouTube homepage.

Here is my code that doesn't seem to be working as expected:

.parent {
  width: 100%;
  margin: 0 auto;
  max-width: 500px;
}

.child {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  justify-content: flex-start;
}

.item {
  background-color: #4d4d4d;
  margin: 5px;
  width: 125px;
  height: 100px;
}

This is what I'm aiming for (not exactly centered, but with flex-start and margin set to auto):

.parent {
  width: 100%;
  margin-left: 15%;
  max-width: 500px;
}

.child {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  justify-content: flex-start;
}

.item {
  background-color: #4d4d4d;
  margin: 5px;
  width: 100px;
  height: 100px;
}

Thank you for your help!

htmlcss

Answer №1

This task involves working with CSS grids

.wrapper {
  width: 100%;
  margin: 0 auto;
  max-width: 500px;
  border:1px solid red;
}

.content {
  display:grid;
  grid-template-columns:repeat(auto-fit,125px); /* set the column width here */
  grid-gap:5px; /* acting as margins */
  justify-content:center; /* center alignment */
}

.box {
  background-color: #4d4d4d;
  height: 100px; /* specify the height only, alternatively use grid-auto-rows:100px */
}
<div class="wrapper">
  <div class="content">
    <div class="box">
      item
    </div>
    <div class="box">
      item
    </div>
    <div class="box">
      item
    </div>
    <div class="box">
      item
    </div>
    <div class="box">
      item
    </div>
    <div class="box">
      item
    </div>
    <div class="box">
      item
    </div>
    <div class="box">
      item
    </div>
  </div>
</div>

Answer №2

My observation stands

The alignment issue arises due to the parent element's max-width restriction of 500 units, considering each item occupies 125px plus 5px padding on either side resulting in a total width of 135px per item. When multiplied by 4, it exceeds the parent's width, causing wrapping and misalignment as the flex container is set to flex-start. To resolve this, ensure that the sum of container and item widths align to achieve the desired layout.

I have adjusted the item width to 115px so that all 4 boxes fit within the 500px limit without modifying the current margins. Alternatively, you can tweak the container width or margin settings as long as the calculations lead to centering when exceeding 500px width.

.parent {
  width: 100%;
  margin: 0 auto;
  max-width:500px
}

.child {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  justify-content: flex-start;
}

.item {
  background-color: #4d4d4d;
  margin: 5px;
  width: 115px;
  height: 100px;
}
<div class="parent">
  <div class="child">
    <div class="item">
      item
    </div>
    <div class="item">
      item
    </div>
    <div class="item">
      item
    </div><div class="item">
      item
    </div><div class="item">
  item
</div><div class="item">
  item
</div><div class="item">
      item
    </div><div class="item">
      item
    </div>
  </div>
</div>

Answer №3

How to centrally align a div using flex:

.parent , body {
    display:flex;
    align-items:center;
    justify-content:center;
    width:100%;
}

In my opinion, I prefer not to use the margin: 0 auto; trick because it doesn't work well for me.

I hope this answers your question.

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

Is it possible to retrieve the profile picture of a user who is not currently logged into the account?

On my user info page, I am encountering an issue where I am unable to display the profile of a user when clicked on. The expected functionality is for the selected user's username and profile picture to be shown even if the user is not logged in. Howe ...

pythonhtmlcssdjango

What is the best way to deactivate buttons with AngularJS?

I have a situation where I need to disable the save button in one function and permanently disable both the save as draft and save buttons in another function using AngularJS. How can I accomplish this task with the disable functionality in AngularJS? Her ...

javascripthtmlangularjskendo-uikendo-grid

Customizing Material UI CSS in Angular: A Guide

Recently, while working with the Mat-grid-tile tag, I noticed that it utilizes a css class called .mat-grid-tile-content, which you can see below. The issue I am encountering is that the content within the mat-grid-tile tag appears centered, rather than f ...

cssangulartypescriptmaterial-ui

Sending information from JavaScript to Python scripts: best practices

Within this HTML file, I have included a script where an ajax request is being made to pass a specific string to a Python function. var message = "hello there!!!" $.ajax({ url: "../SCRIPTS/cond.py", type: 'POST', ...

javascriptpythonhtmljqueryajax

Layering an object on top of a clone using CSS

I am working on a webpage with a jQuery menu located at the following link: Menu To accommodate more items and have greater control, I duplicated the menu twice. However, when hovering over them, the duplication is visible in the background. Is there a ...

jqueryhtmlcss

Changing the color of a placeholder using Javascript: A step-by-step guide

I've been searching online without any luck so far. I'm attempting to change the placeholder color of a text box using JavaScript, but I'm not sure how to go about it. I already have a color picker that changes colors. If my CSS looks somet ...

javascripthtmlcsspseudo-element

How can I make my slider perfectly accommodate the component inside?

I am working on developing a slider similar to the McDonald's one: The main goal for my slider is to adjust to the container element size, so that when the user clicks the left or right buttons, the slider smoothly moves to the corresponding directio ...

javascriptcssreactjs

Maximizing the Width of a Background Image in Wordpress Elementor for a Full Screen Effect

UPDATE: Issue Resolved! See the comments for details. Thanks to the helpful Dev! I'm facing a challenge with my website's homepage design. I'm trying to incorporate a background image that spans the full width of the screen. My website is b ...

htmlcsselementor

Content linked to an uneditable text box that does not appear in the HTML code

I recently encountered a situation where the value in a readonly textbox was not found in the underlying page HTML. Even though the browser displayed 'A504Y' in the textbox, I couldn't retrieve it using Webdriver's .text method: string ...

htmlselenium-webdriverwebdriver

Tips for initiating and terminating the evaluation of a condition at regular intervals using JavaScript

I'm currently working on a JavaScript application where I need to achieve the following: Periodically check every 5 seconds to see if there is an element with the 'video' tag on the page. Once an element with the 'video' tag ...

javascriptjqueryhtmlvideo

The Bootstrap carousel spiraled into disarray

I am facing an issue with the basic bootstrap carousel. My goal is to make the slides move every four seconds. The current setup of the carousel code is as follows: $(document).ready(function() { fixCarousel(); }); function fixCarousel() { $('.c ...

javascripthtmlcsstwitter-bootstrap

Is there a way to change TextBox multiline to uppercase in Opera browser?

Does anyone know how to convert TextBox multiline to Uppercase in Opera? I tried using "text-transform:uppercase" but it only seems to work with IE ...

htmlcssopera

Progress Indicators Do Not Move

I have a collection of progress bars that I want to animate. They work fine with maxcdn, but not with local bootstrap references. Can someone please help me figure out what's causing this issue? .resume { width: 816px; margin: 48px 48px 48p ...

htmlcssbootstrap-4

Displaying a progress bar during image uploads in PHP without using AJAX

I am in the process of uploading a file on my website and it is working well. However, I would like to display a progress bar while the upload is taking place. I have considered using ajax for this purpose, but I am unable to use ajax. Is there a way to ac ...

phpjavascripthtmlprogress-bar

perform an action if any division element is void of content

Currently, I have a statement that checks if any of the Divs with the ID #Drop are empty. If one is found to be empty, an alert is shown. However, there seems to be an issue where the statement stops working when any div contains content. What I am trying ...

javascriptjqueryhtmlcss

Include a blank area on the right side and a duplicated image on the bottom right using Bootstrap

Let's set the scene: This screenshot showcases www.dreamstreetentertainment.com, a site that is still a work in progress but is already live. Don't inquire about it. The client insists on this setup. Essentially, I have an empty space to the rig ...

htmltwitter-bootstrapcssflexbox

Issue with .submit() not submitting form after setTimeout timer runs out

How can I add a delay after a user clicks submit on a form before it actually submits? I have an image that appears when the click event is triggered, but the form never actually submits... This is the HTML form in question: <form class='loginFor ...

javascriptjqueryhtml

AngularJS - Sending configuration values to a directive

I'm trying to figure out how to pass parameters (values and functions) to an Angular directive. It seems like there should be a way to do this in Angular, but I haven't been able to locate the necessary information. Perhaps I'm not using th ...

javascripthtmlangularjsparametersconfiguration

Aligning a child element in the center along the horizontal axis within a parent container that is smaller in width than

I have been attempting to center an <img> element horizontally within a <div> that is narrower than the image itself. The <div> has overflow: hidden applied to it. For example, if the image is 500px wide and the DIV is 250px wide, is the ...

htmlcss

What is the best way to retrieve upload progress information with $_FILES?

HTML: <input type="file" value="choose file" name="file[]" multiple="multiple"/><br/> <input type="submit" class="submit" value="confirm" /> <input type="hid ...

phpjavascriptjqueryhtmlajax