今天扣丁学堂Web前端培训来给大家介绍一下关于弹性盒布局的详细介绍，首先弹性盒布局是css3引入的一种新的布局模式，也称为flexbox布局，即伸缩性布局盒模型，这种布局方式是用来提供一个更好的有效地方式制定、调整和分布一个容器里的项目布局，即使容器中的项目的尺寸未知或者是动态变化的，弹性盒布局模型也能正常的工作。在该布局模型中，容器会根据布局的需要，调整其中包含的项目的尺寸和顺序来最好地填充所有可用空间。弹性盒布局是与方向无关的，在传统的布局方式中，block布局是把块在垂直方向从上到下依次排列，而inline布局则是在水平方向来排列，而弹性盒布局并没有这样内在的方向的限制，可以由开发者自由定义。
弹性盒布局中有两个互相垂直的坐标轴，一个是主轴，一个是侧轴。在未声明时，主轴默认方向是水平方向，侧轴是垂直方向，但是方向并不是固定的，可以通过css声明首先定义主轴的方向是水平还是垂直，从而侧轴的方向也能确定下来。
主要功能
1、屏幕和浏览器窗口大小发生变化也可以灵活调整布局;
2、制定伸缩项目沿着主轴或者侧轴按比例分配额外空间，从而调整伸缩项目的大小;
3、指定伸缩项目沿着主轴或侧轴将伸缩容器额外空间，分配到伸缩项目之前、之后或之间;
4、指定如何将垂直于元素布局轴的额外空间分布到该元素的周围;
5、控制元素在页面上的布局方向;
6、按照不同于标准流所指定的排序方式对屏幕上的元素重新排序。
基本布局
1、定义弹性盒：
声明伸缩容器(父元素)：display：flex;需要加前缀
display：-webkit-flex;
display：-moz-flex;
display：-ms-flex;
display：-o-flex;
display：flex;
2、伸缩容器属性：
2.1、伸缩流方向flex-direction主要用来创建主轴，定义伸缩项目在伸缩容器中的方向
row：从左向右
row-reverse：与row相反;
column：从上到下
column-reverse：与column相反;
2.2、伸缩换行flex-wrap：
nowrap不换行默认值，不管超出还是不超出都不会换行
wrap换行一旦伸缩项目超出伸缩容器，那么就会换行
wrap-reverse换行反向主轴水平时，上下反向，主轴垂直时，左右反向;
2.3、伸缩流方向与换行flex-flow缩写形式。
flex-flow：flex-directionflex-wrap;
两个值同时定义或者单独定义都生效
2.4、主轴对齐justify-content主要用来定义伸缩项目沿主轴线的对齐方式;
flex-start：伸缩项目向一行的起始位置靠齐;
flex-end：伸缩项目向一行的结束位置靠齐;
center：伸缩项目向一行的中间位置靠齐;
space-between：伸缩项目会平均的分布在行里;
space-around：伸缩项目会平均的分布在行里，两端保留一半的空间;
2.5、侧轴对齐align-items伸缩项目行在侧轴上的对齐方式
flex-start：伸缩项目在侧轴起点边的外边距紧靠住该行在侧轴起始边;
flex-end：伸缩项目在侧轴终点边的外边距紧靠住该行在侧轴终点边;
center：伸缩项目的外边距盒在该行的侧轴上居中放置;
baseline：伸缩项目根据伸缩项目的基线对齐;
stretch：伸缩项目拉伸填充整个伸缩容器。
2.6、堆栈伸缩行align-content(行与行之间的对齐方式)定义多个伸缩行的对齐方式;往往要与换行同时应用，没有换行就不存在多行的情况。
flex-start：各行向伸缩容器的起点位置堆叠;(没有行距)
flex-end：各行向伸缩容器的结束位置堆叠;(底部对其没有行距)
center：各行向伸缩容器的中间位置堆叠;(居中没有行距)
space-between：各行在伸缩容器中平均分布;(两端对齐，中间自动分配)
space-around：各行在伸缩容器中平均分布，两端保留一半的空间;(自动分配距离)
2.7、align-self(加在子元素上)：主要用来设置单独伸缩项目在侧轴的对齐方式，可以覆盖align-items。
flex-start：伸缩项目在侧轴起点边的外边距紧靠住该行在侧轴起始边;(元素位于容器的开头)
flex-end：伸缩项目在侧轴终点边的外边距紧靠住该行在侧轴终点边;(元素位于容器的结尾)
center：伸缩项目的外边距盒在该行的侧轴上居中放置;(元素位于容器的中间)
stretch：伸缩项目拉伸填充整个伸缩容器。(元素被拉伸以适应容器)
2.8、项目尺寸的弹性：
Flex-basis：属性定义了在分配多余空间之前，项目占据的主轴空间(mainsize)。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的来大小。
它可以设为跟width或height属性一样的值(比如350px)，则项目将占据固定空间。不常用，还在不断变化中
Flex-grow：属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。
如果所有项目的flex-grow属性都为1，则它们将等分剩余空间(如果有的话)。如果一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍。
Flex-shrink：属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。
负值对该属性无效。
缩写：flex：默认值为01auto。
作为CSS3规范的一部分，弹性盒布局模型可以在很多典型的场景中简化完成布局所需的CSS代码。该布局模型也提供了很多实用的特性来满足常见的布局要求，包括对容器中项目的排列、对齐、调整大小和分配空白空间等。弹性盒布局模型可以作为Web开发人员工具箱中的一个很好的工具
以上就是关于扣丁学堂Web前端开发弹性盒布局的详细介绍，希望对同学们学习web开发有所帮助。
网友评论