I have attached a rough idea of what I am trying to achieve, the dotted line represents the center of the container.
I am trying to center align one div element, then right align a second div within the same row, while both elements are centered horizontally.
Try like this:
<script src="https://cdn.tailwindcss.com"></script>
<div class="flex items-center justify-center border border-dashed">
<div class="flex-1"></div>
<div class="w-32 h-32 bg-red-500"></div>
<div class="flex-1">
<div class="w-20 h-20 bg-green-500 ml-auto"></div>
</div>
</div>
With grid:
<script src="https://cdn.tailwindcss.com"></script>
<div class="grid grid-cols-[minmax(0,1fr),auto,minmax(0,1fr)] items-center border border-dashed">
<div></div>
<div class="w-32 h-32 bg-red-500"></div>
<div class="w-20 h-20 bg-green-500 ml-auto"></div>
</div>
Related
The problem is that I have a title a subtitle and a footer. I would like the subtitle's div to span across the empty space between the title and the footer.
I tried setting h-full to the div but it does not seem to do anything.
export default function ASD() {
return (
<div className="flex flex-col justify-start mx-auto w-9/12 min-h-screen bg-red-300 text-center">
<div className="bg-yellow-200">
<div className="bg-blue-200 text-6xl">
<h1>Title</h1>
</div>
<div className="bg-indigo-500 text-3xl">
<h1>Subtitle</h1>
</div>
</div>
<footer className="mt-auto bg-green-200">Footer</footer>
</div>
);
}
Also, I would like the whole page to cover the entire screen so that the footer is at the bottom of the page.
Your header and subtitle is wrapped inside a div, you need to remove that wrapper div ,and then use flex-1 so that the subtitle div spans accross the entire height of the screen.
<div class="mx-auto flex min-h-screen w-9/12 flex-col justify-start bg-red-300 text-center">
<div class="bg-blue-200 text-6xl">
<h1>Title</h1>
</div>
<div class="flex-1 bg-indigo-500 text-3xl"> //👈 use flex-1 here
<h1>Subtitle</h1>
</div>
<footer class="mt-auto bg-green-200">Footer</footer>
</div>
Output:
Tailwind play link
Try this.
<div className="flex flex-col justify-start mx-auto w-9/12 h-full bg-red-300 text-center">
<div className="bg-yellow-200 flex-1 flex flex-col">
<div className="bg-blue-200 text-6xl">
<h1>Title</h1>
</div>
<div className="bg-indigo-500 text-3xl flex-1">
<h1>Subtitle</h1>
</div>
</div>
<footer className="bg-green-200">Footer</footer>
</div>
<div class="flex">
<div class="flex-1 text-sm bg-red-300">
<span class="align-bottom">I want this to be on the same bottom level as Right content</span>
</div>
<div class="flex-1 text-right text-5xl bg-blue-400">
Right content
</div>
</div>
I tried align-bottom,align-text-bottom or something with float-right and float-left (without using flex), but nothing worked so far..
Tailwind Playground.
You can try using items-end on the parent along with flex class to solve the problem.
<link href="https://unpkg.com/tailwindcss#^2/dist/tailwind.min.css" rel="stylesheet">
<div class="flex">
<div class="flex-1 text-sm bg-red-300 flex items-end">
<span>I want this to be on the same bottom level as Right content</span>
</div>
<div class="flex-1 text-right text-5xl bg-blue-400">
Right content
</div>
</div>
Tailwind Playground
I have the below template created by using TailwindCSS:
<body class="h-full">
<div class="flex h-full">
<div class="w-5/6">
<div class="grid grid-rows-2 grid-flow-col h-full" style="grid-template-rows: 93.8% 6.2%;">
<div class="relative bg-gray-200 h-full">1</div>
<div class="bg-red-200">
<!-- This area is where I have problems -->
<div class="flex h-full">
<div class="w-1/2 h-full">
<div class="bg-blue-500 h-full fixed" style="width: inherit;">Link #1</div>
</div>
<div class="w-1/2 h-full">
<div class="bg-green-500 h-full fixed" style="width: inherit;">Link #2</div>
</div>
</div>
</div>
</div>
</div>
<div class="w-1/6">
<div class="grid grid-rows-2 grid-flow-col h-full" style="grid-template-rows: 20% 80%;">
<div class="md:py-16 md:px-4 border-l border-gray-100 bg-gray-50">3
</div>
<div class="md:py-4 md:px-4 border-l border-t border-gray-100">4</div>
</div>
</div>
</div>
</body>
Please see the following fiddle I have created here.
The problem I have is with these two divs:
<div class="flex h-full">
<div class="w-1/2 h-full">
<div class="bg-blue-500 h-full fixed" style="width: inherit;">Link #1</div>
</div>
<div class="w-1/2 h-full">
<div class="bg-green-500 h-full fixed" style="width: inherit;">Link #2</div>
</div>
</div>
I want to have two links at the bottom (Link #1 and Link #2 in my example), that have a fixed position. Each link's width should occupy 50% of the parent div.
As you can see in the example posted above, the width of the two bottoms <div> exceeds that of the parent (#1).
Im not sure if this is exactly what you wanted but have a look.
I think part of the issue is flexbox wont be able to control the fixed positioned items. The width needed adjusting too. Also you should rather fix the position of the container than each individual link.
You can use something like this but fixed elements usually sit outside of these container because fixing takes it out of the page flow.
https://play.tailwindcss.com/YPc9nuhM9z
I need to relatively position some flex container, so I set it parent display relative and flex itself - absolute. But the problem is that flex width does not expands outside its relative parent. How to fix this?
<link href="https://unpkg.com/tailwindcss#^1.0/dist/tailwind.min.css" rel="stylesheet" />
<div class="w-1/3 bg-blue-500 mx-auto my-5 relative p-4">
<div class="absolute flex flex-wrap border border-red p-4">
<div class="border-b w-1/2">content super long</div>
<div class="border-b w-1/2">content super long</div>
<div class="w-1/2">content super long</div>
<div class="w-1/2">content super long content</div>
</div>
</div>
There is enough space for flex container to display its content with no line wraps. But it does not so.
I need following result:
You can achieve that by changing position property of parent element to static, In addition to adding another container with relative position.
Example:
<link href="https://unpkg.com/tailwindcss#^1.0/dist/tailwind.min.css" rel="stylesheet">
<div class="w-1/3 bg-blue-500 mx-auto my-5 relative p-4" style="position:static">
<div class="container" style="position:relative">
<div style="width:500px;" class="absolute flex flex-wrap border border-red p-4">
<div class="border-b w-1/2">content super long</div>
<div class="border-b w-1/2">content super long</div>
<div class="w-1/2">content super long</div>
<div class="w-1/2">content super long content</div>
</div>
</div>
</div>
I thought flexbox makes its children having same height, meaning all children will be as tall as the highest (tallest) child and parent makes this by having default value of align-stretch for cross axis (if it is flex-row). In my case it is not like so.
I have following pen:
Codepen link
<div class="flex w-full items-center flex-wrap">
<div class="flex flex-col md:w-1/2 items-center px-16 py-20 bg-red">
<h2 class="marjan-col">Smaller text</h2>
<p>This one has smaller text</p>
</div>
<div class="flex flex-col md:w-1/2 items-center px-16 py-20 bg-blue">
<h2 class="text-white">Bigger text that controls element height</h2>
<p class="text-white">
Blue element has more text thus making red element smaller and unable to fit entire height
</p>
</div>
</div>
Note that taller element (background red) is not having same height as the blue element.
I am using tailwind.css here, but I think code is self explanatory.
Remove items-center class from the wrapper class - this was adding align-items: center to your flexbox and overriding the default stretch behaviour - see demo below:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/0.7.4/tailwind.min.css">
<div class="flex w-full flex-wrap">
<!-- CHANGED HERE -->
<div class="flex flex-col md:w-1/2 items-center px-16 py-20 bg-red">
<h2 class="marjan-col">Smaller text</h2>
<p>This one has smaller text</p>
</div>
<div class="flex flex-col md:w-1/2 items-center px-16 py-20 bg-blue">
<h2 class="text-white">Bigger text that controls element height</h2>
<p class="text-white">
Blue element has more text thus making red element smaller and unable to fit entire height
</p>
</div>
</div>