极力推荐小游戏学习Flex布局Flexbox Defense 一共十二关，通关迅速掌握Flex要点 <p>这里简单总结一下Flex布局</p> <h2>Flex布局</h2> <p>Flex是Flexible Box的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。</p> <p>父元素设为FLex布局后，主要有以下几个属性：</p> <table> <thead> <tr> <th>属性</th> <th>值</th> </tr> </thead> <tbody> <tr> <td>flex-direction（ 控制主轴 ）</td> <td><code>row</code>、<code>row-reverse</code>、<code>column</code>、<code>column-reverse</code></td> </tr> <tr> <td>justify-content（ 控制主轴布局 ）</td> <td><code>flex-start</code>、<code>center</code>、<code>flex-end</code>、<code>space-around</code>、<code>space-between</code></td> </tr> <tr> <td>align-items（ 控制交叉轴布局 ）</td> <td><code>flex-start</code>、<code>center</code>、<code>flex-end</code></td> </tr> </tbody> </table> <p>子元素设为FLex布局后，主要有以下几个属性：</p> <table> <thead> <tr> <th>属性</th> <th>值</th> </tr> </thead> <tbody> <tr> <td>order（规定子元素在父元素的排序）</td> <td>number</td> </tr> <tr> <td>align-self（控制子元素在父元素的交叉布局）</td> <td><code>flex-start</code>、<code>center</code>、<code>flex-end</code></td> </tr> <tr> <td>flex（定义子元素分配剩余空间的份数）</td> <td>number，默认值为 0 1 auto</td> </tr> </tbody> </table> <p>通过查资料, 在 <strong>子元素</strong> 上设置的<a href="https://so.csdn.net/so/search?q=flex&amp;spm=1001.2101.3001.7020">flex</a>属性是一个复合属性, 还有三个子属性，分别是<code>flex-grow</code>、<code>flex-shrink</code>、<code>flex-basis</code></p> <p>这里分别提一下这三个属性</p> <ul> <li> <p><code>flex-grow</code><br /> 定义子元素的拉伸因子，当容器空间过剩时，子元素按比例进行拉伸。 flex-grow的默认值为0，意思是该元素不索取父元素的剩余空间，如果值大于0，表示索取。值越大，索取的越厉害。</p> <p>打比方: 父元素宽度300px, 两个子元素宽度分别是100px, 当子元素设置flex: 0 1 auto 时,多余的100px空间会自动分给两个子元素,也就是两个子元素宽度都是150px,</p> </li> <li> <p><code>flex-shrink</code><br /> 定义子元素的收缩因子，当容器空间不足时，子元素按比例进行收缩。 flex-shrink的默认值为1，当父元素的宽度小于所有子元素的宽度的和时，子元素的宽度会减小。值越大，减小的越厉害。如果值为0，表示不减小。<br /> flex-shrink: 0 表示不挤压子元素的宽度</p> </li> <li> <p><code>flex-basis</code><br /> 定义为子元素分配的默认空间大小，也可以用width设置宽度。如果元素上同时设置了width和flex-basis，那么width 的值就会被flex-basis覆盖掉。</p> </li> </ul> <blockquote> <p>注意事项：设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。</p> </blockquote>
