Arrange the div elements within a div container by utilizing flexbox styling

Could you assist me with this issue? I have a container div that holds 7 inner divs. Currently, with the flexbox properties applied, I am getting this layout:

https://i.sstatic.net/7xxcp.png

However, what I actually want to achieve is this:

https://i.sstatic.net/3Z2YB.png

Below are some code snippets that I currently have

.Container {
  text-align: center;
  margin-left: 10px;
  margin-right: 10px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-around;
  align-items: center;
  align-content: center;
}
.Items {
  margin-bottom: 7px;
  width: 80px;
  height: 80px;
  text-align: center;
  font-size: 12px;
  line-height: 10px;
  border: 0px;
  padding-bottom: 7px;
  align-self: center;
}
<div class="Container">
  <div class="Items">
    <img height="40px" width="40px" src="http://img10.deviantart.net/af75/i/2014/242/1/9/kawaii_potato_by_hashtagpony-d7xbs1t.png" />
    <br/>
    <span>Icon 1</span>
  </div>
  <!-- More items here -->
</div>

UPDATE Thank you to those who responded. However, I missed out on mentioning these details:

  1. I want the icons to be evenly distributed, hence the need for justify-content: space-around
  2. I also want the icons to be centered horizontally, which is why I used 
    align-items: center; align-content: center;

The dilemma now is: Can we have both requirements met simultaneously?

jqueryhtmlcssflexbox

Answer №1

Try using justify-content: flex-start instead of justify-content: space-around.

Here is a demonstration: http://jsfiddle.net/rsvmsku6/

Update (taking into account feedback):

If you need help creating a grid that is centered horizontally but with child elements aligned to the left, check out these resources:

  • How to center a flex container but left-align flex items
  • Center align container and left align child elements

Answer №2

justify-content: distribute-around;

The issue lies in that specific line of code. By deleting it, the items will be displayed as desired

JSFiddle Link

distribute-around:

items are evenly spread out with equal space around them

flex-start (default)

items are aligned towards the start line

Answer №3

Some elements are not necessary for your design.

  • align-items
  • align-content

You must also ensure that the justify-content is set to flex-start, keeping everything aligned to the left.

.Container {
  text-align: center;
  margin-left: 10px;
  margin-right: 10px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  width: 320px;
}
.Items {
  margin-bottom: 7px;
  width: 80px;
  height: 80px;
  text-align: center;
  font-size: 12px;
  line-height: 10px;
  border: 0px;
  padding-bottom: 7px;
  align-self: center;
}
<div class="Container">
  <div class="Items">
    <img height="40px" width="40px" src="http://img10.deviantart.net/af75/i/2014/242/1/9/kawaii_potato_by_hashtagpony-d7xbs1t.png" />
    <br/>
    <span>Icon 1</span>
  </div>
  <div class="Items">
    <img height="40px" width="40px" src="http://img10.deviantart.net/af75/i/2014/242/1/9/kawaii_potato_by_hashtagpony-d7xbs1t.png" />
    <br/>
    <span>Icon 1</span>
  </div>
  <div class="Items">
    <img height="40px" width="40px" src="http://img10.deviantart.net/af75/i/2014/242/1/9/kawaii_potato_by_hashtagpony-d7xbs1t.png" />
    <br/>
    <span>Icon 1</span>
  </div>
  <div class="Items">
    <img height="40px" width="40px" src="http://img10.deviantart.net/af75/i/2014/242/1/9/kawaii_potato_by_hashtagpony-d7xbs1t.png" />
    <br/>
    <span>Icon 1</span>
  </div>
  <div class="Items">
    <img height="40px" width="40px" src="http://img10.deviantart.net/af75/i/2014/242/1/9/kawaii_potato_by_hashtagpony-d7xbs1t.png" />
    <br/>
    <span>Icon 1</span>
  </div>
  <div class="Items">
    <img height="40px" width="40px" src="http://img10.deviantart.net/af75/i/2014/242/1/9/kawaii_potato_by_hashtagpony-d7xbs1t.png" />
    <br/>
    <span>Icon 1</span>
  </div>
  <div class="Items">
    <img height="40px" width="40px" src="http://img10.deviantart.net/af75/i/2014/242/1/9/kawaii_potato_by_hashtagpony-d7xbs1t.png" />
    <br/>
    <span>Icon 1</span>
  </div>
</div>

Answer №4

Eliminate the specified css code from the Container:

justify-content: space-around;

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

JavaScript, CSS, and HTML - elements that dynamically adjust their size according to the content they hold

Being brand new to web development, I have a task of creating objects that feature text in a box with rounded edges, similar to the image provided. The challenge is that the border size needs to dynamically adjust based on the text size. Restrictions on u ...

javascripthtmlcss

`Zooming and scrolling feature within a masked image`

I'm struggling to achieve a scrolling zoom effect similar to the website mentioned below, but I can't seem to get it to fully zoom. Additionally, when I try to zoom in on a clipped shape or text while scrolling, the entire div ends up scrolling ...

javascripthtmlcss

I keep getting double results from the Multiple Checkbox Filter

Currently, I am facing an issue with a checkbox filter on a product page that I'm developing. The filter is functioning correctly, but I encounter duplicate results when an item matches multiple criteria. For instance, if I select both 'Size 1&ap ...

javascripthtmljquerycheckboxfilter

Tips for styling a datatable scrollbar with CSS

My preference is to utilize the datatable API when creating tables. $('#datatable-example').dataTable({ "scrollX": true, "info" : false, "fnDrawCallback" : function(oSettings) { $('td').removeClass('sor ...

jquerycssdatatable

What is the best way to apply CSS styles to different states in React?

I am endeavoring to adjust the size of an element by utilizing this code snippet. const [size, setSize] = useState({}); The initial size I wish to set is: transform: scale(1, 1) translate3d(0, 0, 0); Upon clicking on the element, my aim is to enlarge it ...

cssreactjsstate

What is the best way to display CSV file data on an HTML webpage?

I am encountering an issue with displaying the data from my CSV file in an HTML page. Here is a snippet of my CSV file: number:Int,english,french,german 1,one,un,eins 2,two,deux,zwei 3,three,trois,drei 4,four,quattre,four 5,five,cinque,fuenf 6,six,six,sec ...

htmlcsvimport-from-csv

updating a div without having to reload the entire webpage

This is my unique code snippet <!doctype html> <html> <head> <script language="javascript" type="text/javascript" src="jquery.js"></script> <style> *{padding:0px; margin:0px;} #output{width:850px; height:400p ...

jqueryajax

Using logic to eliminate elements

During the concluding ceremony, I have a plan in mind: In case there is only one input field: Do nothing If multiple input fields exist and none of them are empty: Do nothing For multiple input fields where at least one field has content: Remove all ...

javascriptjquery

Only display entries with no content

When attempting to filter data from a search, all results are being displayed on the submit button even when entering 1, 2, or 3. Here is my code below. Please let me know if I am making a mistake somewhere. ...

javascriptphpjqueryajax

PHP's 'include' function is now being ported into modern Javascript as a new method

As the library of JS frameworks continues to expand, I'm wondering if there is a simple JS replacement or alternative for PHP's 'include' function. Is PHP include still a relevant method for including chunks of code, or are there better ...

javascriptphphtmlframeworksinclude

Building a Modal in React and Triggering it for Display, followed by Making an AJAX Request upon Submission

Check out my CodePen snippet (minus delete ajax request): http://codepen.io/martincarlin87/pen/KzPWOw I've been diving into the world of React recently, and I'm working on converting a page in my web application to utilize React instead of just ...

javascriptjqueryreactjs

Insert details into Mysql database

This indicates an issue with Line 15 of my code. I would like to include additional details and have them displayed in a table. see image here Error alert: syntax error, unexpected ';' in N:\ftp\compc\ac12mm\untitled folder& ...

phphtml

Is it true that textarea is not compatible with AJAX .val() or .text() methods?

I'm attempting to utilize AJAX requests in order to transmit textarea data to a google form, however it appears that .val() isn't functioning correctly with textarea specifically. How can I resolve this issue? My goal is to enable individuals to ...

javascriptjqueryhtmlajaxtextarea

Angular toolbar on the left side that hovers seamlessly

1 I am using Angular Material toolbar and trying to position a span inside the toolbar on the left side. I have attempted using CSS float left, but it is not working. Can anyone provide some assistance please? <mat-toolbar> <span>le ...

cssangularangular-material

What is the best way to change the size of a background image

I recently discovered a helpful tutorial on resizing background images that I found very insightful. If you're interested, you can check it out here. After attempting to apply this method to a 900px width div in order to resize only vertically, I enc ...

jquerycsshtml

Sorting functionality malfunctioning after dynamically adding new content using AJAX

Greetings to all, I have a question about my views. 1- Index 2- Edit In the index view, I have a button and AJAX functionality. When I click the button, it passes an ID to the controller which returns a view that I then append to a div. The Edit view con ...

javascriptjqueryhtmlajaxjquery-ui

Does Xamarin.Forms have a feature similar to html datalist that enables the selection of predefined values while also allowing for the input of free text?

We are currently developing a Xamarin forms application. One of the necessary features is a selection field where users can either choose from predefined options or enter their own text value, similar to using a text field. In HTML, this could be easily ...

androidhtmliosxamarin.formscontrols

Reading very large .csv files using the FileReader API in JavaScript with only HTML/jQuery can be accomplished by following these

Having trouble handling a large .csv file over 40 MB (with more than 20,000 lines) and displaying it as an HTML table. I'm developing a system using only pure HTML + JQuery. This is the format of my .csv worksheet: ================================== ...

javascriptjquery

Employing jQuery to attach a new div to a dynamically generated div following a successful AJAX request

Currently, I am utilizing the marvelous WP-Polls plugin for WordPress, which boasts an innovative AJAX polling system. My main objective is to append a hidden div (.comment-block) to a fresh div (.voted) that will be dynamically injected into the DOM by th ...

javascriptjqueryajaxwordpressdom

Dividing image styles within css

I am trying to incorporate 4 arrow images into a CSS class (up, down, right, left). I started with a basic arrow css class: .arrow { background-repeat: no-repeat; background-position: center; } Next, I created subclasses like: .arrow .up { ...

javascriptjquerycss