CSS 每日一练 🌈

今日重点：Flex 布局的妙用 ✨

练习目标：
用最优雅的方式实现「圣杯布局」，让内容如流水般自然流淌。

核心代码片段 🎯

.container {
  display: flex;
  flex-flow: row wrap;
  gap: 1rem; /* 现代CSS的优雅间距 */
}

.main {
  flex: 3 1 60%; /* 主内容区如展开的画卷 */
}

.aside {
  flex: 1 1 30%; /* 侧边栏似轻倚的屏风 */
}

诗意解读 🌸

"Flex 布局似水墨，
主轴侧轴自逍遥。
一行代码千钧力，
纵横捭阖任挥毫。"

实战技巧 💎

1. 响应式魔法：

   @media (max-width: 768px) {
    .container { flex-direction: column; }
   }

2. 对齐的艺术：
   • justify-content 如指挥家掌控水平韵律
   • align-items 似园丁修剪垂直姿态

创意挑战 🎨

尝试用 Flex 布局实现：
▸ 瀑布流相册
▸ 自适应导航栏
▸ 杂志式多栏文本

提示：flex-wrap 是突破平面束缚的钥匙 🔑