Отображение гибкого попутного ветра не работает в реакции

Итак, у меня есть компонент, реагирующий на этот рисунок ниже, и он должен быть отзывчивым:

Но когда я реализовал код с использованием попутного ветра и реагировал вместо того, чтобы выглядеть как на картинке ниже, он стал таким:

Я использую flex justify-between для его создания, и вот моя попытка:

const CardCalculation = () => {
  return (
    <div className = "flex justify-betwween">
      <div className = "w-[120px] h-[100px] m-2 absolute bg-[#d9d9d9]">
        <p className = "absolute text-2xl text-left text-[#e44]">N RCO 250gr</p>
        <p className = "absolute  text-xl text-left text-[#b4b4b4]">12x5cm</p>
        <p className = "absolute  text-xl text-left text-[#b4b4b4]">Rp. 82.000</p>
      </div>
      <div className = "flex flex-col justify-center items-center  absolute gap-2.5 px-[84px] py-3 rounded-md border border-[#f7d716]">
        <div className = "flex justify-start items-center flex-grow-0 flex-shrink-0 w-[104px] relative gap-4">
          <svg
            width = {12}
            height = {12}
            viewBox = "0 0 24 24"
            fill = "none"
            xmlns = "http://www.w3.org/2000/svg"
            className = "flex-grow-0 flex-shrink-0 w-6 h-6"
            preserveAspectRatio = "xMidYMid meet"
          >
            <rect
              x = {1}
              y = {1}
              width = {22}
              height = {22}
              rx = {11}
              stroke = "#F7D716"
              stroke-width = {2}
            />
            <g clip-path = "url(#clip0_83_406)">
              <rect
                width = "12.6316"
                height = "12.6316"
                transform = "translate(5.68457 5.6842)"
                fill = "#F7D716"
              />
              <path
                d = "M18.0226 7.74877C17.6318 7.35742 16.9972 7.35767 16.6058 7.74877L10.2292 14.1256L7.39513 11.2915C7.00378 10.9002 6.36942 10.9002 5.97808 11.2915C5.58673 11.6829 5.58673 12.3172 5.97808 12.7086L9.52058 16.2511C9.71612 16.4466 9.97254 16.5446 10.229 16.5446C10.4854 16.5446 10.7421 16.4469 10.9376 16.2511L18.0226 9.16579C18.414 8.77472 18.414 8.14009 18.0226 7.74877Z"
                fill = "white"
              />
            </g>
            <defs>
              <clippath id = "clip0_83_406">
                <rect
                  width = "12.6316"
                  height = "12.6316"
                  fill = "white"
                  transform = "translate(5.68457 5.6842)"
                />
              </clippath>
            </defs>
          </svg>
          <p className = "flex-grow-0 flex-shrink-0 text-lg text-left text-[#f7d716]">
            Edit
          </p>
        </div>
      </div>
      <div className = "flex flex-col justify-center items-center absolute mt-20 gap-2.5 px-[84px] py-3 rounded-md border border-[#e44]">
        <div className = "flex justify-start items-center flex-grow-0 flex-shrink-0 w-[104px] relative gap-4">
          <svg
            width = {24}
            height = {24}
            viewBox = "0 0 24 24"
            fill = "none"
            xmlns = "http://www.w3.org/2000/svg"
            className = "flex-grow-0 flex-shrink-0 w-6 h-6"
            preserveAspectRatio = "xMidYMid meet"
          >
            <rect
              x = {1}
              y = {1}
              width = {22}
              height = {22}
              rx = {11}
              stroke = "#EE4444"
              stroke-width = {2}
            />
            <g clip-path = "url(#clip0_83_388)">
              <path
                d = "M18.0226 7.74877C17.6318 7.35742 16.9972 7.35767 16.6058 7.74877L10.2292 14.1256L7.39513 11.2915C7.00378 10.9002 6.36942 10.9002 5.97808 11.2915C5.58673 11.6829 5.58673 12.3172 5.97808 12.7086L9.52058 16.2511C9.71612 16.4466 9.97254 16.5446 10.229 16.5446C10.4854 16.5446 10.7421 16.4469 10.9376 16.2511L18.0226 9.16579C18.414 8.77472 18.414 8.14009 18.0226 7.74877Z"
                fill = "#EE4444"
              />
            </g>
            <defs>
              <clippath id = "clip0_83_388">
                <rect
                  width = "12.6316"
                  height = "12.6316"
                  fill = "white"
                  transform = "translate(5.68457 5.6842)"
                />
              </clippath>
            </defs>
          </svg>
          <p className = "flex-grow-0 flex-shrink-0 text-lg text-left text-[#e44]">
            Copy
          </p>
        </div>
      </div>
    </div>
  );
};
export default CardCalculation;

Может ли кто-нибудь указать, какую строку я должен улучшить, или любую помощь в этом..., любая помощь в этом будет очень благодарна.

reactjs tailwind-css

05.01.2023 10:12

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Массив зависимостей в React

Все о массиве Dependency и его связи с useEffect.

Компонент против элемента в ReactJS - секрет оптимизации производительности за счет повторного использования элементов

Проще говоря, компонент - это фабрика для создания элементов.

Руководство по использованию хука useEffect для методов жизненного цикла React

Перейти к ответу Данный вопрос помечен как решенный

Ответы 3

Ваш первый div в блоке «justify-content» находится в абсолютной позиции, поэтому второй подходит слева, вы должны удалить позицию «absolute»

05.01.2023 10:28

Ответ принят как подходящий

Код нуждался в очень тонкой настройке. Основное, что я вижу, это то, что каждый div использует absolute, который помещает элементы в стек. Удалите эти абсолютные значения и попробуйте приведенный ниже код.

Попробуйте следующий код:

<div class = "justify-betwween flex flex-row">
  <div class = "m-2 h-[100px] w-2/12 bg-[#d9d9d9]"></div>
  <div class = "flex w-8/12 flex-col items-start justify-center gap-2 p-4">
    <p class = "text-left text-3xl text-[#e44]">N RCO 250gr</p>
    <p class = "text-left text-2xl text-[#b4b4b4]">12x5cm</p>
    <p class = "text-left text-2xl text-[#b4b4b4]">Rp. 82.000</p>
  </div>
  <div class = "w-2/12 p-2">
    <div class = "flex flex-col items-center justify-center gap-2.5 rounded-md border border-[#f7d716] py-3">
      <div class = "flex items-center justify-start md:gap-4">
        <svg width = "{24}" height = "{24}" viewBox = "0 0 24 24" fill = "none" xmlns = "http://www.w3.org/2000/svg" class = "h-6 w-6 flex-shrink-0 flex-grow-0" preserveAspectRatio = "xMidYMid meet">
          <rect x = "{1}" y = "{1}" width = "{22}" height = "{22}" rx = "{11}" stroke = "#F7D716" stroke-width = "{2}" />
          <g clip-path = "url(#clip0_83_406)">
            <rect width = "12.6316" height = "12.6316" transform = "translate(5.68457 5.6842)" fill = "#F7D716" />
            <path d = "M18.0226 7.74877C17.6318 7.35742 16.9972 7.35767 16.6058 7.74877L10.2292 14.1256L7.39513 11.2915C7.00378 10.9002 6.36942 10.9002 5.97808 11.2915C5.58673 11.6829 5.58673 12.3172 5.97808 12.7086L9.52058 16.2511C9.71612 16.4466 9.97254 16.5446 10.229 16.5446C10.4854 16.5446 10.7421 16.4469 10.9376 16.2511L18.0226 9.16579C18.414 8.77472 18.414 8.14009 18.0226 7.74877Z" fill = "white" />
          </g>
          <defs>
            <clippath id = "clip0_83_406">
              <rect width = "12.6316" height = "12.6316" fill = "white" transform = "translate(5.68457 5.6842)" />
            </clippath>
          </defs>
        </svg>
        <p class = "text-left text-lg text-[#f7d716]">Edit</p>
      </div>
    </div>
    <div class = "mt-[20px] flex flex-col items-center justify-center gap-2.5 rounded-md border border-[#e44] py-3">
      <div class = "flex items-center justify-start md:gap-4">
        <svg width = "{24}" height = "{24}" viewBox = "0 0 24 24" fill = "none" xmlns = "http://www.w3.org/2000/svg" class = "h-6 w-6 flex-shrink-0 flex-grow-0" preserveAspectRatio = "xMidYMid meet">
          <rect x = "{1}" y = "{1}" width = "{22}" height = "{22}" rx = "{11}" stroke = "#EE4444" stroke-width = "{2}" />
          <g clip-path = "url(#clip0_83_388)">
            <path d = "M18.0226 7.74877C17.6318 7.35742 16.9972 7.35767 16.6058 7.74877L10.2292 14.1256L7.39513 11.2915C7.00378 10.9002 6.36942 10.9002 5.97808 11.2915C5.58673 11.6829 5.58673 12.3172 5.97808 12.7086L9.52058 16.2511C9.71612 16.4466 9.97254 16.5446 10.229 16.5446C10.4854 16.5446 10.7421 16.4469 10.9376 16.2511L18.0226 9.16579C18.414 8.77472 18.414 8.14009 18.0226 7.74877Z" fill = "#EE4444" />
          </g>
          <defs>
            <clippath id = "clip0_83_388">
              <rect width = "12.6316" height = "12.6316" fill = "white" transform = "translate(5.68457 5.6842)" />
            </clippath>
          </defs>
        </svg>
        <p class = "text-left text-lg text-[#e44]">Copy</p>
      </div>
    </div>
  </div>
</div>

Вывод на большое устройство:

Вывод на маленьком устройстве:

Попутный ветер

простите, а это уже реагирует на экран..?

— 05.01.2023 10:43

извините, вы предоставляете код со статическими значениями ширины и высоты, и как вы можете ожидать, что он будет реагировать?

— 05.01.2023 10:47

Вместо этого упомяните вопрос, задающий конкретный макет и то, что он адаптивный, я мог бы дать вам адаптивный код. Вместо того, чтобы настраивать сломанный код.

— 05.01.2023 10:49

Извини за это

— 05.01.2023 10:53

Извините, что беспокою вас снова, но я попробовал свой собственный стиль, но у меня есть некоторые проблемы с этим... не могли бы вы взглянуть на него..., вот ссылка, которую я просил... stackoverflow.com/questions /75017205/…

— 05.01.2023 11:53

большое спасибо, чувак..., надеюсь, ты поможешь мне с этим последним вопросом..

— 05.01.2023 11:54

@nabatiadmin я предоставил код только для небольших устройств, дайте мне когда-нибудь. Я исправлю это для вас и сделаю его отзывчивым

— 05.01.2023 12:01

05.01.2023 10:28

Первый из absolute — это испорченный макет. Во-вторых, это немного многословно, поэтому легко потерять все нужные вам контейнеры. Есть также некоторые поля, которые не нужны, поскольку макет может использоваться для создания разделений.

Вот рабочий фрагмент (из-за предупреждений о попутном ветре я предлагаю вам просмотреть его в полноэкранном режиме). Чтобы увидеть это ясно, вы можете проверить этот попутный ветер (будьте осторожны, если копируете код, который className был изменен для класса, и самозакрывающиеся элементы не поддерживаются).

const CardCalculation = () => {
  return (
    <div className = "flex flex-row justify-between gap-1">
      <div className = "flex flex-row">
        {/* INFO: this is the grey box container */}
        <div className = "w-[120px] h-[100px] m-2 bg-[#d9d9d9]" />
        {/* INFO: this is the paper info container */}
        <div className = "flex flex-col items-start justify-center gap-1 p-2">
          <p className = "text-2xl text-left text-[#e44]"> N RCO 250 gr </p>
          <p className = "text-xl text-left text-[#b4b4b4]"> 12 x5cm </p>
          <p className = "text-xl text-left text-[#b4b4b4]"> Rp.82.000 </p>
        </div>
      </div>
      {/* INFO: finally this is the right-most container */}
      <div className = "h-full flex flex-col justify-center gap-3">
        <div className = "flex flex-col justify-center items-center gap-2.5 px-[84px] py-3 rounded-md border border-[#f7d716]">
          <div className = "flex justify-start items-center flex-grow-0 flex-shrink-0 w-[104px] relative gap-4">
            <svg
              width = {12}
              height = {12}
              viewBox = "0 0 24 24"
              fill = "none"
              xmlns = "http://www.w3.org/2000/svg"
              className = "flex-grow-0 flex-shrink-0 w-6 h-6"
              preserveAspectRatio = "xMidYMid meet"
            >
              <rect
                x = {1}
                y = {1}
                width = {22}
                height = {22}
                rx = {11}
                stroke = "#F7D716"
                strokeWidth = {2}
              />
              <g clipPath = "url(#clip0_83_406)">
                <rect
                  width = "12.6316"
                  height = "12.6316"
                  transform = "translate(5.68457 5.6842)"
                  fill = "#F7D716"
                />
                <path
                  d = "M18.0226 7.74877C17.6318 7.35742 16.9972 7.35767 16.6058 7.74877L10.2292 14.1256L7.39513 11.2915C7.00378 10.9002 6.36942 10.9002 5.97808 11.2915C5.58673 11.6829 5.58673 12.3172 5.97808 12.7086L9.52058 16.2511C9.71612 16.4466 9.97254 16.5446 10.229 16.5446C10.4854 16.5446 10.7421 16.4469 10.9376 16.2511L18.0226 9.16579C18.414 8.77472 18.414 8.14009 18.0226 7.74877Z"
                  fill = "white"
                />
              </g>
              <defs>
                <clippath id = "clip0_83_406">
                  <rect
                    width = "12.6316"
                    height = "12.6316"
                    fill = "white"
                    transform = "translate(5.68457 5.6842)"
                  />
                </clippath>
              </defs>
            </svg>
            <p className = "flex-grow-0 flex-shrink-0 text-lg text-left text-[#f7d716]">
              Edit
            </p>
          </div>
        </div>
        <div className = "flex flex-col justify-center items-center gap-2.5 px-[84px] py-3 rounded-md border border-[#e44]">
          <div className = "flex justify-start items-center flex-grow-0 flex-shrink-0 w-[104px] relative gap-4">
            <svg
              width = {24}
              height = {24}
              viewBox = "0 0 24 24"
              fill = "none"
              xmlns = "http://www.w3.org/2000/svg"
              className = "flex-grow-0 flex-shrink-0 w-6 h-6"
              preserveAspectRatio = "xMidYMid meet"
            >
              <rect
                x = {1}
                y = {1}
                width = {22}
                height = {22}
                rx = {11}
                stroke = "#EE4444"
                strokeWidth = {2}
              />
              <g clipPath = "url(#clip0_83_388)">
                <path
                  d = "M18.0226 7.74877C17.6318 7.35742 16.9972 7.35767 16.6058 7.74877L10.2292 14.1256L7.39513 11.2915C7.00378 10.9002 6.36942 10.9002 5.97808 11.2915C5.58673 11.6829 5.58673 12.3172 5.97808 12.7086L9.52058 16.2511C9.71612 16.4466 9.97254 16.5446 10.229 16.5446C10.4854 16.5446 10.7421 16.4469 10.9376 16.2511L18.0226 9.16579C18.414 8.77472 18.414 8.14009 18.0226 7.74877Z"
                  fill = "#EE4444"
                />
              </g>
              <defs>
                <clippath id = "clip0_83_388">
                  <rect
                    width = "12.6316"
                    height = "12.6316"
                    fill = "white"
                    transform = "translate(5.68457 5.6842)"
                  />
                </clippath>
              </defs>
            </svg>
            <p className = "flex-grow-0 flex-shrink-0 text-lg text-left text-[#e44]">
              Copy
            </p>
          </div>
        </div>
      </div>
    </div>
  );
};

const rootElement = document.getElementById("root");
ReactDOM.render(<CardCalculation />, rootElement);

<div id = "root"></div>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.development.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.development.js"></script>
<script src = "https://cdn.tailwindcss.com"></script>

простите, а это уже реагирует на экран..?

— 05.01.2023 10:43

flex обычно реагирует на изменения размера, корректируя его соответствующим образом, тем не менее, в вашем дизайне есть некоторые элементы, которые имеют ограничения по размеру и больше не будут меняться с определенной точки останова. Вы можете изменить макет в этой точке останова или устранить эти ограничения. Другой вариант — использовать flex-wrap.

— 05.01.2023 11:02

05.01.2023 10:36