Django基础及实战课程【课程进度】



H5&C3之Flexbox弹性布局


布局的传统解决方案,基于盒状模型,依赖display属性 + position属性 + float属性。它对于那些特殊布局非常不方便,比如,垂直居中就不容易实现。

2009年,W3C提出了一种新的方案—-Flex布局,可以简便、完整、响应式地实现各种页面布局。目前,它已经得到了所有浏览器的支持,这意味着,现在就能很安全地使用这项功能。

Flexbox弹性布局提供一个更加有效的方式来布置,对齐和分布在容器之间的各项内容,即使它们的大小是未知或者动态变化的。
弹性布局的主要思想是让容器有能力来改变项目的宽度和高度,以填满可用空间的能力。

一、基本概念

1、Flex容器和Flex项目

采用Flex布局的元素,称为Flex容器(flex container)简称"容器"。它的所有子元素自动成为容器成员,称为Flex项目(flex item)简称"项目"。
容器和项目关系