Блог

Привет! Итак, я планирую сделать свой пользовательский интерфейс еще лучше, выровняв содержимое, т. Е. style={{textAlign:"justify"}} .

Таким образом, элементы будут занимать всю ширину Row , расширяясь при необходимости.

На данный момент пользовательский интерфейс выглядит так.

Вот мой объект (игнорируйте то же Id самое )

 const smartphones = [
    { topSearchCardId: 101,  description: "Apple"},
    { topSearchCardId: 101, description: "Samsung" },
    { topSearchCardId: 101,  description: "Google" },
    { topSearchCardId: 101,  description: "Xiomi" },
    { topSearchCardId: 101, description: "Huawei" },
    { topSearchCardId: 101,  description: "Xiomi" },
    { topSearchCardId: 101,  description: "LG" },
    { topSearchCardId: 101, description: "Nokia" },
    { topSearchCardId: 101, description: "Huawei" },
    { topSearchCardId: 101,  description: "Xiomi" },
    { topSearchCardId: 101,  description: "LG" },
    { topSearchCardId: 101, description: "Nokia" },
    { topSearchCardId: 101,  description: "Apple"},
    { topSearchCardId: 101, description: "Samsung" },
    { topSearchCardId: 101,  description: "Google" },
    { topSearchCardId: 101,  description: "Xiomi" },
    { topSearchCardId: 101, description: "Huawei" },
    { topSearchCardId: 101,  description: "Xiomi" },
    { topSearchCardId: 101,  description: "LG" },
    { topSearchCardId: 101, description: "Nokia" },
 

А вот и мой flex приятель. Я использую React так, поэтому его className .

 <Row>
  <div className="d-flex flex-wrap gap-2 widget-tag">
    {smartphones.map((report, key) => (
      <Link to="#">
        <div className="badge font-size-14 p-4 py-2 bg-light text-dark">{report.description}</div>
      </Link>
    ))}
  </div>
</Row>
 

Обновленное Изображение. используя justify-content:space-between; (Это то, что я хотел.)

Uisng .widget-tag{

В flexbox, я полагаю, justify-content:space-between; вероятно, сделал бы это. Однако это создаст неравномерные промежутки между ними, поскольку ваши гибкие элементы не имеют одинаковой ширины.

И другой вариант-вы можете использовать CSS-сетку, и все ваши дочерние кнопки будут одинаковой ширины:

Итак, в вашем родительском элементе (который станет вашим родительским контейнером) вы можете использовать следующее:

 .widget-tag{
  display:grid;
  grid-template-columns: repeat(9,1fr);
}
 

И вы можете поиграть в соответствии с вашими требованиями.