How does TailwindCSS implement complex layouts? - 面试题

TailwindCSS provides various layout tools, including Flexbox, Grid, positioning, etc., allowing you to quickly build complex page layouts.

Flexbox Layout

Basic Flex Container

html
<!-- Create Flex container -->
<div class="flex">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</div>

Flex Direction

html
<!-- Horizontal direction (default) -->
<div class="flex flex-row">
  <div>Item 1</div>
  <div>Item 2</div>
</div>

<!-- Vertical direction -->
<div class="flex flex-col">
  <div>Item 1</div>
  <div>Item 2</div>
</div>

Flex Wrap

html
<!-- No wrap (default) -->
<div class="flex flex-nowrap">
  <div>Item 1</div>
  <div>Item 2</div>
</div>

<!-- Wrap -->
<div class="flex flex-wrap">
  <div>Item 1</div>
  <div>Item 2</div>
</div>

Main Axis Alignment

html
<!-- Left align (default) -->
<div class="flex justify-start">
  <div>Item 1</div>
  <div>Item 2</div>
</div>

<!-- Center align -->
<div class="flex justify-center">
  <div>Item 1</div>
  <div>Item 2</div>
</div>

<!-- Right align -->
<div class="flex justify-end">
  <div>Item 1</div>
  <div>Item 2</div>
</div>

<!-- Space between -->
<div class="flex justify-between">
  <div>Item 1</div>
  <div>Item 2</div>
</div>

<!-- Space around -->
<div class="flex justify-around">
  <div>Item 1</div>
  <div>Item 2</div>
</div>

Cross Axis Alignment

html
<!-- Top align -->
<div class="flex items-start">
  <div>Item 1</div>
  <div>Item 2</div>
</div>

<!-- Vertical center -->
<div class="flex items-center">
  <div>Item 1</div>
  <div>Item 2</div>
</div>

<!-- Bottom align -->
<div class="flex items-end">
  <div>Item 1</div>
  <div>Item 2</div>
</div>

<!-- Stretch fill -->
<div class="flex items-stretch">
  <div>Item 1</div>
  <div>Item 2</div>
</div>

Flex Item Properties

html
<!-- flex-grow: 0 (default) -->
<div class="flex-none">
  Non-flexible item
</div>

<!-- flex-grow: 1 -->
<div class="flex-1">
  Flexible item
</div>

<!-- Custom flex-grow -->
<div class="flex-grow-2">
  Custom flex ratio
</div>

Grid Layout

Basic Grid Container

html
<!-- Create Grid container -->
<div class="grid grid-cols-3 gap-4">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</div>

Responsive Grid

html
<!-- Responsive columns -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</div>

Grid Spacing

html
<!-- Same row and column spacing -->
<div class="grid grid-cols-3 gap-4">
  <div>Item 1</div>
  <div>Item 2</div>
</div>

<!-- Separate row and column spacing -->
<div class="grid grid-cols-3 gap-x-4 gap-y-8">
  <div>Item 1</div>
  <div>Item 2</div>
</div>

Grid Span

html
<!-- Column span -->
<div class="grid grid-cols-3 gap-4">
  <div class="col-span-2">Span 2 columns</div>
  <div>Item 2</div>
</div>

<!-- Row span -->
<div class="grid grid-rows-3 gap-4">
  <div class="row-span-2">Span 2 rows</div>
  <div>Item 2</div>
</div>

Grid Template

html
<!-- Custom grid template -->
<div class="grid grid-cols-[200px_1fr_100px] gap-4">
  <div>Fixed width</div>
  <div>Adaptive</div>
  <div>Fixed width</div>
</div>

Positioning Layout

Relative Positioning

html
<div class="relative">
  <div class="absolute top-0 left-0">
    Absolutely positioned element
  </div>
  Relatively positioned container
</div>

Absolute Positioning

html
<div class="absolute top-4 right-4">
  Element in top right corner
</div>

Fixed Positioning

html
<div class="fixed bottom-4 right-4">
  Button fixed in bottom right corner
</div>

Sticky Positioning

html
<div class="sticky top-0">
  Sticky header
</div>

Practical Layout Examples

Centered Layout

html
<!-- Horizontal and vertical center -->
<div class="flex items-center justify-center h-screen">
  <div>Centered content</div>
</div>

<!-- Center with Grid -->
<div class="grid place-items-center h-screen">
  <div>Centered content</div>
</div>

Holy Grail Layout

html
<div class="flex flex-col min-h-screen">
  <!-- Header -->
  <header class="bg-blue-500 text-white p-4">
    Header
  </header>
  
  <!-- Main -->
  <main class="flex flex-1">
    <!-- Sidebar -->
    <aside class="w-64 bg-gray-200 p-4">
      Sidebar
    </aside>
    
    <!-- Content area -->
    <div class="flex-1 p-4">
      Main content
    </div>
  </main>
  
  <!-- Footer -->
  <footer class="bg-gray-800 text-white p-4">
    Footer
  </footer>
</div>

Card Grid

html
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
  <div class="bg-white rounded-lg shadow-md p-6">
    <h3 class="text-xl font-bold mb-2">Card Title</h3>
    <p class="text-gray-600">Card content</p>
  </div>
  <div class="bg-white rounded-lg shadow-md p-6">
    <h3 class="text-xl font-bold mb-2">Card Title</h3>
    <p class="text-gray-600">Card content</p>
  </div>
  <div class="bg-white rounded-lg shadow-md p-6">
    <h3 class="text-xl font-bold mb-2">Card Title</h3>
    <p class="text-gray-600">Card content</p>
  </div>
</div>

Layout Best Practices

Mobile First: Design mobile layout first, then add breakpoints
Semantic HTML: Use correct HTML tags (header, main, aside, footer)
Reasonable use of Flex and Grid: Flex is suitable for one-dimensional layouts, Grid for two-dimensional layouts
Avoid excessive nesting: Keep DOM structure concise
Test responsive: Test layout effects on different screen sizes