Make the longest content item set the width for the entire column

问题

As you can see in the snippet I've applied to this question, the alignment is ruined because the different divs have different width based on the text inside of them.

I want the biggest div's width of each column to be determined by the length of the text inside of it and have all the rest of the divs to take that width. I don't want to hardcode any width and I can't alter the HTML structure too much.

I want the end result to be something like this:

Is there anything that can be done

.match {
    display: flex;
}
.justify-center {
    display: flex;
    justify-content: center;
    align-items: center;
}
.matches-container div {
    margin-right: 20px;
    padding: 10px;
}
.match:nth-child(odd) {
  background-color: #d0d0d0;
}
.match:nth-child(even) {
  background-color: #e4b2b2;
}

<div class='matches-container'>
    <div class='match'>
        <div class='justify-center'>
            <p>George</p>
        </div>
        <div class='justify-center'>
            <p>Level 10</p>
        </div>
        <div class='justify-center'>
            <p>Ranger</p>
        </div>
    </div>
    <div class='match'>
        <div class='justify-center'>
            <p>Mia</p>
        </div>
        <div class='justify-center'>
            <p>Level 10</p>
        </div>
        <div class='justify-center'>
            <p>Ranger</p>
        </div>
    </div>
    <div class='match'>
        <div class='justify-center'>
            <p>Ivan</p>
        </div>
        <div class='justify-center'>
            <p>Level 9999</p>
        </div>
        <div class='justify-center'>
            <p>Wizard</p>
        </div>
    </div>
</div>

回答1:

The primary container (.matches-container) has three flex items (.match).

Those items can be set to track each others' width because they are siblings. There is a direct association between them, as they share the same parent.

However, the divs you want to target (.justify-center) are descendants of the items (.match), making them cousins, meaning they have no direct association and there are no natural CSS solutions for relative sizing.

Hence, unless you want to make all your content items siblings, or use tables or JavaScript, you can't get your content items in one row to set the width of content items in other rows.

More information:

Equal height children of flex items
Equal height children of grid items

回答2:

Change the css to the following. Anyhow the width won't go more than 33% even if you put width: 50% but specifying the width will solve your problem. I also removed the justify-content: center to make sure it will align left.

.justify-center {
    display: flex;
    align-items: center;
    width: 33%;
    text-align: left;
}

回答3:

If you really want a descendant element defining column widths and want the same markup, then you'll have to switch your display property to table values, forging flexbox.

If what you're displaying is tabular data, and it does appear that way, then it is okay to use a <table>.

.matches-container {
   display: table;
}
.match {
    display: table-row;
}
.match > div {
   display: table-cell;
}
.justify-center {
    display: flex;
    justify-content: center;
    align-items: center;
}
.matches-container div {
    margin-right: 20px;
    padding: 10px;
}
.match:nth-child(odd) {
  background-color: #d0d0d0;
}
.match:nth-child(even) {
  background-color: #e4b2b2;
}

<div class='matches-container'>
    <div class='match'>
        <div class='justify-center'>
            <p>George</p>
        </div>
        <div class='justify-center'>
            <p>Level 10</p>
        </div>
        <div class='justify-center'>
            <p>Ranger</p>
        </div>
    </div>
    <div class='match'>
        <div class='justify-center'>
            <p>Mia Mia Mia Mia Mia Mia Mia</p>
        </div>
        <div class='justify-center'>
            <p>Level 10</p>
        </div>
        <div class='justify-center'>
            <p>Ranger</p>
        </div>
    </div>
    <div class='match'>
        <div class='justify-center'>
            <p>Ivan</p>
        </div>
        <div class='justify-center'>
            <p>Level 9999</p>
        </div>
        <div class='justify-center'>
            <p>Wizard</p>
        </div>
    </div>
</div>

回答4:

Displaying the data in a table would be the simplest solution

td {
padding: 1rem
}

<table>
 <tr>
  <td>George</td>
  <td>Level 10</td>
  <td>Ranger</td>
 </tr>

 <tr>
  <td>Mia</td>
  <td>Level 10</td>
  <td>Ranger</td>
 </tr>

 <tr>
  <td>Ivan</td>
  <td>Level 9999</td>
  <td>Wizard</td>
 </tr>
</table>

回答5:

You can try by changing around your CSS:

.matches-container {
    display: flex;
}
.justify-center {
    align-items: center;
    padding: 10px;
}
.match div:nth-child(odd) {
  background-color: #d0d0d0;
}
.match div:nth-child(even) {
  background-color: #e4b2b2;
}
.match{
  justify-content: flex-start;
}

<div class='matches-container'>
    <div class='match'>
        <div class='justify-center'>
            <p>George</p>
        </div>
        <div class='justify-center'>
            <p>Mia</p>
        </div>
        <div class='justify-center'>
            <p>Ivan</p>
        </div>
    </div>  
     <div class='match'>
        <div class='justify-center'>
            <p>Level 10</p>
        </div>
        <div class='justify-center'>
            <p>Level 10</p>
        </div>
        <div class='justify-center'>
            <p>Level 9999</p>
        </div>
    </div>
    <div class='match'>
        <div class='justify-center'>
            <p>Ranger</p>
        </div>
        <div class='justify-center'>
            <p>Ranger</p>
        </div>
        <div class='justify-center'>
            <p>Wizard</p>
        </div>
    </div>
</div>

https://jsfiddle.net/kzec0798/

来源：https://stackoverflow.com/questions/57858638/make-the-longest-content-item-set-the-width-for-the-entire-column

标签

html

css

flexbox