不懂“弹性布局”，怎么能说学过网页设计

网页布局中CSS是一个重点，而flex布局是布局中的重中之重，没有学过弹性布局的小伙伴希望本篇文章对你有所帮助，下面就来说说flex弹性布局的奇幻之旅

布局的传统解决方案一般是基于盒模型，依赖display属性 +position属性 +float属性。但是有些特殊的情况，比如居中，响应式布局的情况就无法解决

Flex布局是什么

Flex是Flexible Box的缩写，意为弹性布局，用来为盒状模型提供最大的灵活性。并且根据元素类型以及内核对应三种写法

注意，设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。

flex基本概念

采用Flex布局的元素，称为Flex容器，其实就是需要父子级关系。它的所有子元素自动成为容器成员，每个成员称为Flex单项

对于父级元素中的弹性布局，有以下的属性:

APP定制开发#https://www.dudukj.cn/app/容器默认存在两根轴：水平x轴叫主轴，垂直的y轴叫交叉轴。主轴的开始位置（与边框的交叉点）叫做主轴起始端，结束位置叫做主轴末端；交叉轴的开始位置叫做交叉轴起始端，结束位置叫做交叉轴末端。项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。

容器(父级)的属性

对于父级元素中的弹性布局，有以下的属性:

flex-direction设置主轴的方向

flex-direction有四个参数代表四个方向，分别定义主轴排列的方向

例如下面设置主轴为从下到上的排列方式

flex-wrap设置排列换行

默认情况下，项目都排在一条轴上。flex-wrap属性定义，如果一条轴线排不下，如何换行，flex-wrap:wrap|no-wrap|wrap-reverse;

flex-flow是上述两个综合设置:具体参数为flex-flow:

justify-content设置主轴方向的对齐方式

下面的是两端对齐，项目之间的间隔都相等的例子:

align-items定义项目在交叉轴上如何对齐。

具体的对齐方式与交叉轴的方向有关，下面假设交叉轴从上到下。

align-content定义项目在交叉轴上如何对齐。

定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。

上面的align-content和align-items就是单轴和多轴的区别，不能同时使用，同时使用只能有一个有效

项目(子元素)属性

orderAPP定制开发#https://www.dudukj.cn/app/属性定义项目的排列顺序。数值越小，排列越靠前，默认为0

计算机都是以0为开始的，所以在记忆的时候也要跟上计算机的思维进行学习

flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。

flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。

flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。

下面这个flex属性是上述三个的总和设置属性:

总结

在使用弹性布局的时候，要点就是父子级关系，也就是盒模型内的元素进行布局的一种方法，其实以上的代码都是根据主轴和交叉轴进行设置布局，就好像是word文档排版一样的流程，多学多练就能牢固记忆并会运用了。本篇到此结束，欢迎大家的点赞和关注，我们下期见