《响应式页面设计》_项目1弹性盒布局.pptxVIP

;1、为什么使用弹性布局;1.1.1为什么使用弹性布局;将Flex是FlexibleBox的缩写，意为“弹性的盒子”，是在CSS3中引入的。引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。

弹性盒布局多应用于移动端web开发。

任何一个容器都可以指定为Flex布局，块级弹性盒子。用Flex布局的元素，称为Flex容器（flexcontainer），简称“容器”，它的所有子元素自动成为容器成员，称为Flex项目（flexitem），简称“项目”。

。;弹性（伸缩）盒子由弹性容器和弹性子元素组成。弹性容器通过设置display属性的值为flex或inline-flex将其定义为弹性容器。弹性容器内包含了一个或多个弹性子元素，如图所示。;属性 描述

flex-direction 指定弹性容器的主轴和主轴方向

flex-wrap 设置弹性盒子的子元素超出父容器时是否换行

flex-flow flex-direction和flex-wrap的简写

justify-content 设置弹性盒子元素在主轴方向上的对齐方式

align-items 设置弹性盒子元素在侧轴方向上的对齐方式

align-content 设置多行元素在侧轴（交叉轴）上的排列方式，修改flex-wrap属性的行为，类似align-items，但不是设置子元素对齐，而是设置行对齐;可以通过设置某个弹性子元素的属性，来控制单个元素的位置、排列顺序等，可以设置的属性如下表，这些属性的设置，对子元素的布局会产生影响