弹性盒子

---

title: 弹性盒子
date: 2018-08-18 16:21:25
tags: 移动端

弹性盒子基础的属性

display: flex
不管是什么元素都可以添加flex变成弹性盒子
弹性盒子内部的项目直接会变成可设置宽高等属性的元素
容器内部元素默认的按照主轴进行排列

给一个元素添加该属性，则这个元素就会变成弹性盒子模式  
  如果给元素添加了flex，那么flex内部的元素会自动横向排列
容器
  flex-direction
    column  将主轴切换为纵轴 flex-start在上  flex-end在下
    column-reverse  将主轴切换为纵轴 flex-start在下  flex-end在上
    row  默认值 从左到右横向排列
    row-reverse  flex-start在有  flex-end在左
      不管是主副轴，排列都是从flex-start 到 flex-end排列的
  flex-wrap
    默认弹性盒子的项目是不会换行的，如果想要换行则添加flex-wrap
    no-wrap   不换行  默认值
    wrap  正常换行
      从副轴的start开始，往下换行
    wrap-reverse  反向换行
      从福州的end开始，往上换行
      
  flex-flow
    是flex-direction 和 flex-wrap的复合属性
    就是上面两个属性的属性值，中间加空格
  justify-content 控制了所有项目在主轴上的排列方式
    flex-start 默认值 容器中项目全部在左边排列
    flex-end 容器中项目紧贴右边
    center 居中
    space-between  左右两边贴边，中间间距等分，类似text-align:justify
    space-around 项目两端距离相等
      设置了项目左右两端的距离相等
    space-evenly
      将剩余空间等分，将项目间距设置成相同的距离
  align-items
    stretch 默认值，元素在主轴上占百分百的空间
    flex-start  
      项目在副轴上的排列位置 设置为flex-start
    flex-end
    center

  align-content 
    仅仅适用于换行时，表示多行在副轴上的排列方式
    stretch 默认值，如果没有高度，则将总高除以行数平分给每一行
    flex-start
    flex-end
    center
    space-between
    space-around
    space-evenly
  
项目
  align-self
    可以单独给某个项目设置其在副轴上的位置
  flex-grow
    如果有剩余空间，是否自动放大
    默认值为0
    最后所占宽度 = 默认宽度 + （剩余空间 / 总grow）* 对应元素grow
  flex-shrink
    如果空间不够，是否自动缩小
    默认值为1
    最后所占空间 = 默认宽度 - （压缩空间 / 总shrink） * 对应的元素shrink
  flex-basis
    表示元素在主轴上的所占的空间大小
    主轴为横轴，表示宽 主轴为纵轴，表示高
    默认值为 auto 跟宽或高

  flex
    三个的复合属性
    flex的默认值为 0 1 auto

    可以只写一个值或两个值
    flex: 1    
      flex-grow: 1
      flex-shrink: 1 默认值，不是因为上面设置为1才是1
      flex-basis: auto
    flex: 1 0;

    flex: 0
  order
    进行项目排序
    order默认为0  当所有元素的order都相同时，则按照HTML结构排列
    设置order值越小则越靠前，越大越靠后