《Web前端开发》第7章 弹性盒子与网格布局.pptx

;浮动定位、层定位布局时有很多限制，例如很难实现盒子垂直居中、多个盒子的间隙的平均分配等。可以用弹性盒子与网格布局的方式很好地解决上述问题，并很容易实现类似图7-1所示的布局。弹性盒子是一种一维布局模型，而网格布局是二维布局模型，这两种布局方式可以结合使用。;7.1弹性盒子布局;7.1.1弹性容器样式

1.display属性

通过设置display属性的值为flex将某个元素定义为弹性容器，例如。

.flex-container{

display:flex;/*弹性容器*/

}

2.flex-direction属性

flex-direction可以设定弹性盒子内元素的排列方向。如图7-2所示。

（1）flex-direction：row|row-reverse，按行正向、反向排列。主轴为水平，辅轴为垂直。

（2）flex-direction：column|column-reverse，按列正向、反向排列。主轴为垂直，辅轴为水平。如图7-3所示。;图7-2flex-direction属性——行布局;3.flex-wrap属性

flex-wrap属性用于设置弹性元素是否可以根据容器宽度折行，默认不折行，取值如下。

flex-wrap:nowrap|wrap|wrap-reverse;

分别表示不可折行、可折行、可反向折行。;4.flex-flow属性

flex-flow属性是flex-direction属性和flex-wrap属性的统一简写形式，格式如下：

flex-flow:flex-direction属性flex-wrap属性;

5.justify-content属性

justify-content用于设置弹性元素在弹性容器主轴上的对齐方式，取值如下。

（1）justify-content：flex-start|flex-end|center，分别表示子元素从主轴起始位置、结束位置、居中显示，如图7-5（a）（b）（c）。

（2）justify-content：space-between|space-around，分别表示弹性容器剩余空白空间的分配方式，取值space-between表示在子元素中间平均分配，取值space-around表示在子元素两侧平均分配。如图7-5（d）（e）所示。;7.1弹性盒子布局;6.align-items属性

align-items用于设置弹性子元素在辅轴上的对齐方式。取值如下。

align-items:flex-start|flex-end|center|stretch;;6.align-items属性;7.align-content属性

align-content属性用来设置多根轴线的所有元素在容器中的整体对齐方式。如果元素只有一根轴线，也就是只有一行或者一列，该属性不起作用。属性通常用于折行后多行显示的情况，其取值如下。

align-content:flex-start|flex-end|center|space-between|space-around|stretch;;7.1.2弹性元素样式

1.flex-grow属性

flex-grow属性用来设置弹性元素被拉大的比例，当弹性容器有剩余空间时则按比例分配。

（1）默认值为0:表示该元素不占用剩余空间。

（2）取值为n:表示该元素占据剩余空间若干份中的n份。;图7-7flex-grow属性;2.flex-shrink属性

flex-shrink属性用来设置弹性元素被压缩的比例，当弹性容器空间不足，元素按设定比例缩小。flex-shrink属性默认为1，表示弹性元素默认等比例压缩；当flex-shrink属性设定为0则表示不压缩。

3.flex-basis属性

flex-basis属性用来设置元素在主轴上的初始尺寸，其优先级高于width属性。;【例7-2】生成弹性盒子，包含三个弹性元素，按行排列。当弹性容器宽度不够时，则第一个元素不压缩，第二个元素和第三个元素按照1：2比例压缩。

;4.flex属性

flex属性是flex-grow、flex-shrink、flex-basis属性的简写形式。格式如下：

flex:flex-growflex-shrinkflex-basis;

默认值为flex:01auto。

5.order属性

按照数值大小，规定子元素在弹性容器中的排列顺序，数值越小排名越靠前，默认值为0。

6.align-self属性

align-self属性用于设置单个弹性元素在辅轴上的对齐方式，类似align-items，其取值如下。

align-self:auto|flex-start|f