I have a centered column where I'd like to align some of the content inside this column to the left:
<div class="flex flex-col items-center justify-center">
<!-- I would like all elements to be left aligned in this div -->
<div class="items-start justify-start">
<h1>Tailwind Elements</h1>
</div>
</div>
How can I left align content in a flex column that is centered? I can not seem to make it work.
Did you set width for the inner div? I set the width and used text-left and it seems to work
<div class="flex flex-col items-center justify-center">
<!-- I would like all elements to be left aligned in this div -->
<div class="w-[400px] text-left bg-red-500">
<h1>Tailwind Elements</h1>
</div>
</div>
Edit: you don't even have to use text-left as setting the width automatically sets all the items to be left aligned
Related
I'm having immense trouble understanding the concept of div height and overflow. Been searching for two days but I think I'm missing a key concept here...
My layout looks like this (Tailwind Playground):
The blue div does not scroll all the way to the end of the content. For some reason the div thinks that its height is larger than it really is (by exactly the height of the second navbar (red) on top of it). As a result, I can't scroll all the way to the bottom.
Also, having to repeat h-full for each child div until I reach the div that I want to be scrollable seems off to me but otherwise it assumes h-auto which is not good.
<div class="h-screen overflow-hidden">
<div class="flex h-full flex-col overflow-hidden">
<div class="w-full bg-slate-500 text-center text-white h-12 ">NAVBAR</div>
<div class="flex h-full overflow-hidden">
<div class="flex h-full basis-1/6">
<div class="w-full bg-gray-300 text-center text-black">Sidebar</div>
</div>
<div class="flex h-full grow flex-col bg-slate-500">
<div class="h-12 w-full shrink-0 bg-red-400 text-center">Second Navbar</div>
<div class="h-full w-full grow bg-green-400">
<div class="flex h-full">
<div class="w-1/3 bg-blue-400 text-center">
<div class="flex h-full flex-col overflow-y-scroll">
<div>
Lorem....
</div>
</div>
</div>
<div class="h-full w-2/3 overflow-y-scroll bg-orange-400 text-center">Main content</div>
</div>
</div>
</div>
</div>
</div>
</div>
Lets look at the container(blue parent) under the second navbar. Its parent (the parent of the second navbar as well) have a height of about 831px. The navbar height is 3rem - which is about 48px.
But the blue parent has a height of 100% (of its parent) ~ 831px. So its basically overflowing (because 831+48 != 831).
If you put the overflow:hidden on the blue parent it'll hide the overflowing and blue container will scroll normally.
https://play.tailwindcss.com/SOO2rwiGsw
Changed the height of the flexbox (h-40) and set the image height to full (h-full). In this case the height of the image changes and fills the entire container, keeps the aspect ratio which is good and expected.
But the container div (with blue background) does not change in width, just in height.
How can I make this div to be as same width as the image?
https://codepen.io/lordjancso/pen/eYKOVRN
<script src="https://cdn.tailwindcss.com"></script>
<div class="flex flex-row justify-around h-40">
<div class="bg-blue-700">
<img class="h-full" src="https://picsum.photos/500/700">
</div>
<div class="bg-blue-700">
<img class="h-full" src="https://picsum.photos/500/700">
</div>
</div>
Apply the w-fit utility on the images' container. w-fit, which is the width: fit-content; class in CSS, will use the available space, but never more than max-content.
<div class="flex flex-row justify-around h-40 w-fit">
<div class="bg-blue-700">
<img class="h-full" src="https://picsum.photos/500/700">
</div>
<div class="bg-blue-700">
<img class="h-full" src="https://picsum.photos/500/700">
</div>
</div>
Tailwind-play
I have 2 divs under 1 div.
first div should be w-64.
second div's width want to be the rest except for 64.
How to make it?
and if I use grid then how to make that?
<div className="w-screen h-screen">
<div className="fixed top-0 left-0 w-64 h-screen" >
</div>
<div className="flex bg-blue-100 justify-center items-center">
{children}
</div>
</div>
You can add to the second div two Tailwind properties:
w-[calc(100vw-16rem)], where 100vw is a fullscreen and w-64 = width: 16rem; /* 256px */), then we calculate the width of the div.
After that we offset the second div with ml-auto.
<div className="w-screen h-screen">
<div className="fixed top-0 left-0 w-64 h-screen"></div>
<div className="grid w-[calc(100vw-16rem)] ml-auto bg-blue-100 justify-center items-center">
{children}
</div>
</div>
Grid solution
For the grid, we need to add a grid property to the parent element and set two columns grid-cols-[16rem_calc(100vw-16rem)]. The first column is static, and the second is responsive. We also need to remove all properties from the first child element.
<div className="grid grid-cols-[16rem_calc(100vw-16rem)] w-screen h-screen ">
<div className="flex"></div>
<div className="flex bg-blue-100 justify-center items-center">
{children}
</div>
</div>
What I currently have using Tailwind (see this playground)
<div class="h-screen flex flex-col items-center space-y-6">
<div class="h-1/3">X</div>
<div class="h-1/3">X</div>
<div class="h-1/3">X</div>
</div>
What I like is that each of the 3 items take 33% (minus the y-spacing) of the h-screen container.
What happens there is that the h-screen container is larger than the height of the screen so there's a scroll, you can see that in the playground I've added.
There is a parent around that container with py-6. I initially thought that was the problem, but if I do this:
<div class="h-screen flex flex-col items-center space-y-6">
<div class="">X</div>
</div>
With that same py-6 parent around it, it works as expected and there's no scroll.
You can use other classes like flex-1 to expand your flex-child and mind margins, also flex-col on the parent holding a single child is not necessary., h-screen on the child is also not necessary, the parent is already a sized flexbox and will fill it up:
possible example :
<div class="min-h-screen bg-gray-100 py-6 flex justify-center">
<div class=" flex flex-col items-center space-y-6">
<div class="flex-1 bg-red-500">X</div>
<div class="flex-1 bg-green-500">X</div>
<div class="flex-1 bg-yellow-500">X</div>
</div>
</div>
https://play.tailwindcss.com/VCTmCjUAQA
make it 2 children, it will be 50% minus margins, four : 25% minus margins and so on. flex do the math itself ;)
I have a flexbox with 3 children items that looks something like this:
<section className="px-5 flex flex-col md:flex-row md:space-x-10 justify-around">
<div className="flex flex-col py-3 md:flex-grow"><input ... /></>
<div className="flex flex-col py-3 md:flex-grow"><input ... /></>
<div className="flex flex-col py-3 md:flex-grow"><input ... /></>
</section>
This works fine in full screen, however flex items start to break out of parent after shrinking the window width (near 1000px).
How can I make it so the items stay inside their parent?
Fullscreen
After shrinking window width
What I would like to achieve
By adding flex-wrap class in the parent(section tag in your case) will fix the issue.
Read more about flex-wrap https://tailwindcss.com/docs/flex-wrap
If you use flexbox, you can use flex wrap property to solve your proble.,
But i try to get the same result with grid
<div class="container py-10">
<section class="grid grid-cols-3 gap-4 p-5 border border-gray-400 rounded-lg">
<div class="w-full h-20 bg-orange-200 border border-orange-400 rounded-md"></div>
<div class="w-full h-20 bg-orange-200 border border-orange-400 rounded-md"></div>
<div class="w-full h-20 bg-orange-200 border border-orange-400 rounded-md"></div>
</section>
</div>
This is better i think :)