#前端学习笔记#day13 弹性盒 弹性元素
- 弹性盒
- 是css中另外一种布局手段，它主要是用来代替浮动来完成页面的布局
- flex可以使元素具有弹性，让元素可以跟随页面的大小而改变
- —弹性容器
- 我们通过display来设置弹性容器
- display: inline-flex; 设置为行内的弹性容器
- —弹性元素
- 弹性容器的子元素是弹性元素（弹性项）（直接子元素，子元素的子元素不是）
- 一个元素可以同时是弹性元素和弹性容器
- flex-direction 指定容器中弹性元素的排列方式
- 可选值row 默认值，弹性元素在容器中水平排列（左向右排列）
- row-reverse 弹性元素在容器中反向水平排列（自右向左）
- column-reverse 弹性元素反向纵向排列（自下向上）
- flex-grow: ;指定弹性元素伸展的系数，默认值为0.
- flex-shrink 指定弹性元素的收缩系数
- 当父元素中空间不足以容纳所有的子元素，对子元素进行收缩
- justify都是主轴的，align都是辅轴上的
- align-items 元素在辅轴上如何对齐，元素间的关系
- 如果希望垂直水平双居中
- align-items: center;justify-content: center
- align-content 辅轴空白空间的分布（align-content和align-items同时使用时items不生效）
- align-self 用来覆盖当前弹性元素上的align-items
- 比如五个弹性元素，在弹性盒上设置了align-items，想单独给2号盒子改align-items。就可以写align-self: flex-end;
- flex-basis 元素基础长度，他之前写的长度就失效了，默认值是auto,表示参考元素自身的高度或者宽度。如果传递了一个具体的数值，则以该值为准
- 简写属性flex，可以设置弹性元素所有的三个样式
- flex 默认值是initial，相当于 flex:0 1 auto
- none 相当于0 0 auto不缩减，弹性元素没有弹性
- order 决定弹性元素的顺序
- 比如有三个元素，在第三个后面写order:1；表示排列在第一个