Flex WRAP discussion

No that’s tabular data and should be a table :slight_smile:

Remember flexbox is not a grid. It does not match columns to columns (unless you fix widths in some ways). Flexbox is more about horizontal alignment but when you explicitly need columns and rows to match then you need CSS grid. However in this case the data is tabular so an html table is the semantic element for the job and you get automatic row and column alignment built in for free :slight_smile:

In your example you can achieve what you want but will only appear to work because you have the same content in each. If you add the margin:auto to the featuretable but remove the flex from ftable then that will achieve what you were expecting.

.ftable {
  /*display: flex;
  flex-direction: column;*/
  border: 2px solid red;
}
.featuretable {
  display: flex;
  justify-content: space-between;
  border: 2px solid red;
  max-width: 900px;
  margin:auto;
  /*width: 900px;*/
}
.featuretable .left, 
.featuretable .middle, 
.featuretable .right {
  border: 2px solid red;
}

However should you add content then this will happen.

Save yourself all that hassle and use a table which is the correct tool for that job. If you want to use flexbox then you would need to give a width to the left and right columns to keep them equal.

2 Likes