How to make auto width for columns?-CodePudding

I am having a row with columns.

And both row and css has the following properties.

.row {
  display: flex;
  width: 100%;
  justify-content: space-between;
}

.col {
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: space-around;
  cursor: pointer;
  background-color: #f0f2f5
}

<div >
  <a href="/">
   <div > 
     <img src="https://via.placeholder.com/100x100" alt="placeholder" />
     <span> ABC </span>
   </div>
  </a>
  <a href="/">
   <div >
     <img src="https://via.placeholder.com/100x100" alt="placeholder" />
     <span> DEF </span>
   </div>
  </a>
  <div > 
    <img src="https://via.placeholder.com/100x100" alt="placeholder" />
    <span> View All Applications </span>
  </div>
</div>

Issue here is that the first two columns doesn't occupy the width of last column automatically. It leads to more space after first and second column and also width of third column is higher than first and second.

Requirement:

Requirement is how to make all the three columns of equal space and width using flex properties?

Tried using flex: 1 to the column but it doesn't work.

CodePudding user response：

Your code does actually a good job. The only thing thats "breaking" your widht is the text in your last div. If you want the width of each box being the same, then you can give your span another class, as an example, which contains:

.txt-wrap{
    width: 100px;
    word-break: break-all;
}

For word-break you need anything to break the words around. Does it makes sense?

.row {
  display: flex;
  width: 100%;
  justify-content: space-between;
}

.col {
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: space-around;
  cursor: pointer;
  background-color: #f0f2f5
}

.txt-wrap {
  color: red;
}

<div >
  <a href="/">
   <div > 
     <img src="https://via.placeholder.com/100x100" alt="placeholder" />
     <span> ABC </span>
   </div>
  </a>
  <a href="/">
   <div >
     <img src="https://via.placeholder.com/100x100" alt="placeholder" />
     <span> DEF </span>
   </div>
  </a>
  <div > 
    <img src="https://via.placeholder.com/100x100" alt="placeholder" />
    <span > View All Applications </span>
  </div>
</div>

CodePudding user response：

Add flex: 1; to your .col class. And also add flex to a tag as follows:

.row a{
  display: flex;
  flex: 1;
  background-color: #f0f2f5
}

Check it here.

.row {
  display: flex;
  width: 100%;
  justify-content: space-between;
}

.row a{
  display: flex;
  flex: 1;
}

.col {
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: space-around;
  cursor: pointer;
  flex: 1;
}

<div >
  <a href="/" style='background-color: blue;'>
   <div > 
     <img src="https://via.placeholder.com/100x100" alt="placeholder" />
     <span> ABC </span>
   </div>
  </a>
  <a href="/" style='background-color: red;'>
   <div >
     <img src="https://via.placeholder.com/100x100" alt="placeholder" />
     <span> DEF </span>
   </div>
  </a>
  <div  style='background-color: green;'> 
    <img src="https://via.placeholder.com/100x100" alt="placeholder" />
    <span> View All Applications </span>
  </div>
</div>

Here is the fiddle.

CodePudding user response：

If you want to prevent flex from growing one of your columns, then you can control the width of each element in the flex-box. Since your span is causing an overflow, git it a display of inline-block (span is inline by default, which doesn't accept a width property), and then give it a max-width of your desired column width. This will make flex give your columns equal width automatically.

.row {
  display: flex;
  width: 100%;
  justify-content: space-between;
}

span {
  display: inline-block;
  max-width: 100px;
}

.col {
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: space-around;
  cursor: pointer;
  background-color: #f0f2f5
}

<div >
  <a href="/">
   <div > 
     <img src="https://via.placeholder.com/100x100" alt="placeholder" />
     <span> ABC </span>
   </div>
  </a>
  <a href="/">
   <div >
     <img src="https://via.placeholder.com/100x100" alt="placeholder" />
     <span> DEF </span>
   </div>
  </a>
  <div > 
    <img src="https://via.placeholder.com/100x100" alt="placeholder" />
    <span> View All Applications </span>
  </div>
</div>