前端开发必知：Flex布局详解与实践.pdfVIP

术语

1.主轴和侧轴：

主轴、主轴方向：伸缩容器的主轴，伸缩项目主要沿着这一条轴进行布局，取

决于flex-direction，默认是水平的如果flex-direction：column则为纵向的

侧轴（交叉轴）、侧轴方向：与主轴垂直的轴称为侧轴，取决于主轴

2.伸缩容器和伸缩项目：

伸缩容器：设置disy：flex的元素

伸缩项目：其下的子元素

CSS3弹性盒子flex

弹性盒子disy:flex

flex为复合属性，且必须配合父元素disy:flex使用。

以下6个属性设置在项目（子元素）上:

•flex-grow：放例

•flex-shrink：缩小比例

•flex-basis：伸缩基准值

•flex：是flex-grow,flex-shrink和flex-basis的简写

•order：排列顺序

•align-self：单个项目对齐方式

Flex-grow

1.flex-grow

根据所设置的比例分配盒子所剩余的空间

拓展：左右两栏布局默认值0；

.demo{

f