CSS3 伸缩盒子布局

伸缩布局

传统布局和伸缩布局

• 布局的传统解决方案，基于盒装模型，依赖dispaly属性+position属性+flot属性
• 对于特殊布局非常不便
• CSS3在布局方面做了非常大的改进
• 使得我们对块级元素的布局排列变得十分灵活，适宜性非常强
• 其强大的伸缩性，在响应式开发中发挥极大的作用

重要属性

• display: flex;
• 给父元素设置了这个属性，其子元素都会自动的变成伸缩项(flex item)

justify-content

• justify-content
• 设置或检索弹性盒子元素在主轴(默认横轴)方向上的对其方式
• 语法：
  • flex-start弹性盒子元素向行起始位置对齐
  • flex-end弹性盒子元素向行结束位置对齐
  • center弹性盒子元素向行中间位置对齐
  • space-between左右对其父容器的开始和结束，中间平均分页，产生相同的间距
  • space-around将多余的空间平均的分页在每一个子元素的两边
    • 类似于magin: 0 auto;
    • 造成中间盒子的间距时左右两边盒子间距的两倍
• 代码演示
  • 首先创建一个父容器包裹四个子容器

  <div class="father"> 
      <div class="one"></div>
      <div class="two"></div>
      <div class="three"></div>
      <div class="four"></div>
  </div>

  • 父元素设置

  .father {
  width: 900px;
  height: 200px;
  border: 1px solid red;
  box-sizing: border-box;
  }

  • 子元素宽高200px，颜色各不相同
    
  • 然后给父元素添加属性display: flex;
  • 下面是各种情况下的盒子排列

  

  

  

  

  

  

• 当子元素宽度和大于父容器宽度的时候，子元素会自动的平均收缩
  • 将父元素高度设置为600px
  • 在添加第五个盒子
    
  • 第五个盒子并没有挤下来，每个盒子都一样大
    
  • (900-2) / 5 = 179.6px
  • 每个元素都在平均收缩，但可能并不是我们想要的结果

flex-flow

• flex-flow:=flex-wrap: + flex-direction:
  • 简写属性
• flex-wrap:控制子元素是否换行显示，默认不换行
  • nowrap不换行，仍然收缩显示
  • wrap换行
    
  • wrap-reverse翻转(不常用)
    
• flex-direction:设置子元素的排列方向
  • 就是用来设置主轴(默认横轴)方向
    • 默认主轴方向是row
      
    • 我们来试一下
      
  • 值
    • row水平方向排列，从左至右
    • row-reverse水平方向排列，从右至左
    • column垂直方向排列，从下至上
    • column-reverse垂直方向排列，从上至下
• flow-grow:可以来扩展子元素的宽度
  • 对子元素进行设置
  • flow-grow:的默认值为0:说明子元素不会去占据剩余的空间
  • 具体是用来设置当前元素占据剩余空间的比例值
  • 比例值计算 : (当前空间的flex-grow)/(所有兄弟元素的flex-grow的和)
• 代码演示
  • 去掉4，5两个盒子
    
  • 给盒子1添加属性flex-grow:1
    
  • 盒子1吸收掉了所有的剩余空间
  • 给盒子1，2，3都添加属性flex-grow:1
    
  • 三个盒子均等分了剩余空间

flex-shrink

• flex-shrink定于收缩比例，通过设置的值来计算收缩空间
  • 默认值为1
  • 值为1时，将不去承担收缩比例
  • 具体是用来设置当前元素收缩的比例值
  • 比例值计算:(当前元素的flex-shrink)/(所有兄弟元素的flex-shrink的和)
• 代码演示
  • 我们将父元素宽度改为500px
    
  • 现在每个盒子都只有166px大小了
  • 我们将盒子1设置属性flex-shrink:1
  • 盒子并无变化，因为其默认值本来就是1
  • 现在我们将盒子1设置属性flex-shrink:2
    
  • 盒子1变成了149px大小
    
  • 盒子2，3变成了174.5px
  • 盒子1收缩程度占据了两份，盒子2，3收缩程度占据了一份
  • 现在我们将3个盒子属性都设置为flex-shrink:0
    
  • 页面发生了伪溢出(谨慎设置)

flex

• flex = flow-grow + flex-shrink + flex-basis
  • 简写属性
  • 默认值为 0 1 auto
  • 后两个属性为可选属性
  • flex一般是用来设置伸缩子项占据剩余空间的比例值(常用)

align-items

• align-items是设置子元素(伸缩项)在侧轴方向上的对齐方式
  • 父元素设置的属性
  • center 设置在侧轴方向上居中对齐
  • flex-start 设置在侧轴方向上顶对齐
  • flex-end 设置在侧轴方向上底对齐
  • stretch 拉伸
    • 让子元素在侧轴方向上进行拉伸，填充满整个侧轴方向，
    • 注意盒子不要有高度值
  • baseline文本基线

• align-self设置单个元素在侧轴上的对齐方式

• 代码演示
  • 我们还是保留三个盒子，并将父元素宽度改为900px
    
  • 父元素设置属性align-items:center
    
  • 父元素设置属性align-items:flex-start
    
  • 父元素设置属性align-items:flex-end
    
  • 父元素设置属性align-items:stretch,注意这里要把子元素的高度属性移除掉
    
  • 这里给三个盒子添加文字大小不一的文本
    
  • 父元素设置属性align-items:baseline
    
  • 接下来给单个元素设置属性
  • 给盒子1设置属性align-self:center