felx弹性盒子
简介:
弹性盒子(flex,inline-flex)是一种新的布局模式，它可以根据页面需要适应不同的屏幕大小，这种新的布局方式与传统的浮动定位相比方便了很多，为开发人员减轻了很多压力，兼容性也很好，目前的主流浏览器基本上都是可以完美支持的。那么让我们一起来看看神奇的弹性盒子吧。
弹性盒子的属性
| 属性 | 简介 |
|---|---|
| flex-grow | 设置弹性盒子的扩展比率 |
| flex-shrink | 设置弹性盒子的收缩比率 |
| flex-basis | 设置弹性盒子的宽度 |
| flex-direction | 设置弹性盒子的子元素在父元素中排放方式 |
| flex-wrap | 设置弹性盒子的子元素超出父容器宽度时是否换行 |
| align-content | 设置弹性盒子堆叠伸缩行的对齐方式 |
| align-items | 设置弹性盒子元素在纵轴方向上的对齐方式 |
| align-self | 设置弹性盒子自身在纵轴方向上的对齐方式 |
| justify-content | 设置弹性盒子在主轴方向上的对齐反方式 |
| order | 设置弹性盒子对象子元素出现的顺序 |
让我们一起来看看这些属性吧！
三个盒子就跟浮动一样排列在了一起是不是很神奇呢?如果我们把flex改成inlin-flex会怎么样呢？
那么我们来看看效果会有什么不同
好像完全一样啊，是怎么一回事呢？其实这里的inline-flex跟inline-bloke是一样的，后面如果再有元素那么他们将会并排排列，如果没有跟flex的显示是完全一样的。
flex-direction：
flex-wrap：
align-content和justify-content实现居中的效果
在没学弹性盒子之前我们的句中要设置margin啊 定位还要计算等等之类的但是弹性盒子给我们提供了很大的便利，我们一起来看看如何实现元素的居中。
下面我们一起看看盒子排放的顺序问题，从左到右，从上到下都是可以的，
我们依次来看看这些效果
align-content的属性跟这个一致，但是不是在主轴，是在侧轴上进行排列。动动小手去试试吧。
我们来看看order属性，可以自定义排放的顺序。order的排列方式是从小到大的，值越小就在前面，值可以为负数，默认值是0。
让我们来看看是否跟我们想象中的效果一样，从小到大排列。
-100 < -1 < 100 达到我们想要的效果。
flex-grow：重点
flex-shrink 重点
注意:宽度一定要是元素的实际宽度，做运算后，如果遇到小数需要保留两位小数。
点击开启新的大陆