Tips for decreasing the space between elements in flexbox using justify-content: space-between

I'm in the process of creating a footer for my website and I've decided to utilize flexbox for the layout. Below is the CSS code I am using for my footer:

.footer {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 5vh;
  background-color: transparent;
  color: white;
  text-align: center;
}

Here's how it currently appears:

https://i.stack.imgur.com/niBsv.png

There seems to be excessive space between the elements. What steps can I take to reduce this spacing?

If more details are required, feel free to leave a comment.

Thank you in advance!

htmlcssflexbox

Answer №1

When using flexbox, you have the ability to adjust the spacing between menu items by utilizing the justify-content rule.

.footer {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-evenly;
}

Other options for justify-content include: center and space-around.

To learn more about flexbox, check out https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Answer №2

To evenly distribute space at the beginning and end, you can utilize justify-content: space-around; like so:

.footer {
  display: flex;
  justify-content: space-around;
}
<div class="footer">
  <div>content 1</div>
  <div>content 2</div>
  <div>content 3</div>
  <div>content 4</div>
</div>

If that doesn't achieve the desired result, you can create a container with a maximum width and center it using margin: auto:

.content-footer {
  display: flex;
  justify-content: space-between;
  max-width: 60%;
  margin: auto;
}
<div class="footer">
  <div class="content-footer">
    <div>content 1</div>
    <div>content 2</div>
    <div>content 3</div>
    <div>content 4</div>
  </div>  
</div>

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

Positioning SVGs within a parent container while maintaining responsiveness

How can I anchor an SVG overlay with a circle in the bottom right corner while expanding the rest of the SVG to fill the remaining area of the container without distorting the circle? I've been able to position the SVG in the bottom right corner, but ...

htmlcsssvgresponsive

ReactJs: Struggling to programmatically set focus on an element with React.createRef()

Looking to detect when a user clicks on an arrow using the keyboard? I stumbled upon the Arrow Keys React react module. To make it work, you need to call the focus method on a specific element. Manually clicking on an element does the trick: https://i.s ...

javascripthtmlreactjsdomautofocus

Footer suffering from image invisibility syndrome

Having trouble displaying two social media images in my footer. Despite including them in my image map correctly, they just won't show up on the website. I've tried a lot of different things, but nothing seems to be working. Could it have somethi ...

htmlcss

Struggling with a filtering and sorting problem in my code, looking for some assistance

I'm encountering an issue with an isotope filter menu. The goal is for it to load data based on a timestamp and allow filtering. However, there seems to be a conflict between my sortBy script and the filter script. Below is the code in question: Sor ...

jqueryhtmlcssjquery-isotope

Fill the list items with values from the given array

I have an array called var array = ["one", "two"]; and I want to display each element in a separate list item. The desired output is: <li>Number one</li> <li>Number two</li> However, the current output is: <li>Number onetw ...

phpjqueryhtmlajaxarrays

No space left around the image's border

Whenever I apply a border to an image, it comes with a margin and the image itself receives white padding. How can I remove the margin from the border? This is how I currently have it: border: 1px solid gray; ...

htmlcssbordermarginpadding

The Chrome browser is failing to detect the hover function of the Surface Pen stylus

Encountering an issue with the hover pseudo-class not functioning properly on Surface pad's Chrome browser. The hover effect is working as expected in other browsers, but not in Chrome. I am using a Surface pen to test the hover functionality. HTML: ...

htmlcss

React - Issue with automatic resizing of divs

Currently, I am delving into the realm of ReactJS and have embarked on a small project to enhance my skills. My main goal is to create a resizable div element that can be adjusted by dragging it across the screen. Here is the snippet of code that I have be ...

htmlcssreactjsreact-hooksresize

Utilize the serialized data to pre-fill the form fields

After using the serialize() function on my form and saving the string, I am now looking for a function that can repopulate values back into the form from the serialized string. Is there such a function available? ...

javascriptjqueryhtmlwebforms

Guidelines for redirecting a page after a jQuery ajax call is made?

I'm working on a login form code and facing an issue where, after the statement is true, it doesn't redirect to the home page. Instead, it just displays the home page on my index page. How can I redirect jQuery Ajax to another page after the sta ...

phpjqueryhtmlajax

Issues arise when attempting to use the Android KeyUp, KeyDown, and KeyPress events in conjunction with Angular2

I am encountering an issue where I consistently receive a keyCode of 229 in Android Chrome browsers when running either: <input type="text" (keydown)="testKeyCodes($event)"/> <!-- or --> <input type="text" (keyup)="testKeyCodes($event)"/& ...

javascriptandroidhtmlangularevents

Two child DIVs within a single parent DIV

I am struggling to keep two divs side-by-side within a parent div. Initially, I was able to position the image in the right div successfully, but when resizing the elements, everything became disorganized and I can't seem to fix it. As a beginner, I w ...

htmlcss

Having trouble with implementing a lightbox form data onto an HTML page using the load() function? Let me help

In my project, I have set up a lightbox containing a form where user inputs are used to populate an HTML file loaded and appended to the main HTML page with the load() function. While I can successfully load the data onto the page, I am facing challenges i ...

jqueryhtmlcssajax

I'm looking to mirror images within the Bootstrap framework - any suggestions on how to achieve this using jQuery

When hovering over the image, it should flip to reveal text or a link: <div class="clearfix visible-xs"></div> <div class="col-md-3 col-sm-3 col-xs-6"> <div class="speaker-item animated hiding" data-animation="fade ...

jquerycsshtmltwitter-bootstrap

Revealing and concealing adjacent elements within a specified class

In an attempt to create a carousel that functions by hiding and showing images when the next and previous buttons are clicked, I have organized my images in a table and assigned the li elements a class of 'li'. There are four images in total, wit ...

javascriptjqueryhtmlcss

Tips for positioning a div element at the center in ASP.NET

I have written the following code snippet: <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Main.aspx.cs" Inherits="Main" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transit ...

htmlcss

When the button with an image is clicked, it will display a loading element

I have developed an application that heavily utilizes ajax, and I am looking to implement the following functionality: I would like to have a button with both text and an image. When this button is clicked, it should be disabled, and instead of the origina ...

javascriptjqueryasp.net-mvccssajax

Are there any other options similar to PhantomJs that offer support for CSS 3D effects?

I am working on capturing a webpage using NodeJs. My current setup involves using PhantomJs to capture screenshots of the page and ffmpeg to convert them into videos. However, I have encountered an issue where the page contains 3D transform CSS, which is n ...

javascripthtmlnode.jsphantomjsrecord

What iOS Printing and HTML formatter should you use and what level of sophistication is best?

Currently, I have successfully created an iOS 5 application that sends a job to the print queue. The functionality works fine and utilizes the UIMarkupTextPrintFormatter to generate the document in HTML format. At this point, I am using a simple HTML str ...

htmlobjective-ciosprintingxcode4

Ways to obtain the chosen option from a drop-down menu using jQuery

I'm currently experiencing an issue where the selected value of a drop down is not being displayed correctly. Instead of selecting the dropdown value, it's adding another value to the list. Below is the code snippet I'm using: JQuery var ...

javascriptjqueryhtmldrop-down-menu