前端项目开发-18_CSS的Flex布局.pdf

CSSFlex布局

王红元coderwhy

目录

content

1认识flex布局

2flex布局的理解

3flex-container属性

4flex-item属性

coderwhy认识flexbox

◼Flexbox翻译为弹性盒子:

弹性盒子是一种用于按行或按列布局元素的一维布局方法;

元素可以膨胀以填充额外的空间,收缩以适应更小的空间;

通常我们使用Flexbox来进行布局的方案称之为flex布局(flexlayout);

◼flex布局是目前web开发中使用最多的布局方案：

flex布局（Flexible布局，弹性布局）;

目前特别在移动端可以说已经完全普及;

在PC端也几乎已经完全普及和使用,只有非常少数的网站依然在用浮动来布局;

◼为什么需要flex布局呢?

长久以来，CSS布局中唯一可靠且跨浏览器兼容的布局工具只有floats和positioning。

但是这两种方法本身存在很大的局限性,并且他们用于布局实在是无奈之举;

coderwhy原先的布局存在的痛点

◼原来的布局存在哪些痛点呢?举例说明:

比如在父内容里面垂直居中一个块内容。

比如使容器的所有子项等分可用宽度/高度，而不管有多少宽度/高度可用。

比如使多列布局中的所有列采用相同的高度，即使它们包含的内容量不同。

coderwhyflex布局的出现

◼所以长久以来,大家非常期待一种真正可以用于对元素布局的方案:于是flex布局出现了;

Natureandnatureslawslayhidinnight;GodsaidLetNewtonbeandallwaslight.

自然与自然的法则在黑夜隐藏，于是上帝说，让牛顿出现吧！于是世界就明亮了起来.

◼flexbox在使用时,我们最担心的是它的兼容性问题:

我们可以在caniuse上查询到具体的兼容性

coderwhyflex布局的重要概念

◼两个重要的概念：

开启了flex布局的元素叫flexcontainer

flexcontainer里面的直接子元素叫做flexitem

◼当flexcontainer中的子元素变成了flexitem时,具备一下特点:

flexitem的布局将受flexcontainer属性的设置来进行控制和布局;

flexitem不再严格区分块级元素和行内级元素;

flexitem默认情况下是包裹内容的,但是可以设置宽度和高度;

◼设置display属性为flex或者inline-flex可以成为flexcontainer

flex：flexcontainer以block-level形式存在

inline-flex：flexcontainer以inline-level形式存在

coderwhyflex布局的模型

coderwhyflex相关的属性

◼应用在flexcontainer上的CSS属性◼应用在flexitems上的CSS属性

flex-flowflex-grow

flex-directionflex-basis

flex-wrapflex-shrink

fle