Flex弹性盒子常用的6个属性

1.Flex弹性盒子:容器常用三个属性

• Flex-flow.这个属性一共有两个参数.
  • 第一个参数为：row(容器中的项目水平展示)或column(容器中的项目垂直展示).
  • 第二个参数为：nowrap(容器中的项目不可换行)或wrap(容器中的项目可以换行).
  • 根据以上解释,我们可以理解成Flex-flow主要是用以控制主轴方向（比如水平显示还是垂直显示）和是否允许换行的.
• Place-content.这个属性主要是用来将容器中剩余空间分配给项目的.那么一共有两个方案.
  • 第一个方案为：将项目视为一个整体,将剩余空间按照主轴方向进行统一的分配.
    • place-content:start | 将剩余空间全部堆积在右边.
    • place-content:end | 将剩余空间全部堆积在左边.
    • place-content:center | 将项目居中,且剩余空间均匀分配在项目左右两边.
    • 由于是按照主轴方向统一进行分配,所以左边为起始边：start,右边为终止边：end.
  • 第二个方案为：将项目视为一个独立的个体,将剩余空间在项目之间进行分配.
    • space-between | 在除了第一个和第二个项目中的其他项目的左右两边分配剩余的空间.叫两端对齐.
    • space-around | 将剩余空间分配给每一个项目的左右两边,但除了第一个和最后一个项目左右两边间距是一样的,中间项目的间距是第一个和最后一个项目左右两边间距的两倍.叫分散对齐.
    • space-evenly | 将剩余空间平均分配给每一个项目的左右两边.叫平均对齐.
• Place-items.这个属性是控制项目在交叉轴上的对齐.
  • place-items: stretch | 上下自动伸展.
  • place-items: start | 上对齐.
  • place-items: end | 下对齐.

    2.Flex弹性盒子:容器中项目常用三个属性

• Flex.这个属性有三个参数.
  • 第一个参数为：放大因子 第二个参数为：缩小因子 第三个参数为：计算宽度.
  • 默认值为：flex:0 1 aotu.默认值可以简写为：flex:initial
    • 0代表禁止 1代表允许 aotu代表自动计算宽度,auto的值引入的是项目的宽度.
    • 宽度也有优先级：min-width > flex.width > 项目.width
  • 完全响应式：flex:1 1 aotu.可简写为：flex:auto
  • PC布局(完全禁止响应式):flex:0 0 auto.简写为：flex:none
• order.这个属性可以改变项目在容器中的排列顺序.
  • order值越小越靠前,并且支持负数.
  • order默认值为：0
• Place-self.这个属性可以控制某一个项目在交叉轴上的对齐.
  • place-self: start | 控制某一项目上对齐.
  • place-self: end | 控制某一项目下对齐.