【响应式布局】使用 flexbox 实现简单响应式布局
场景和需求
- 屏幕 > 540px，前两个部分展示两列，
- 屏幕 < 540px，前两个部分展示一列
- 屏幕 < 540px，第一部分要反转展示
- 屏幕 > 769px，第三个部分展示三列
- 屏幕 < 769px，第三个部分展示一列
效果图
实现方式一：改变 flex-direction（推荐）
Document
Happy birthday!!!party1Happy birthday!!!party2Lorem ipsum dolor sit amet consectetur adipisicing elit. Dignissimos ratione eligendi repellendus illo temporibus corrupti, error ullam ipsam magni necessitatibus quas animi dolore placeat, voluptatibus, reiciendis obcaecati rem unde quos!
Lorem ipsum dolor sit amet consectetur adipisicing elit. Dignissimos ratione eligendi repellendus illo temporibus corrupti, error ullam ipsam magni necessitatibus quas animi dolore placeat, voluptatibus, reiciendis obcaecati rem unde quos!
Lorem ipsum dolor sit amet consectetur adipisicing elit. Dignissimos ratione eligendi repellendus illo temporibus corrupti, error ullam ipsam magni necessitatibus!
Lorem ipsum dolor sit amet consectetur adipisicing elit. Dignissimos ratione eligendi repellendus illo temporibus corrupti, error ullam ipsam magni necessitatibus quas animi dolore placeat, voluptatibus, reiciendis obcaecati rem unde quos!
Lorem ipsum dolor sit amet consectetur adipisicing elit. Dignissimos ratione eligendi repellendus illo temporibus corrupti, error ullam ipsam magni necessitatibus quas animi dolore placeat, voluptatibus, reiciendis obcaecati rem unde quos!
实现方式二：改变 flex-wrap + flex-basis（一般）
Document
Happy birthday!!!party1Happy birthday!!!party2Lorem ipsum dolor sit amet consectetur adipisicing elit. Dignissimos ratione eligendi repellendus illo temporibus corrupti, error ullam ipsam magni necessitatibus quas animi dolore placeat, voluptatibus, reiciendis obcaecati rem unde quos!
Lorem ipsum dolor sit amet consectetur adipisicing elit. Dignissimos ratione eligendi repellendus illo temporibus corrupti, error ullam ipsam magni necessitatibus quas animi dolore placeat, voluptatibus, reiciendis obcaecati rem unde quos!
Lorem ipsum dolor sit amet consectetur adipisicing elit. Dignissimos ratione eligendi repellendus illo temporibus corrupti, error ullam ipsam magni necessitatibus!
Lorem ipsum dolor sit amet consectetur adipisicing elit. Dignissimos ratione eligendi repellendus illo temporibus corrupti, error ullam ipsam magni necessitatibus quas animi dolore placeat, voluptatibus, reiciendis obcaecati rem unde quos!
Lorem ipsum dolor sit amet consectetur adipisicing elit. Dignissimos ratione eligendi repellendus illo temporibus corrupti, error ullam ipsam magni necessitatibus quas animi dolore placeat, voluptatibus, reiciendis obcaecati rem unde quos!
下一篇：计算机网络：运输层