哪吒的人生信条：如果你喜欢你所学的，你就会有强大的动力支持。把前端死死抱住，每天努力学习，关注这个不一样的程序员。如果你喜欢你所学的东西，你就会有强大的动力去支持它。感谢每一位热爱前端的程序员，无论前端技术再牛逼，欢迎加我群vx:xiaoda0423前言本文是学习css中的一个重点应用，布局风格为flex布局，相信大家学过display属性，position属性，float属性，但是今天只学了一个新的东西，就是flex布局。什么是弹性布局？Flex是flexiblebox的缩写，意思是弹性布局。代码风格如下：.box{display:flex;}FlexboxLayout模块是为了提供一种更高效的方式来排列、对齐和对齐容器中的项目分配的控件，即使它们的大小是未知的，还是动态的，所以名为flex（弹性工作系统）的词flex布局可以使容器改变其项目的宽度和高度以最好地填充可用空间，或者收缩它们来防止溢出。Flexbox布局更适合应用程序组件和小型布局。在webkit内核的浏览器中，需要加上-webkit前缀，代码格式如下：.box{display:-webkit-flex;display:flex;}设置flex布局后，子元素（item）的float和clear，vertical-align属性会失效。在学习之前，首先要了解flexcontainerflexitems的概念。将弹性布局的元素设置为弹性容器（flexcontainer），简称容器。它的所有子元素都是容器的成员，弹性项（flexitem），简称item。那么请看下图来分析一下flex布局背后的主要思想。从图中可以看出，主轴是从main-start到main-end，横轴是从cross-start到cross-end。容器默认有两个轴，水平主轴mainaxis和垂直交叉轴crossaxis，从main-start到main-end称为（mainstart）主轴；从crossaxis从cross-start到cross-end称为（crossaxis），单个item在crossaxis上所占用的主轴空间称为mainsize，crossaxis所占用的空间称为crosssizecontainer。itemsalign-contentflex-direction属性决定了主轴的方向，也就是items.box的排列方向{flex-direction:row|行反转|栏目|column-reverse;}.flex-container{-webkit-flex-direction:行;/_Safari_/flex-direction:row;}.flex-container{-webkit-flex-direction:row-reverse;/_Safari_/flex-direction:row-reverse;}.flex-container{-webkit-flex-direction:column;/_Safari_/flex-direction:column;}.flex-container{-webkit-flex-direction:column-reverse;//Safari_/flex-direction:column-reverse;}使用flex-direction的盒子格式如下：//horizo??ntal.box{flex-direction:row;}//horizo??ntallyinverted.box{flex-direction:row-reverse;}//vertical.box{flex-direction:column;}//verticalinversion.box{flex-direction:column-reverse;}.box{宽度：400upx；高度：300upx；背景色：#007AFF；保证金：10upx;}.item{宽度：80upx;高度：80upx；背景色：#1CBBB4；border:1upxsolid#FFFFFF;}row:flex容器的主轴与当前写入方式的inline轴方向相同主起始方向和主结束方向分别相当于当前写入的起始方向模式和结束方向。.box-row{显示：flex；flex-direction:row;}row-reverse:与'row'相同，除了主要开始方向和主要结束方向被交换。.box-row-reverse{显示：flex;flex-direction:row-reverse;}column:flex容器的主轴与当前书写模式的block轴同向。主起始方向和主结束方向分别对应于当前书写模式的前/头和后/脚方向。.box-column{显示：flex;flex-direction:column;}column-reverse:与'column'相同，只是交换了主起始方向和主结束方向。.box-column-reverse{显示：flex;flex-direction:column-reverse;}flex-wrap属性：根据flex容器中的可用空间，指定flex项目是否环绕以及它们环绕到多行或多列的方向。.box{flex-wrap:nowrap|包装|wrap-reverse;}.flex-container{-webkit-flex-wrap:nowrap;/_Safari_/flex-wrap:nowrap;}.flex-container{-webkit-flex-wrap:wrap;/_Safari_/flex-wrap:wrap;}.flex-container{-webkit-flex-wrap:wrap-reverse;/_Safari_/flex-wrap:wrap-reverse;}flex-wrap:nowrap:不换行。（所有flex项目都在一行上）.box-flex-wrap-nowrap{display:flex;flex-wrap:nowrap;}flex-wrap:wrap:wrap，上面第一行。（弹性项目将从上到下包裹多行）。box-flex-wrap-wrap{display:flex;flex-wrap:wrap;}wrap-reverse:wrap,下面第一行。（弹性项目将从下到上包裹多行）。box-flex-wrap-wrap-reverse{display:flex;flex-wrap:wrap-reverse;}flex-flow属性是flex-direction属性和flex-wrap属性的简写，默认值为rownowrap。.box{flex-flow:||;}.container{flex-flow:columnwrap;}.box-flex-flow-1{display:flex;弹性流：自动；//flex-flow:rownowrap;}.box-flex-flow-2{display:flex;flex-flow:rowwrap;}justify-content属性：指定在解析任意灵活长度和自动边距后，flex项目如何沿flex容器的主轴对齐。（定义项目在主轴上的对齐方式）。box{justify-content:flex-start|弹性端|中心|间隔|space-around;}flex-start初始值。弹性项目包装在生产线的开头。第一个弹性项目的起始端被放置在弹性容器的开头。下一个弹性项目的起始边缘和第一个弹性项目的结束边缘按布局轴的方向顺序放置。沿布局轴保留的所有空间都放置在布局轴的末端。.box-flex-justify-content-1{显示：flex；justify-content:flex-start;}如图：flex-end弹性项打包到行尾。第一个弹性项目的结束边缘被放置在弹性容器的末端。下一个弹性项目的结束边缘和第一个弹性项目的起始边缘沿着布局轴顺序放置。布局轴上的所有剩余空间都放置在布局轴的起点。.box-flex-justify-content-2{显示：flex；justify-content:flex-end;}如图：中间的弹性项被打包在行的中间。Flex项目被放置在一条直线上，在对齐线的中心彼此齐平，在主起点边距和第一个项目、主端边缘线和最后一个之间的线之间有相等数量的空白物品。（如果剩余空闲空间为负数，弹性项目将在两个方向上平均溢出。).box-flex-justify-content-3{显示:flex;justify-content:center;}如图：space-between弹性项均匀分布在这条线上。如果剩余可用空间为负数，或者如果一行中只有一个flex项目，则此值与“flex-start”相同。否则，main-start确保第一个flex项目行的边距放置有足够的main-start边线，最后一个flex项目的main-intent边距线放置有足够的main-intent边线，其余的flex项目是distributedbetween任意两个相邻项之间的间距相同。.box-flex-justify-content-4{显示：flex；justify-content:space-between;}如图所示，space-aroundelasticitem均匀分布在一行中，两端各留一半空间。如果剩余可用空间为负，或者一行中只有一个弹性项目，则此值与“center”相同。否则，该行上的弹性项目的分布使得该行上任意两个相邻弹性项目之间的间距相同，并且第一个/最后一个弹性项目与弹性容器边缘之间的间距是弹性项目之间间距的一半..box-flex-justify-content-5{显示：flex；justify-content:space-around;}如图：space-evenly：分布item，使得任意两个item之间的间距（以及到边缘的间距）相等。align-items属性：指定flex容器中flex项目的对齐值（垂直于flex-direction属性定义的布局轴）。.box{对齐项目：flex-start|弹性端|中心|基线|stretch;}修改item样式如图：.item1{width:100upx;高度：120upx；}.item2{宽度：100upx；高度：130upx;}.item3{宽度：100upx;height:140upx;}flex-start:对齐横轴起点。.box-flex-align-items-1{显示：flex;align-items:flex-start;}flex-end:对齐横轴的末端。.box-flex-align-items-2{显示：flex;对齐项目：flex-end；}center：对齐到横轴的中点。.box-flex-align-items-3{显示：flex;align-items:center;}baseline：项目第一行文本的基线对齐方式。修改item使其与第一行文本的基线对齐，如图所示，itme3-text的顶部没有剩余空间，所以强制这样做。如果有空格，则第一个为标准对齐方式，第一项文本的底线对齐。.item1-text{填充：5upx；宽度：120upx；高度：120upx；}.item2-text{宽度：120upx；高度：130upx；}.item3-text{填充：15upx；宽度：120upx；高度：140upx；}.box-flex-align-items-4{显示：flex；align-items:baseline;}stretch(default):如果item没有设置高度或者设置为auto，它会占据整个容器的高度。修改item，不定义高度，如果有高度，还是按照原来的高度呈现。.item-noheight{宽度：100upx;border:1upxsolid#FFFFFF;}.box-flex-align-items-5{display:flex;align-items:stretch;}align-content属性：指定当使用flex-direction时，当垂直于属性定义的轴的轴上有额外空间时，flex项目的行如何在flex容器内对齐。align-content属性定义了多个轴（多条线）的对齐方式。如果项目只有一个轴，则此属性无效。.box{对齐内容：flex-start|弹性端|中心|间隔|环绕空间|stretch;}flex-start：与横轴起点对齐flex-end：与横轴终点对齐center：与横轴中点对齐space-between：与两端对齐crossaxis,axis之间的间隔均匀分布占据整个横轴项。属性orderflex-growflex-shrinkflex-basisflexalign-selforder定义项目的排序。值越小，排列越高。默认为0.item{order:;}flex-grow属性定义了item的放大比例，默认为0，如果有剩余空间，则不会放大如果所有item的flex-grow属性都为1，那么它们会平分剩余空间，如果一个item的flex-grow属性为2，其他item为1，那么前者剩余占用的空间会是其他item的两倍。.item{flex-grow:;/*default0*/}flex-shrink属性定义item的收缩比例，默认为1，如果空间不足，item会收缩如果所有item都有flex-shrink属性，两者都是1。当空间不足则按比例减少。如果一个item的flex-shrink属性为0，其他item为1，前者在空间不足时不会收缩。负值对该属性无效。.item{flex-shrink:;/*default1*/}flex-basis属性：定义分配多余空间前item占用的主轴空间的主要大小，浏览器根据该属性空间计算主轴是否冗余。它的默认值为auto，即项目的原始大小。.item{弹性基础：<长度>|汽车;/*defaultauto*/}flex属性是flex-grow、flex-shrink和flex-basis的简写，默认值为01auto，后两个属性可选。.item{flex:无|[<'flex-grow'><'flex-shrink'>?||<'flex-basis'>]}该属性有两个快捷值：auto（11auto）和none（00auto）align-self属性：允许单个项目与其他项目具有不同的对齐方式，并且可以覆盖对齐项属性。默认值为auto，表示继承父元素的align-items属性。如果没有父元素，相当于stretch。.item{对齐自我：自动|弹性启动|弹性端|中心|基线|stretch;}点赞、收藏、评论我是Jeskson（达达前端），感谢你的才华：点赞、收藏、评论，我们下期再见！（本文解释如有错误请指出?谢谢，一起学习）下期见！文章持续更新，微信搜索“程序员哆啦A梦”即可第一时间阅读，并回复【资讯】一线大厂资料我已经准备好了，本文http://www.dadaqianduan.cn/#/已收录，欢迎Star。
