flex⼀⾏两个_这就是flex
对flex的第⼀印象就是解决响应布局存在的，使得布局的设置更灵活，但随之⽽来的是需要明⽩flex内部是怎么绘制的，⼀直以来就是看⼀下其api, ⼤概知道什么意思，上来就开始写，但对这个玩意却⼀直没有达到朋友的地步，这就是flex, 根据⾃⼰的demo慢慢来撕开它
⾸先，flex就是⼀个容器，⼀个⼤盒⼦，凡是在这个盒⼦内的元素都要尊师其制定的位置规则，这个元素该在哪，另外⼀个元素该在哪，我有我的规则，要想在⾥⾯呆着，就要遵守规则，否则展⽰⼀团乱。
规则⼀.  布局⽅向横向还是纵向。flex-direction: row，⾥⾯的元素按照横向排列，向左看！。 column: 乖乖的按照纵向排好对，向上看！
先站好队
纵向排列
横向排列
规则⼆.  所处位置justify-content, align-items, align-content
什么意思呢？站好队了，但是在这个flex盒⼦⾥的位置还没明确，从哪开始站队，并保持这个⽅向。决定站的位置有两个：先看第⼀个
justify-content。这个规则决定了你在⽔平⽅向的位置，默认的位置是在最左边.
这两个规则都有同样的位置选择：请看下图
flex-start, center, flex-end, space-around, space-between
从上图可以看出，justify-content就相当于⼀个指挥官，⾥⾯的⼈从开始给我站好，从中间给我站好，从末尾开始站好，两边分开站好，均
匀排列站好。⾥⾯的这些⼩弟，乖乖的在指定的⽅向上站好。
同上⾯，只不过站的⽅向按照垂直⽅向开始
align-content和align-items⼀样，区别在于flex盒⼦内元素是否是按⼀⾏站好，如果分成了多个队列，那么align-content会把多个队列当
做成⼀个整体，再按照左，中，底等战队，否则每⼀⾏各⾃应⽤战队规则。就好⽐军训，各队向左向右看齐，齐步⾛，⾛啊⾛，⾛到
center，或者flex-start, flex-end的位置；另外就是各队按照⼩组散开，各⼩组按照所划分的区域向左向右看齐。
规则三. 在我内部超过⼀⾏是否要换⾏:flex-wrap.
什么意思呢？就是说我的房间就这么⼤，你们这些⼩弟按照⼀⾏或者⼀列站好，按照上图所⽰，⼈太多，⼀⾏不够站，那怎么办，就是靠这
个规则来指定了，是要换到第⼆⾏还是给你们每个⼈瘦⾝，还是站在⼀⾏，请看下图：
left：挤在⼀列（⾏）, right: 换⾏了，我不跟你们挤在⼀起
万能分割线
^^…………………………………………………………………………………………………………………………………………………………………………
好了，说完了那个盒⼦上的属性，看看盒⼦内的元素的⼀些规则把，总不能只能指挥官有规则把，我也得有点⾃我张扬的个性把，展⽰⾃我
个性的时候到了
规则1. 战队顺序：order
⼀开始，⼩兵门按照盒⼦内出现的顺序依次站好，也就是先到先得，谁让你来的晚的，往后站吧！
那有的⼈不愿意了，我们的战队顺序我们要⾃⼰商量。约定⼀个值，order吧，谁分到的值约⾼，谁往后站，0是⽼⼤
html的flex布局
left：个性展⽰ right：体制内规则
这个就⽜逼了啊，随意调配每个元素的位置，我不想站这了，更改⼩数字，调下位置，好像⼩学考试调位置规则2. 所占空间⼤⼩占⽐flex-grow, flex-shrink
有的⼈觉得我有点胖，我要多⼀点空间，太挤了，好吧，⾃我膨胀吧，给你这个权利: flex-grow设置⾼⼀点，其它兄弟看到会给你腾位置的
left：展⽰了⾃我膨胀，right：正常⽣长
同理，我瘦，我想主动减少我的位置，就是这么任性！
left: 我好瘦啊，位置给你吧 right: 正常⽣长
这个shrink看来就是牺牲⾃我，成全他⼈， grow就是我就要爽，你么⾟苦点
⾄于flex-basis这个有点绕，不考虑每个元素的⾃我grow和shrink, ⽗容器宽度去掉⼦元素空⽩元素（⽐如该元素内容就撑开10px，我给你给这个元素预留10px, 就可以通过flex-basis来设置，）就，所以就是去掉每个元素预留的空间外，取值为extra, extra再按照grow⽐列给每个元素分每个元素内容可以占多少，如果没设置grow，则为1，平均分，最终渲染到页⾯上每个元素的宽度=basis + extra*
(grow+grow)/n
可参考：flex和flex:1的含义 - 朱帅 - 博客园
后续： flex:1 等价于flex-grow:1, flex-shrink:1(感觉没啥⽤，在实现两栏布局的时候)，flex:basis:0%.其实实验测试只要flex-grow:1即可，⾃动填充剩余空间。当然，如果两个元素都设置flex-grow就不⾏了，这就产⽣竞争关系了，凭什么让你占完，就是这样。如果你不设置，我设置了flex-grow:1, 不好意思，剩下的空间我全要了，谢谢哈。^^
这就是 flex暂时先到这， 后续想到新的再来更新，这就是系列第⼀季我来了！

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。