Flex-wrap threshold

Question

I have three elements in one div. The third one goes beneath the rest of them when a certain threshold of the screen width is passed compiling some sort of a pyramid. How do I change 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>

Answer 1

You have a better way to create the gaps. Instead of using space-x-[10rem] you can simply use gap-[10rem] . But anyway, I wouldn't use a gap here.

Instead of centering your divs using justify-center you can use justify-between . This way, your gaps will be created automatically without the need to define a constant value.

Now, if you don't want to give your divs an option to go beneath the other divs, don't use flex-wrap here. having flex-wrap will force your items to flow to another line.

flex-wrap :

The flex-wrap property is a sub-property of the Flexible Box Layout module. It defines whether the flex items are forced in a single line or can be flowed into multiple lines.

Your code should look like this:

<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. Removed space-x-[10rem] .
2. Removed flex-wrap .
3. Replaced justify-center to justify-between .