Is it possible to adjust the flex-wrap limit?

I have three elements within a single div. The third element drops below the others when the screen width reaches a certain threshold, creating a pyramid effect. How can I adjust this threshold?

<div className="flex justify-center items-center flex-wrap space-x-[10rem] mt-20">
    <div className="flex justify-center items-center align-middle select-none w-[13rem] h-[16rem] rounded-[0.3rem] bg-gradient-to-r from-indigo-500 via-purple-500 to-pink-500 skew-x-[15deg]">
      <div className="absolute justify-center items-center align-middle w-[18rem] h-[12rem] bg-transculent backdrop-blur-[0.625rem] rounded-[0.3rem]">
        <div className="flex justify-center text-center mt-4">
          <span className="flex font-semibold skew-x-[-15deg]">Technologies</span>
        </div>
        <div className="flex items-center justify-center text-center align-middle mt-6">
          <span className="flex skew-x-[-15deg]"></span>
        </div>
      </div>
    </div>

    <div className="flex justify-center items-center align-middle select-none w-[13rem] h-[16rem] rounded-[0.3rem] bg-gradient-to-r from-[#4dff03]  to-[#00d0ff] skew-x-[15deg]">
      <div className="absolute justify-center items-center align-middle w-[18rem] h-[12rem] bg-transculent backdrop-blur-[0.625rem] rounded-[0.3rem]">
        <div className="flex justify-center text-center mt-4">
          <span className="flex font-semibold skew-x-[-15deg]">My values</span>
        </div>
        <div className="flex items-center justify-center text-center align-middle mt-6">
          <span className="flex skew-x-[-15deg]"></span>
        </div>
      </div>
    </div>

    <div className="flex justify-center items-center align-middle select-none w-[13rem] h-[16rem] rounded-[0.3rem] bg-gradient-to-r from-pink-500 to-yellow-500 skew-x-[15deg]">
      <div className="absolute justify-center items-center align-middle w-[18rem] h-[12rem] bg-transculent backdrop-blur-[0.625rem] rounded-[0.3rem]">
        <div className="flex justify-center text-center mt-4">
          <span className="flex font-semibold skew-x-[-15deg]">Properties</span>
        </div>
        <div className="flex items-center justify-center text-center align-middle mt-6">
          <span className="flex skew-x-[-15deg]"></span>
        </div>
      </div>
    </div>
  </div>
htmlcssnext.jsflexboxtailwind-css

Answer №1

You can optimize the layout by using gap-[10rem] instead of space-x-[10rem]. Additionally, consider replacing justify-center with justify-between to automatically create gaps without defining a constant value.

To prevent items from flowing to another line, avoid using flex-wrap in this scenario.

flex-wrap:

The flex-wrap property determines whether flex items should be constrained to one line or allowed to flow across multiple lines.

Optimized code example:

<div className="flex justify-between items-center mt-20">
    <div className="flex justify-center items-center align-middle select-none w-[13rem] h-[16rem] rounded-[0.3rem] bg-gradient-to-r from-indigo-500 via-purple-500 to-pink-500 skew-x-[15deg]">
      <div className="absolute justify-center items-center align-middle w-[18rem] h-[12rem] bg-transculent backdrop-blur-[0.625rem] rounded-[0.3rem]">
        <div className="flex justify-center text-center mt-4">
          <span className="flex font-semibold skew-x-[-15deg]">Technologies</span>
        </div>
        <div className="flex items-center justify-center text-center align-middle mt-6">
          <span className="flex skew-x-[-15deg]"></span>
        </div>
      </div>
    </div>

    <div className="flex justify-center items-center align-middle select-none w-[13rem] h-[16rem] rounded-[0.3rem] bg-gradient-to-r from-[#4dff03]  to-[#00d0ff] skew-x-[15deg]">
      <div className="absolute justify-center items-center align-middle w-[18rem] h-[12rem] bg-transculent backdrop-blur-[0.625rem] rounded-[0.3rem]">
        <div className="flex justify-center text-center mt-4">
          <span className="flex font-semibold skew-x-[-15deg]">My values</span>
        </div>
        <div className="flex items-center justify-center text-center align-middle mt-6">
          <span className="flex skew-x-[-15deg]"></span>
        </div>
      </div>
    </div>

    <div className="flex justify-center items-center align-middle select-none w-[13rem] h-[16rem] rounded-[0.3rem] bg-gradient-to-r from-pink-500 to-yellow-500 skew-x-[15deg]">
      <div className="absolute justify-center items-center align-middle w-[18rem] h-[12rem] bg-transculent backdrop-blur-[0.625rem] rounded-[0.3rem]">
        <div className="flex justify-center text-center mt-4">
          <span className="flex font-semibold skew-x-[-15deg]">Properties</span>
        </div>
        <div className="flex items-center justify-center text-center align-middle mt-6">
          <span className="flex skew-x-[-15deg]"></span>
        </div>
      </div>
    </div>
</div>
  1. Replaced space-x-[10rem] with gap-[10rem].
  2. Avoided using flex-wrap.
  3. Substituted justify-center with justify-between.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Add aesthetic flair to scrollable containers

I am currently working on displaying data in columns using ngFor. However, I've run into an issue where the styles I apply to the column div are only visible on the top part of the column. As I scroll down to the bottom, the styles disappear. I believ ...

htmlcssangular

Mastering the Art of Scrolling to a Specific Div with jQuery Animation

I've been searching for a solution on stack overflow, but because I'm not very proficient in jquery, I haven't been successful. My question is, how can I smoothly scroll from the top of the page to a specific div? I've successfully ach ...

javascriptjqueryhtmlscroll

The initial JavaScript load shared by all users is quite large in the next.js framework

Currently working on a project using the Next.js framework and facing an issue where the First Load JS shared by all pages is quite heavy. I am looking for advice on possible strategies to reduce the weight of the JS file, and also wondering if there ...

javascriptreactjsnext.js

Display the button only if the specified condition aligns with the input data

I am working on a project where I have an input text field that retrieves data from a database using a combination of JavaScript and PHP. get.html is responsible for fetching the data through JavaScript. function showUser(str) { if (str == "") { ...

javascriptphpjqueryhtmlmysql

Issues encountered with certain Tailwind styles functioning improperly when deployed in a production environment with Next.js

It seems that there are some style issues occurring in the production build hosted on Netlify for a specific component. The problematic component is a wrapper located at ./layout/FormLayout.tsx. Below is the code for this wrapper: const FormLayout: React.F ...

javascriptcssreactjsnext.jstailwind-css

Adjust the alignment of items in the NavBar using BootStrap to ensure they

I'm having trouble centering the contents of my Nav Bar, and for some reason, everything seems to be left-aligned instead of centered. I haven't used float: left anywhere, so I'm not sure why it's not working as expected. The goal is ...

htmlcsstwitter-bootstrapnav

Issues with the Diagonal HTML Map functionality

I'm seeking assistance to implement a unique Google Maps Map on my webpage. I have a particular vision in mind - a diagonal map (as pictured below). My initial approach was to create a div, skew it with CSS, place the map inside, and then skew the ma ...

javascripthtmlcss

Double dragenter events triggered before dragleave in HTML5 drag and drop functionality

Currently, I'm researching HTML5 Drag and Drop functionality by using this resource. However, I've encountered an issue with the dragenter event that seems to fire twice for child elements before the dragleave event. Because of this, the dashed b ...

javascriptjqueryhtmlcss

How can I reset a CSS position sticky element using JavaScript?

I have created a page where each section fills the entire screen and is styled using CSS position: sticky; to create a cool layered effect. Check it out here: https://codesandbox.io/s/ecstatic-khayyam-cgql1?fontsize=14&hidenavigation=1&theme=dark ...

javascripthtmlcssvue.js

Even when the archive data is Updated in React.js and Next.js, the items within the archive remain unchanged despite any alterations made to

I am currently working on a project using react (nextjs). On the backend, I have products and multilevel categories. I have successfully fetched the data from an API and displayed it on /categories/[slug].jsx. The category details and products for each cat ...

reactjsnext.js

When using next-with-apollo, server-side rendering (SSR) is not functional as the request is performed

I am facing an issue with my code as I attempt to utilize https://github.com/lfades/next-with-apollo, next-with-apolo. Despite following the setup, server-side rendering (SSR) is not working for me and it seems like the client call is still being made. If ...

reactjsnext.jsapollo-client

Exploring the process of accessing a NextJs API to retrieve data directly from MongoDB

I have developed an e-commerce products API that retrieves data from a MongoDb database. import dbConnect from "../../../lib/mongodb"; import Products from "../../../models/Products"; export default async function handler(req, res) { ...

reactjsmongodbnext.jsreact-admin

The Calendar Widget in jQuery UI

Can someone help me figure out how to change the maxDate based on the minDate plus one week in this code snippet? Currently, the maxDate is calculated from the current day, but I need it to be dynamic. Here's the code: $( function() { $("#dat ...

jqueryhtml

Tips for styling jqgrid header columns with CSS

Currently, I am creating a table using jqgrid. One of my objectives is to modify the background color and text color of the header. In my attempts to achieve this, I am experimenting with applying a class to the header. How can I effectively implement th ...

jquerycssjqgrid

Adjusting the size of a neighboring div to match the width of the audio control component

Looking for a solution with CSS styling: I have a parent div element and two nested div elements, one containing an audio control of unknown length. My query is how to make the first nested div adjust its width based on the audio control. The goal is for ...

htmlcss

Create a container div with a set width and height, and use

When wrapping a div, I typically rely on the overflow:hidden method. However, I am wondering if there are alternative methods to wrap divs that do not involve using hidden overflow. This is because I have some specific concerns that prevent me from utili ...

htmlcssoverflow

Looking to set up a server that can manage SQL queries and serve HTML web pages efficiently

In my databasing course, I have the task of setting up a functional remote database. While I am confident in my ability to manage the database itself, I lack knowledge regarding web servers. My objectives include: - Creating a website where users can sel ...

htmlsql-serverwebserver

Syncing state seamlessly between server and client using Redux toolkit with Nextjs version 13

Do we need to synchronize the state between the Next.js server and client side when using Redux Toolkit with Next.js 13? For example, on a User Page: If there's a flag isRedirect: false in the Next.js server state, and then the flag is changed to is ...

reactjsreduxnext.jsredux-toolkit

Please send the element that is specifically activated by the onClick function

This is the HTML code I am working with: <li class="custom-bottom-list"> <a onClick="upvote(this)"><i class="fa fa-thumbs-o-up"></i><span>upvote</span></a> </li> Here is my JavaScript function for Upvot ...

javascriptphpjqueryhtml

The issue of Bootstrap modals failing to show content when a button is clicked within the Django Framework

My Bootstrap modals in the HTML code are causing issues as they do not display any content when the triggering buttons are clicked. Despite having correct IDs and attributes, the modals remain empty when the buttons are clicked. Below is the relevant part ...

htmldjangodjango-modelsbootstrap-modalbootstrap-5