casebaselayouthtmlcss.box{显示：-webkit-flex；显示：弹性；}.item{宽度：200px；高度：300px；背景：红色；边框：1px实心#ccc；字体大小：50px；文本对齐：居中；行高：300px；颜色：#fff；：因为使用了flex布局，子元素默认水平排列，所以不需要float，不起作用；parentbox属性探索flex-directionflex-direction表示子元素的排列方向和顺序；默认行（水平，从左到右））；row-reverse表示从右到左的水平行。框{显示：-webkit-flex;显示：弹性；弹性方向：行反转；如果each将每个li设置为width:3000px;(currentscreenWidth980px)，效果：子元素宽度超出，不仅不换行，还会自动适应大小，split为25%；上面的split只在row时才split，如果改为垂直排列：flex-d方向：专栏；元素不会被挤压，宽度为3000px；但需要注意的是，它并没有因为空间不足而换行，而是column的值规定了它下面的值可以逆序垂直调整flex-direction:column-reverse;//表示元素竖直反向排列flex-wrapflex-wrapdefaultnowrap:上面3000px的子元素不换行正是因为这个竖直默认不会换行，所以上面设置的是3000px宽，不换行会换行;同样的代码，如果多加一句。框{显示：-webkit-flex;显示：弹性；弹性方向：行反转；弹性包装：包装；//换行，第一行在上面。可以发现，设置为可以换行后，子元素的宽度变成了屏幕宽度的100%；这就好比一个弹性盒子塞进一个比自己小的盒子里，弹性盒子自动缩小自己的宽度。如果你这样写：.box{display:-webkit-flex;显示：弹性；弹性方向：行反转；flex-wrap：wrap-reverse；//新行，第一行在下面。}flex-flowflex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为rownowrap。flex-flow:rowwrap===flex-direction:row;flex-wrap:wrap代码又变了：.box{display:-webkit-flex;显示：弹性；弹性方向：行反转；flex-wrap:wrap-reverse;}可以写成.box{display:-webkit-flex;显示：弹性；flex-flow:row-veversewrap-reverse}justify-content有五个值，其中，如果item是比较word文档的文本，flex-star可以认为是左对齐，flex-end:right-对齐；弹性中心：居中；key介绍valuespace-around：平分内容的空闲空间，每一项两边的间隔相等；setthefreespace空间为area，有k个子元素。每个子元素增加多少边距？==>area/2k这个例子：.item{width:200px;}.box{display:-webkit-flex;显示：弹性；justify-content:space-around;}值得注意的是，item之间的间隔是item-to-border间距的两倍。space-between：两端对齐，item之间的间隔相等。如果不给align-itemsalign，基本可以知道是针对垂直方向的；.box{显示：-webkit-flex；显示：弹性；证明内容：空格之间；高度：1760px；对齐项目：居中；记得给父级添加一个高度；这样可以看出元素垂直居中，其他类似的属性就不再写了flex-start：横轴起点对齐。flex-end：横轴末端对齐。stretch（默认）：如果item没有设置高度或者设置为auto，它会占据整个容器的高度。查看基线属性：项目中第一行文本的基线对齐方式。这个属性比较新，可以试试：.box{align-items:baseline;}1234上面我设置了不同的高度和line-height；您可以看到容器调整了它的位置以对齐文本；align-content定义多个轴的对齐方式。如果项目只有一个轴，则此属性无效。.box{高度：1760px；//应该拉伸高度display:-webkit-flex;显示：弹性；证明内容：空格之间；弹性流：行换行；//横线换行；生成多轴}123456789尝试添加代码align-content:flex-end;align-content:空间周围；对齐内容：空间之间；对齐内容：居中；可以说，flex布局在父元素上控制子元素的垂直方向还是很到位、清晰的；子元素属性的顺序可以理解为子元素的队列数，默认都是0，队列越大越靠后；123456789可以看到，1号放在后面，因为order设置为10；而2号，因为order更大，所以放在最后。flex-growexcessspace的值allocationratio是一个数字，默认为0；只要一个同轴元素设置为flex-grow，所有多余的空间都会按照这个比例分配，元素会占据整行。分配的空间是自己计算的；123456789盒子的宽度变大，（也就是grow）如果子元素有margin，会先计算水平行数，然后通过flex-grow判断分配多少空间。例如如下代码，//当没有设置flex-grow时12//设置flex-grow时12因此，margin不被认为是额外的空间，不会被重新分配；flex-shrink和flex-grow有点相反，用来处理非换行，内容超出屏幕，应该决定谁来收缩；值越大，缩小比例越大；默认为1并更改代码;.box{flex-flow:rownowrap;}12345此时父框规定换行不允许;但是5项的宽度已经超过了屏幕的宽度；这个时候，所有人都在按比例缩小。下面设置1号flex-shrink：60012345它可以看到，虽然我把数字1设置为非常大的缩放，但实际宽度并不是很小；意思是浏览器会决定内容是否放得下，够了就停止缩放；12346789当内容很多的时候，1号明显缩放的很不好。同时发现4号虽然设置为200，但是它的大小和1号设置为600是一样的。这是因为它们已经缩放到只能容纳文本的空间；所以他们不会再扩大规模；这与文本空间相同。flex-basis属性定义项目在分配多余空间之前占据的主轴。空间（主要尺寸）。浏览器根据这个属性计算主轴是否有多余空间。它的默认值为auto，即项目的原始大小。简单来说，这个值会影响浏览器计算的输入值。有四种情况1，会超过，然后你设置的值低于原来的值（原来的值是200pxperitem），你的元素就会被压缩。1234567891，会超过，那么你设置的值比原来的值大，你的元素就会相对变大。1234567893不会超过，你设置值比原来小，你还是会小1234不会超过，如果你设置一个比原来更大的值，你会更大123这个值可以看做是宽度，设置成和原来一样的值时，基本没有变化<liclass="item"style="flex-basis:200px;">123align-self该子元素单独设置垂直对齐；默认auto表示可以定义为父亲；其他值同align-items12345该属性主要是为了方便特殊定位word元素的flex属性是flex-grow、flex-shrink和flex-basis的缩写。默认值为0和1自动。最后两个属性是可选的。.item{flex:无|[<'flex-grow'><'flex-shrink'>?||<'flex-basis'>]}这个属性有两个快捷键值：auto(11auto)和none(00auto)。建议先使用这个属性，而不是分别写三个单独的属性，因为浏览器会计算相关的值。实用技巧场景一：右侧div固定，左侧空间自动分配；上图中结帐的宽度要固定，显示在右边；左边两个价格可以自由分配剩余空间；layout（本例为小程序）折扣￥{{discounts}}总计￥{{account-discounts}}去结算css:.order-bottom{显示：flex;调整内容：空格；}.bot-left{显示：flex；证明内容：空间周围；对齐项目：居中；flex:1;}.to-pay{宽度:220rpx;height:100%;}场景二：右侧固定高度，左侧文字垂直居中布局备注：css：.option-item{display:flex;证明内容：空格之间；对齐内容：居中；font-size:16px;}.opiton-title{align-items:center;显示：flex;}.option-valtexta可以读{width:400rpx;min-height:50rpx;}能不能在宽度满后自动换行，换行后的元素也自动分布？需要一组代码实现如下效果html规定
cssdiv{显示：flex;宽度：300px；高度：200px；证明内容：空间周围；:10px;}span{/*这个min-width指定了flex可以压缩子元素的最小宽度，flex-wrap:warp可以达到自动换行的效果*/min-width:25%;高度：50%；弹性：1；背景：红色；填充：10px；/*背景被裁剪到内容区域（contentbox)outeredge*//*这句话的设置背景只在content区有效，妙极了*/background-clip:content-box;框大小：边框框；}最后，flex布局在移动端感觉还是很强大的，一般都能满足各个屏幕适配的要求；如果有机会，还是要多练习。
