Tailwind basic flexbox

គឺជាម៉ូឌុលមួយដែលអនុញ្ញាតឱ្យអ្នករៀបចំធាតុ HTML នៅក្នុង container ដោយងាយស្រួលនិងមានប្រសិទ្ធភាព

box

<div>
    <div class="border border-emerald-400 bg-emerald-100">1</div>
    <div class="border border-emerald-400 bg-emerald-100">2</div>
    <div class="border border-emerald-400 bg-emerald-100">3</div>
    <div class="border border-emerald-400 bg-emerald-100">4</div>
    <div class="border border-emerald-400 bg-emerald-100">5</div>
</div>

flex

<div class="flex flex-col md:flex-row">
            <div class="border border-emerald-400 bg-emerald-100 p-5">1</div>
            <div class="border border-emerald-400 bg-emerald-100 p-5">2</div>
            <div class="border border-emerald-400 bg-emerald-100 p-5">3</div>
            <div class="border border-emerald-400 bg-emerald-100 p-5">4</div>
            <div class="border border-emerald-400 bg-emerald-100 p-5">5</div>
        </div>

flex ជាមួយ items-position

items គឺកំណត់ទីតាំងពីលើចុះក្រោម

Flex with items-start

<div class="flex items-start h-52 w-full bg-gray-300">
    <div class="border border-emerald-400 bg-emerald-100 p-5">1</div>
    <div class="border border-emerald-400 bg-emerald-100 p-5">2</div>
    <div class="border border-emerald-400 bg-emerald-100 p-5">3</div>
</div>

Flex with items-center

<div class="flex items-center h-52 w-full bg-gray-300">
    <div class="border border-emerald-400 bg-emerald-100 p-5">1</div>
    <div class="border border-emerald-400 bg-emerald-100 p-5">2</div>
    <div class="border border-emerald-400 bg-emerald-100 p-5">3</div>
</div>

Flex with items-end

<div class="flex items-end h-52 w-full bg-gray-300">
    <div class="border border-emerald-400 bg-emerald-100 p-5">1</div>
    <div class="border border-emerald-400 bg-emerald-100 p-5">2</div>
    <div class="border border-emerald-400 bg-emerald-100 p-5">3</div>
</div> 

flex items ជាមួយ justify

flex items-center justify-center

1

2

3

justify start, center និង end គឺប្រើសម្រាប់ទីតាំងពីឆ្វេងទៅស្តាំ

<div class="flex items-end h-52 w-full bg-gray-300">
    <div class="border border-emerald-400 bg-emerald-100 p-5">1</div>
    <div class="border border-emerald-400 bg-emerald-100 p-5">2</div>
    <div class="border border-emerald-400 bg-emerald-100 p-5">3</div>
</div> 

flex items ជាមួយ justify-around

1

2

3

justify-around គឺជាការដាក់ចន្លោះដែលមានទំហំស្មើៗគ្នា ព្រឹមទាំងពីមុននិងបន្ទាប់ container

<div class="flex items-center justify-around h-52 w-full bg-gray-300">
    <div class="border border-emerald-400 bg-emerald-100 p-5">1</div>
    <div class="border border-emerald-400 bg-emerald-100 p-5">2</div>
    <div class="border border-emerald-400 bg-emerald-100 p-5">3</div>
</div>

flex items ជាមួយ justify-between

1

2

3

justify-between គឺជាការដាក់ចន្លោះស្មើៗគ្នា ប៉ុន្តែមិនមានចន្លោះពីមុននិងបន្ទាប់ container

<div class="flex items-center justify-between h-52 w-full bg-gray-300">
    <div class="border border-emerald-400 bg-emerald-100 p-5">1</div>
    <div class="border border-emerald-400 bg-emerald-100 p-5">2</div>
    <div class="border border-emerald-400 bg-emerald-100 p-5">3</div>
</div>

flex flex-wrap items-center justify-between

<div class="flex flex-wrap items-center justify-between h-52 w-full bg-gray-300">
    <div class="border border-emerald-400 bg-emerald-100 p-10">1</div>
    <div class="border border-emerald-400 bg-emerald-100 p-10">3</div>
    <div class="border border-emerald-400 bg-emerald-100 p-10">2</div>
    <div class="border border-emerald-400 bg-emerald-100 p-10">4</div>
    <div class="border border-emerald-400 bg-emerald-100 p-10">5</div>
    <div class="border border-emerald-400 bg-emerald-100 p-10">6</div>
    <div class="border border-emerald-400 bg-emerald-100 p-10">7</div> 
</div>

flex-col gap-3 and order items

1

2

3

<div class="flex flex-col gap-3 items-center justify-around h-52 w-full bg-gray-300">
    <div class="border border-emerald-400 bg-emerald-100 p-5">1</div>
    <div class="border border-emerald-400 bg-emerald-100 p-5">2</div>
    <div class="border border-emerald-400 bg-emerald-100 p-5">3</div>
</div>

items ជាមួយ flex-1

Hello 1

Hello 2

Hello 3

<div class="flex text-center">
    <div class="flex-1 bg-blue-200">Hello 1</div>
    <div class="flex-1 bg-blue-200">Hello 2</div>
    <div class="flex-1 bg-blue-200">Hello 3</div>
</div>