tailwindcss 系列 Flex Row

時間 2020-12-13

標籤佈局 flex spa 3d code blog class sed 欄目 Flex 简体版

原文原文鏈接

Flex Row Row Reversed 佈局

效果
佈局

代碼實現

Row

<div class="flex flex-row bg-gray-200">
      <div class="text-gray-700 text-center bg-gray-400 px-4 py-2 m-2">1</div>
      <div class="text-gray-700 text-center bg-gray-400 px-4 py-2 m-2">2</div>
      <div class="text-gray-700 text-center bg-gray-400 px-4 py-2 m-2">3</div>
    </div>

Row Reversed

<div class="flex flex-row-reverse bg-gray-200">
      <div class="text-gray-700 text-center bg-gray-400 px-4 py-2 m-2">1</div>
      <div class="text-gray-700 text-center bg-gray-400 px-4 py-2 m-2">2</div>
      <div class="text-gray-700 text-center bg-gray-400 px-4 py-2 m-2">3</div>
    </div>

1. wxa.js 引入 tailwindcss
2. FunFlutter系列之Tips一圖看穿Flex中Row,Wrap的各類對齊
3. el-row，el-col，flex結合佈局
4. 前端進階系列(五):flex佈局
5. Flutter 系列文章：Flutter Row控件介紹
6. CSS 基礎系列：flex 佈局
7. flex幾種多列布局
8. css flex 之 flex-grow | flex-direction
9. 淺談 tailwindcss 的原理
10. css flex => flex-wrap
更多相關文章...
• XSL-FO table-row 對象 - XSL-FO 教程
• Scala List(列表) - Scala教程
• Docker容器實戰(七) - 容器眼光下的文件系統
• 三篇文章瞭解 TiDB 技術內幕 —— 說計算

相關標籤/搜索