Неравные элементы с использованием Flex Box Tailwind CSS

У меня есть области сечения, которые я хочу иметь равными элементами. Одна сторона — это просто изображение, а другая — контент. Я использую Tailwind CSS и уверен, что у меня есть правильные классы. Разделы Div объявлены как Flex, в то время как каждый дочерний элемент имеет Flex-базис 0 и Flex рост 1. Div содержимого по-прежнему немного больше, чем мой div изображения.

 <section class="section-one flex flex-col-reverse md:flex-row-reverse">
  <div class="basis-0 grow p-6 text-center md:text-left md:flex md:flex-col md:justify-center md:items-center">
    <div>
      <h2 class="font-fraunces text-4xl mb-4 md:text-left md:max-w-md">Stand our to the right audience</h2>
      <p class="font-barlow text-gray-500 text-lg p-4 mb-6 md:max-w-md md:p-0">Using a collaborative formula of designers, researchers, photographers, videographers and copywriters, we'll build and extend your brand in digital places.</p>
      <div class="flex flex-col">
        <a href="#" class="font-fraunces uppercase z-1">Learn More</a>
        <span class="bg-rose-300/75 w-32 mx-auto h-4 rounded-full md:m-0"></span>
      </div>
    </div>
  </div>
  <div class="basis-0 grow">
    <img src="images/desktop/image-stand-out.jpg" alt="" class="w-full" />
  </div>
</section>

Отвечает ли это на ваш вопрос? Как заставить flexbox включать отступы в расчеты?

— 09.04.2022 12:20

css flexbox tailwind-css

09.04.2022 07:59

Стилизация и валидация html-формы без использования JavaScript (только HTML/CSS)

Будучи разработчиком веб-приложений, легко впасть в заблуждение, считая, что приложение без JavaScript не имеет права на жизнь. Нам становится удобно...

Четыре эффективных способа центрирования блочных элементов в CSS

У каждого из нас бывали случаи, когда нам нужно отцентрировать блочный элемент, но мы не знаем, как это сделать. Даже если мы реализуем какой-то...

Современные подходы к организации и работе с CSS в проекте

Любой, кто писал CSS в течение некоторого времени, знает о сложностях, которые с этим связаны, и о том, насколько это может быть болезненно.

Как использовать псевдокласс :hover в Tailwind только тогда, когда это действительно необходимо (при наличии курсора)

Я люблю Tailwind. Раньше я относился к нему с подозрением, но как только я попробовал его использовать, я был поражен тем, сколько времени он мне...

Именование классов CSS: Конвенция именования BEM

Сопровождаемость кода, сама по себе, является пульсирующим эффектом нескольких факторов. Когда часть программного обеспечения читабельна, ясна,...

Поговорим о глассморфизме (Glassmorphism)

В 2021 году Glassmorphism был огромным трендом в веб-дизайне. Я всегда люблю размытость в UI / UX, она делает пользовательский интерфейс более богатым...

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

Ответы 2

Используя сетку, вы можете добиться этого

Вот лучшее объяснение того, как использовать систему сетки в tailwindcss.

Я сделал код для вас, пожалуйста, проверьте здесь: https://play.tailwindcss.com/wldkQ1txrU

09.04.2022 15:18

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

Если вы удалите свой класс p-6 и добавите его в div ниже, он будет работать.

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.19/tailwind.min.css" integrity="sha512-wnea99uKIC3TJF7v4eKk4Y+lMz2Mklv18+r4na2Gn1abDRPPOeef95xTzdwGD9e6zXJBteMIhZ1+68QC5byJZw==" crossorigin="anonymous" referrerpolicy="no-referrer" />

<section class="section-one flex flex-col-reverse md:flex-row-reverse">
  <div class="basis-0 grow remove-this-p-6 text-center md:text-left md:flex md:flex-col md:justify-center md:items-center">
    <div class="p-6"> <!-- add here your padding -->
      <h2 class="font-fraunces text-4xl mb-4 md:text-left md:max-w-md">Stand our to the right audience</h2>
      <p class="font-barlow text-gray-500 text-lg p-4 mb-6 md:max-w-md md:p-0">Using a collaborative formula of designers, researchers, photographers, videographers and copywriters, we'll build and extend your brand in digital places.</p>
      <div class="flex flex-col">
        <a href="#" class="font-fraunces uppercase z-1">Learn More</a>
        <span class="bg-rose-300/75 w-32 mx-auto h-4 rounded-full md:m-0"></span>
      </div>
    </div>
  </div>
  <div class="basis-0 grow">
    <img src="https://via.placeholder.com/500" alt="" class="w-full" />
  </div>
</section>

 <section class="section-one flex flex-col-reverse md:flex-row-reverse ">
  <div class="basis-0 grow">
    <img src="https://via.placeholder.com/500" alt="" class="w-full" />
  </div>
  <div class="basis-0 grow remove-this-p-6 text-center md:text-left md:flex md:flex-col md:justify-center md:items-center">
    <div class="p-6"><!-- add here your pading -->
      <h2 class="font-fraunces text-4xl mb-4 md:text-left md:max-w-md">Stand our to the right audience</h2>
      <p class="font-barlow text-gray-500 text-lg p-4 mb-6 md:max-w-md md:p-0">Using a collaborative formula of designers, researchers, photographers, videographers and copywriters, we'll build and extend your brand in digital places.</p>
      <div class="flex flex-col">
        <a href="#" class="font-fraunces uppercase z-1">Learn More</a>
        <span class="bg-rose-300/75 w-32 mx-auto h-4 rounded-full md:m-0"></span>
      </div>
    </div>
  </div>
</section>

09.04.2022 16:04

Другие вопросы по теме

Как предотвратить перенос DIV на вторую строку?

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

Оборачиваем вещи в css/flex

Почему новая строка НЕ начинается после завершения flexbox?

Центрирование элемента p внутри контейнера flex внутри контейнера сетки

Как использовать flexbox для получения изображения и текста внутри моей границы

Можно ли использовать фиксированную минимальную и максимальную ширину для повторяющихся и переносимых столбцов в сетке CSS?

Почему моя навигационная панель flexbox не выравнивается правильно?

Как заставить flex-box работать с вложенным дочерним элементом, которому нужен усеченный текст?

Неравные элементы с использованием Flex Box Tailwind CSS

Ответы 2

Другие вопросы по теме

Похожие вопросы