小程序教程-flex布局.pptx

FLEX 布局

课程介绍2布局的传统解决方案，基于盒状模型，依赖 display属性 + position属性 + float属性。它对于那些特殊布局非常不方便。2009年，W3C提出了一种新的方案—-Flex布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能。它之所以被称为 Flexbox ，是因为它能够扩展和收缩 flex 容器内的元素，以最大限度地填充可用空间。与以前布局方式（如 table 布局和浮动元素内嵌块元素）相比，Flexbox 是一个更强大的方式：1、在不同方向排列元素2、重新排列元素的显示顺序3、更改元素的对齐方式4、动态地将元素装入容器

Flex布局01为什么要学习Flex布局0203主要内容Flex布局的基本概念课后习题

为什么要学习Flex布局？0101

例子：实现子盒子在父盒子里水平垂直居中56句代码

例子：Flex实现子盒子在父盒子里水平垂直居中63句代码

0202Flex布局的基本概念

2.1 Flex 布局是什么？8Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为 Flex 布局。注意：设为 Flex 布局以后，子元素的float、clear和vertical-align属性将失效。

2.1 Flex 布局是什么？9采用 Flex 布局的元素，称为 Flex 容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称"项目"。