尚硅谷新版Web前端HTML5+CSS3知识点集合篇【p131-p148】

尚硅谷新版Web前端HTML5+CSS3全套基础教程完整版(初学者零基础入门)

一、flex（弹性盒、伸缩盒）
1.简介
-弹性盒是css中的又一种布局手段，它主要用来代替浮动来完成页面的布局。
-flex可以使元素具有弹性，可以让元素根据页面大小的改变而改变。
2.弹性容器
-要设置弹性盒，必须先将一个元素设置为弹性容器。
-我们通过 display来设置弹性容器
-display-flex：设置为块级的弹性容器
-display-inline-flex：设置为行内的弹性容器
3.弹性元素
-弹性容器的子元素是弹性元素(弹性项）
-一个元素可以同时是弹性容器和弹性元素。
4.fleax的属性
-fleax-direction：指定弹性容器中元素的排列方式。 可选值有：row（默认值、表示弹性元素在容器中从左向右水平排列）、row-reverse（表示弹性元素在容器中从右向左水平排列）、column（弹性元素纵向排列，自上向下）、column-reverse（自下向上纵向排列）。
-fleax-grow:指定弹性元素的伸展系数，即指定当父元素容器右多余的空间时，子元素如何伸展。父元素的剩余空间，会按照比例进行分配。
-fleax-shrink：指定弹性元素的收缩系数。当父元素中的空间不足以容纳所有的子元素时，如何对子元素进行收缩。
5.主轴和侧轴
-主轴：弹性元素的排列方向
-侧轴：与主轴垂