Arrange 6 columns with equal width using Flexbox styling

Although I'm new to Flexbox, I decided to use it to create a responsive navigational menu consisting of 6 columns. However, I encountered an issue where the menu stretches to 100% of the screen but the button widths are not equal. Is there a way to ensure that the buttons have equal width while maintaining responsiveness based on screen and font size?

You can find the code here: JS Fiddle

.cat-bg {
    display: flex;
}
.showSingle {
    flex-grow: 1;
    max-width: 30%;
    float: left;
    cursor: pointer;
    cursor: hand;
    display: block;
}
htmlcssflexbox

Answer №1

By default, flexed items will be sized based on their content. To change this behavior, adjust the flex-basis property. For uniform column/button sizes, use the following CSS:

.showSingle {
  flex: 1;
}

(instead of using flex-grow: 1)

It's important to remove the float and display declarations, as well as one of the two cursor declarations. Here is the revised CSS for these elements:

.cat-bg {
  display: flex;
}

.showSingle {
  flex: 1;
  max-width: 30%;
  cursor: pointer;
}

As a reminder, the shorthand flex property above is equivalent to the following individual properties:

flex-grow: 1;
flex-shrink: 1;
flex-basis: 0%;

Answer №3

utilize this

.dog-bg {
    justify-content: center;
  padding:10px;
  align-items:center;
}
.hideSingle {
    flex-basis:120px;
    cursor: pointer;
}

Answer №4

After some investigation, I believe I have discovered the solution:

.cat-bg {
 max-width: 100%;
  margin: 0 auto;
  display: flex;
}
.showSingle {
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: 0;
  cursor: pointer;
  cursor: hand;
  display: block;
}

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

The navigation bar's background color remains static and doesn't update as

Struggling with HTML/CSS and unable to get the NAV bar to display the specified background color. Tried putting the nav in a class, commented out parts of the code, but still couldn't make it work. Despite looking for solutions, I can't figure ou ...

htmlcss

retrieving data entered in an HTML form using PHP script

Just dipping my toes into the world of php/html and I'm facing an issue where I need to extract a value from an html form and assign it as a variable in an external php script. This variable is essential for running a SQL query in a postgres database ...

phpjqueryhtml

Tips for placing multiple images onto one canvas

I am currently working on a web application that allows users to create sketches, define their positions and sizes, and then save them to a database. In another section of the website, I aim to retrieve these images and display them on a single canvas. To ...

javascripthtmlimagecanvasdraw

When the height of the first div increases, make sure the second div gets pushed down

Currently, I am working on creating accordion buttons that are wrapped within a div container. The goal is to keep them in a grid layout with 2 columns like the image below: https://i.sstatic.net/SmfYx.png However, when one of the accordion buttons is op ...

csssass

How can I retrieve the height of a hidden image in Internet Explorer?

I am encountering an issue with images that have been set to display:none. I am using javascript (document.getElementById('elem').height) to retrieve the height/width of these images. While this method works in most browsers, IE is reporting th ...

javascriptcssinternet-explorer-7

React js experiences a crash when it attempts to re-render with a different number of child elements

When working with react.js, I came across the need for a component that renders a 'tr' with either one or two 'td' elements, depending on its property. Here is an example: var Item = React.createClass({ content: function() { ...

javascripthtmlreactjs

What could be preventing the background color from changing when attempting to use style.backgroundColor?

My objective is to store the current tab background color in a variable and then use that variable to change the body color. However, for some reason it is not working as expected. Can you help me figure out why? const tabName = 'someId'; var ...

javascripthtml

Creating a multi-tiered dropdown menu in the navigation bar with the help of Bootstrap 4 and Angular 7

My goal is to implement a multilevel dropdown using bootstrap 4 and angular 7. While I successfully created a simple dropdown in the navbar following the official bootstrap documentation, I struggled to make the multilevel dropdown work. After referring ...

javascriptcssangulartwitter-bootstrapbootstrap-4

What sets minifying CSS apart from compressing CSS?

Recently, I was focused on enhancing my website's performance and decided to run a google developer performance test. The results were positive overall, but the google analyzer recommended compressing the CSS files for even better performance. Up unt ...

htmlcssperformanceperformance-testing

"Utilizing Twitter Bootstrap to create full-width input fields with pre

Presently utilizing bootstrap-2.1.1 In my row-fluid, I have 2 columns with input-prepends inside. Below is a snippet of code: <div class="row-fluid"> <div class="span6"> <ul> <li> <div class="input ...

csstwitter-bootstrap

css effect of background image transitioning on mouse hover

Is there a way to have an element on my webpage with a background image that follows the movement of the mouse when hovered over? I want it to be similar to this website: This is the HTML code I currently have: <section id="home" data-speed="3" data-t ...

javascriptjqueryhtmlcss

The appearance of online and local websites varies on a single screen and browser

My current dilemma revolves around the difference in appearance of my website when viewed locally versus online. Both versions are connected to the same git repository and use the same css file. Interestingly, I can view the page on both my local machine a ...

cssrenderingjsxnext.js

Basic PHP code converted into a JavaScript function for an onSubmit event within an HTML form

I have been trying to figure this out for hours. The goal is to submit a form only if one of the inputs matches a PHP echo. To simplify the script, it looks something like this: <head> </head> <body> <?php $A = rand(0,10); $B = r ...

javascriptphphtmlonsubmit

Steps to insert a column within an HTML document for PDF printing

Is there a way to create an HTML document that can be printed in PDF format but the column feature isn't functioning as expected? Would I need to use a specific library or tool? ...

htmldompdf

Reposition the navbar-brand

I need to adjust the position of my navbar-brand slightly to the right as it is currently overlapping with another button. How can I achieve this in my HTML code? Here's a snippet: <nav class="navbar navbar-expand-lg navbar-light bg-light"> ...

htmlbootstrap-4

Color-matching cells must be positioned in the same column within the gridbox consecutively

In my current project, I am dealing with a large number of sections. Each section contains one or two rows with columns ranging from 2 to 15, all of equal width. The cells of the same color are placed in the same column, and the layout looks like this: ht ...

htmlcssflexboxgrid-layout

Centered Navigation Bar Aligned with Header

I'm having trouble aligning my header vertically with the text in my nav-bar using Bootstrap 4.6. The nav-bar items are right-aligned, so the text isn't centered in the middle of the page like shown in picture 3. .jumbotron { background: #3 ...

htmlcssbootstrap-4

What is the best way to separate one dropdown area from another dropdown area?

I have two dropdown menus where, when an option with the value "other" is clicked, it generates a text area just below the dropdown menu. Both sections are functioning correctly, but I had to create separate parent wrappers for each in order to do so. How ...

javascriptjqueryhtmldynamic

Is there a way to stop the top nav from covering the first element of the side-nav in specific situations?

I'm grappling with the issue of how to prevent the side-nav from obscuring the top element in the vanilla Bootstrap 4 example provided below. Any tips? (Problem resolved - check below for solution) This problem is occurring not only on my website bu ...

htmlcsstwitter-bootstrapbootstrap-4

Learn the process of extracting a particular value from JSON data and displaying it in HTML by utilizing AngularJS's ng-repeat directive

As a newcomer to angularjs, I am encountering difficulties retrieving and displaying a specific value from a json file in order to showcase it on my view page using angularjs ng-repeat for image source. My goal is to repeat the json file based on a particu ...

javascriptjqueryhtmljsonangularjs