adjustable: n with a variety of n items

I'm currently working on a component that involves circles and lines, and I'm trying to gain a better understanding of how flexbox works its magic. Specifically, I want to dive deeper into the flex property.

Visually, all three versions have the same number of items, but the first one appears normal while the other two do not scale correctly.

What is causing this issue?

How can it be resolved?

      .chart {
        display: flex;
        flex-direction: row;
        align-items: center;
        padding: 0 15px;
        margin-bottom: 50px;
      }
      .dot-black {
        width: 8px;
        height: 8px;
        border-radius: 4px;
        background: black;
      }

      .dot-grey {
        width: 22px;
        height: 22px;
        border-radius: 11px;
        background: grey;
      }

      .dot-green {
        width: 22px;
        height: 22px;
        border-radius: 11px;
        background: green;
      }

      .line-black {
      height: 2px;
      background: black;
      flex: 1;
      }

      .line-grey {
      height: 2px;
      background: grey;
      flex: 1;
      }

      .gradient {
    display: flex;
    opacity: 0.2;
    flex: 6;
    align-items: center;
      }
    <div class="chart">
      <div class="gradient" style="flex: 1">
        <span class="dot-black"></span>      
        <span class="line-black"></span>   
        <span class="dot-grey"></span> 
      </div>  
      <span class="line-grey"></span>
      <span class="dot-grey"></span>          
      <span class="line-grey"></span>
      <span class="dot-grey"></span>          
      <span class="line-grey"></span>
      <span class="dot-grey"></span>          
      <span class="line-grey"></span>
      <span class="dot-grey"></span>          
      <span class="line-grey"></span>
      <span class="dot-grey"></span>    
    </div>

    <div class="chart">
      <div class="gradient" style="flex: 1">
        <span class="dot-black"></span>      
        <span class="line-black"></span>   
        <span class="dot-grey"></span> 
        <span class="line-grey"></span>
        <span class="dot-grey"></span>  
      </div>       
      <span class="line-grey"></span>
      <span class="dot-grey"></span>          
      <span class="line-grey"></span>
      <span class="dot-grey"></span>          
      <span class="line-grey"></span>
      <span class="dot-grey"></span>          
      <span class="line-grey"></span>
      <span class="dot-grey"></span>    
    </div>

    <div class="chart">
      <div class="gradient" style="flex: 2">
        <span class="dot-black"></span>      
        <span class="line-black"></span>   
        <span class="dot-grey"></span> 
        <span class="line-grey"></span>
        <span class="dot-grey"></span>  
      </div>       
      <span class="line-grey"></span>
      <span class="dot-grey"></span>          
      <span class="line-grey"></span>
      <span class="dot-grey"></span>          
      <span class="line-grey"></span>
      <span class="dot-grey"></span>          
      <span class="line-grey"></span>
      <span class="dot-grey"></span>    
    </div>

htmlcssflexbox

Answer №1

When using flex: 1, each element in the flexbox will take up an equal division of available space. In a container with elements having the gradient class and flex: 1, those elements are considered as a single child within the chart flexbox. This results in compressing two sets of lines/dots into the space intended for one, but the size of each flex unit is larger due to fewer children.

The discrepancy on the third example occurs because the dot elements have static sizes. Combining a line with a dot inside a flex: 1 container will use the width of flex: 1 plus the dot's width. As a result, it only occupies the allotted space from even division, leading to the slightly smaller first segment in the first example.

A solution is to group items that need to be evenly sized in containers with flex: 1 and control their styles using another class.

You can view an example I created here.

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

Styling elements with CSS to create horizontal and vertical lines between them

Struggling to replicate the design elements from this image using CSS. Specifically, I need help creating a horizontal yellow line over the title "nossos numeros" and vertical blue lines between "Cursos", "Alunos", and "Aulas". I am working with Bootstrap ...

csstwitter-bootstrap-4

A step-by-step guide on utilizing jQuery to cyclically change the background color of elements upon clicking, and resetting the colors upon clicking another element

So I've been working on a solution to change the background color for accessibility purposes on a client's website. To achieve this, I have a set of div elements with different background colors and I'm using jQuery to update the body backgr ...

jqueryhtmlcss

Maintaining the image's aspect ratio using the Next Image component

Currently, I am using Next's Image component to display a logo. Although the image itself is 1843x550 px, I have specified the width and height properties to adjust it to fit within a space of 83x24 px. However, due to a slightly different aspect rati ...

htmlcssreactjsimagenext.js

What is the best way to incorporate a mute/unmute button into this automatically playing audio?

Seeking assistance in adding a mute button for the background sound on my website. Can anyone provide guidance on how to achieve this? Below is the HTML code responsible for playing the sound: <audio id="sound" autoplay="autoplay" ...

javascripthtmlgoogle-chrome-extension

I am having issues with my dropdown-list on my second script not functioning properly

Hello there! I'm new to this platform and English is not my strong suit, so bear with me. I've encountered an issue in my code that I need help with. Step 1: I successfully created the first dropdown list. Step 2: The second dropdown l ...

javascriptjqueryhtmlselect

Decrease the font size of text using intervals in CSS

I'm facing a challenge where I need to decrease the font size by 10% every 2 seconds. <div class="shrink"> text </div> .shrink{ transition: 2s linear all; font-size : 20px; } Is there a way to achieve this using only CSS? ...

css

Eliminating padding from columns results in the appearance of a horizontal scrollbar

I needed to eliminate the padding from the bootstrap grid column classes. So I went ahead and did just that .col-x { padding: 0; } However, this action ended up causing the entire layout to break as a horizontal scrollbar appeared. I've put to ...

htmlcsstwitter-bootstrapbootstrap-4

Using the position property of relative on a DIV element causes a gap to appear between the DIV and the next

Two div elements are placed consecutively. When I move the first div using position: relative and top: -60px, it creates a gap between them. Take a look at this example here: https://codepen.io/dusannis/pen/oNgBpoK If you notice, there is a noticeable ga ...

css

Customize DataTables selector by modifying its frame, font, and alignment

I'm experiencing issues with customizing the page selector in DataTables. Although I managed to change the background color to black, the frame around it remains blue. The font color of unselected pages and the "Next" button also do not reflect the c ...

jqueryhtmlcssdatatables

Looking to verify a disabled select element and adjust the opacity of that element when it is disabled

$_product = $this->getProduct(); $_attributes = Mage::helper('core')->decorateArray($this->getAllowAttributes()); ?> <?php if ($_product->isSaleable() && count($_attributes)):?> <dl> <?php foreach($_attrib ...

javascriptjqueryhtmlcssmagento-1.9

Make sure the image is aligned in line with the unordered list

I've been having trouble trying to display an image inline with an unordered list. Here's the HTML code: <div class="customer-indiv man"> <a class="customer_thumb" href="/fan/332profile.com"> <img src="http://i.imgur.com/Wi ...

htmlcss

The ultimate HTML5 code that stands above the rest

As newcomers to mobile technology, we now have our HTML5 page operational with PHP. Our next step is to transition to mobile. Whether it's through a native app or mobile web, the specific platform doesn't matter in our current situation. What we ...

html

Enhance your viewing experience with the Zoom feature that activates when

I recently noticed on that I am able to zoom/enlarge a photo by clicking on it. Is there a way for me to incorporate this feature without purchasing the entire theme? While I understand the theme is designed for purchase, I only need this specific functi ...

javascripthtmlzooming

Struggling with evenly positioning 6 elements in two rows using CSS

For positioning 6 different elements on a webpage, I've experimented with various methods: I initially tried stacking two unordered lists vertically but faced issues with scaling when stretching the page. Another attempt was using a table, but I stru ...

htmlcss

Postpone the execution of the toggleClass function

I have a tab that, when clicked, fades in to reveal content loaded with AJAX. However, the content loads immediately upon clicking the button. I attempted to use toggleClass with delay, but it was unsuccessful. How can I effectively delay the loading of t ...

htmljquerycss

Printing long contents on Chrome's ion-modal-view is not supported on every page

I have tried various solutions found in articles but have not been successful. Here is an example of one such attempt: @media print { .modal { position: absolute; left: 0; top: 0; margin: 0; padding: 0; visibility: visible; / ...

javascriptcssprintingmodal-dialogionic-v1

The div does not extend fully across the page

I have tried following similar instructions on Stackoverflow but to no avail. Even after setting margin:0 and padding:0 in my code, the issue persists. The first div represents the side bar, the second div is the content (blue), and there is mysterious wh ...

htmlcss

Can you explain the purpose of the text-align property set to justify-all?

Can you explain what the CSS property text-align: justify-all does? According to MDN, it should justify even the content of the last line. However, I am not seeing any changes in my Chrome browser: <p style="text-align: justify-all"> one two thre ...

htmlcssw3c

Can an unordered list be nested inside an inline list item in HTML or XHTML?

Take note that the li with child ul is set to display:inline - example code provided below <style type="text/css"> ul.nav_main li { display: inline } ul.nav_submenu li { display: block } </style> <ul class="nav_main"> <li>I ...

htmlcss

Arranging divs for dynamic movement with window resizing

Seeking a solution to have words on my background image function as links, I planned to place transparent divs over the words in the background. However, struggling with positioning these divs accurately as the window is resized. Code Snippet: <div id ...

htmlcss