，说说布局神器flexbox视频讲解。有薪酬的。Flexbox堪称布局神器，但是属性太多，入手困难，所以总结一下自己学到的东西。基本概念flexbox是FlexibleBox的缩写，译为弹性布局。flex布局主要是让容器中的子项可以根据配置改变自己的宽高和顺序，以最好的方式填充容器，达到灵活的目的。容器有水平轴和垂直轴来划分容器。水平轴默认为水平方向，垂直轴默认为垂直方向。容器属性容器属性用于控制布局的总体方向。flex-directionflex-wrapflex-flowjustify-contentalign-itemsalign-contentflex-directionflex-direction属性确定主轴方向（即项目排列的方向）。行|行反转|栏目|column-reversecodedemopreviewflex-wrap该属性用于控制当容器的主轴方向无法放得下所有item时如何处理。包装|换行|no-wrap，默认不换行。代码演示预览flex-flowflex-flow是flex-direction和flex-wrap两个属性的简写，记不住的不要强求。默认值是rownowrap。justify-contentjustify-content定义子项目如何在主轴上对齐。你可以想到text-align。弹性启动|弹性端|中心|间隔|space-around需要注意的是，space-around两边的边距比中间的边距要小。代码演示previewalign-itemsjustify-content定义子项在垂直轴上的对齐方式。弹性启动|弹性端|中心|基线|stretchcodedemopreviewalign-contentalign-content属性定义多个轴的对齐方式。如果项目只有一个轴，则此属性无效。也就是说，这个属性只有在wrap生效的时候才有意义。弹性启动|弹性端|中心|间隔|环绕空间|stretchcodedemo预览以上就是flex布局涉及到的所有容器属性。在接下来的总结中，我们将一起学习项目相关的属性。项目属性项目属性用于控制项目本身在容器中的位置和缩放比例。orderflex-growflex-shrinkflex-basisflexalign-selforder用于控制弹性项目本身的放置顺序。默认值为0，可以为负数。值越小，物品放置得越近。codedemopreviewflex-growflex-grow控制项目的放大比例，默认为0，不放大。值得注意的是，缩放是相对于剩余空间的，而不是项目本身的大小。codedemopreviewflex-shrinkflex-shrink类似于flex-grow，主要用于控制项目的收缩比例。默认值为1，同比缩小。代码演示预览flex-grow和flex-shrink都是根据剩余空间进行放大和缩小，而不是它们自己。每个人都记得瘦骆驼比马大。flex-basisflex-basis很容易理解，如果横轴是主轴，flex-basis可以作为width；如果垂直轴是主轴，可以使用flex-basis作为高度。个人感觉flex-basis的width和height更加灵活。flexflex属性是flex-growflex-shrinkflex-basis三个属性的缩写。同样的道理，为了不增加大家的学习难度，也没有必要强求。今天就给大家讲解一下flex:1;当flex的值为整数时，表示flex-grow:value；flex-shrink采用默认值1；弹性基础：为0%。.item{flex:1;}.item{flex-grow:1;伸缩收缩：1；flex-basis:0%;}然后想想什么flex:2;相当于？.item{flex:2;}.??item{flex-grow:2;伸缩收缩：1；flex-basis:0%;}align-selfalign-self控制自身的对齐方式，和容器属性align-items类似，当然优先级machine肯定比他父亲高。汽车|弹性启动|弹性端|中心|基线|stretchcodedemo预览以上项目的属性和练习也都完成了，接下来使用flex布局来实现我们日常工作中常见的三个需求。实战中实现等宽布局。即使删除或添加项目，也无需更改CSS代码。常用于实现导航代码演示预览的垂直和水平居中。这种需求在flex中特别常见且易于使用。代码演示预览的布局是等高的。当左右盒子的高度不一样时，我们可以考虑使用flex来实现。代码演示预览FLEXBOXFROGGY游戏考验你对flexbox的理解欢迎大家指正批评，或留言。QQ群：538631558【开发环境推荐】CloudStudio是一款基于浏览器的集成开发环境，支持大部分编程语言，包括HTML5、PHP、Python、Java、Ruby、C/C++、.NET小程序等，无需下载安装器，一键切换开发环境。CloudStudio提供完整的Linux环境，支持自定义域名指向、计算资源动态调整，可以完成各种应用的开发、编译和部署。
