了解弹性盒子

弹性盒子

给父框添加display: flex;属性就可以把父框变成弹性盒子的容器了


先明白一个概念：主轴和交叉轴

主轴是根据 flex-direction 的属性值来确定的。当值为column时，主轴是垂直方向的。当值为row时，主轴是水平方向的。那么交叉轴就是垂直于主轴的那条线。

弹性盒子的属性分为容器属性和子项目属性。容器属性是来控制整体样式，加给容器里边的。子项目属性是来调整单个元素的样式。

容器属性

• flex-direction 定义子项目在父框内的排列方法
  • row 子项目在容器内从左到右横着排
  • column 子项目在容器内从上到下纵着排
  • row-reverse 子项目在容器内从右到左横着排，效果类似于float：right；
  • column-reverse 子项目在容器内从下到上纵着排

• flex-wrap 当容器的一行宽度不足以容纳几个子项目的宽度时应该怎么办
  • nowrap 子项目不会换行，子项目的宽度会被均等压缩，压缩到正好可以处于容器内
  • wrap 子项目换行处理，容器高度被撑开
  • wrap-reverse 子项目换行处理，并且反向变动。第一行会扭转到第二行，第二行扭转到第一行

• justify-content 定义子项目在容器中的主轴上的对齐方式
  center 子项目在容器中居中

flex-start （默认值）子项目与容器的起始处对齐

flex-end 子项目与容器的结尾处对齐

space-between 两端对齐。每个子项目之间的间隔等分

space-around 每个项目两侧的间隔相等

space-evenly 每个间隔的距离都相等

• align-items : 用来设置单行的子项目在交叉轴上（垂直方向）的默认对齐方式
  flex-start 交叉轴的起点对齐。
  flex-end 交叉轴的终点对齐。
  
  center 让单行子项目在容器内垂直居中。此时再添加上justify-content：center；属性就可以让内部的子项目垂直水平居中，见图2。
  
  

  baseline 项目的第一行文字的基线对齐。
  stretch （默认值）如果项目未设置高度或设为auto，将占满整个容器的高度。但是注意该属性的使用要求子元素没有默认高度
  

• align-content:用来设置多行元素在交叉轴上（垂直方向）的对齐方式。对于只有一行的子项目来说无效
  center 让多行子项目在容器范围内的垂直方向上居中显示
  

  flex-start （默认值）：上对齐
  flex-end 下对齐
  space-between 两端对齐，每一行上下的间隔都相等。
  space-around 每一行上下两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。
  space-evenly 每一行上下间隔的距离都相等

• flex-flow: 是flex-directiong和flex-wrap属性的简写形式，默认值为row nowrap

子项目属性

• order 设置子项目的出场顺序的，数值小的排在前面。可以为负值。默认值是0

可以给所有的子项目添加一个order值，然后给需要靠前显示的子项目添加小的order值

• flex-shrink 指定了 flex 元素的收缩规则。

该属性用来设置，当父元素的宽度小于所有子元素的宽度的和时（即子元素会超出父元素），子元素如何缩小自己的宽度的。其收缩的大小是依据 flex-shrink 的值。默认值是1。值为1时表示不减小。如果子项目中有一部分需要被特别压缩，可以单独给它设置该值

• flex-grow 指定了 flex 元素的放大规则。

当父元素的宽度大于子元素宽度之和时，并且父元素有剩余，允许子项目在父框范围内扩展
子元素如何分配父元素的剩余空间。 flex-grow的默认值为0，意思是该元素不索取父元素的剩余空间，如果值大于0，表示索取。值越大，索取的越厉害。

• flex-basis 当flex-direction：row时，指定flex元素的宽度。

当flex-direction：column时，指定flex元素的高度。
具体是指高度还是宽度，要根据主轴的方向来确定。指的是它在主轴上占据的空间
flex-basis的优先级比width高，但是比max-width和min-weight优先级低
比如，当flex-basis的值为100px时，width的值为110px，此时子项目的实际宽度为100px；
比如，当flex-basis的值为110px时，max-width的值为100px，此时子项目的实际宽度为100px；
比如，当flex-basis的值为80px时，min-width的值为100px，此时子项目的实际宽度为100px；

上述三个元素称为桃园三兄弟，可以用一条 flex:flex-shrink flex-grow flex-basis；来代替，其中flex-grow和flex-basis可以省略。

• align-self 定义单个flex元素在交叉轴上的对齐方式。