CSS3 伸缩盒子布局

伸缩布局

传统布局和伸缩布局

• 布局的传统解决方案，基于盒装模型，依赖display属性+position属性+float属性
• 对于特殊布局非常不便
• 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垂直方向排列，从下至上

• flex-grow:可以来扩展子元素的宽度

  • 对子元素进行设置
  • flex-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 = flex-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
    

• 最后献上我用伸缩盒子做的新语义化元素的结构图

• 改变big盒子大小里面的子元素会等比例缩小和变大
  

    <div class="big">
        <header>header</header>
        <nav>nav</nav>
        <div class="small">
            <article>article
                <section>section</section>
            </article>
            <aside>aside</aside>
        </div>
        <footer>footer</footer>
    </div>

.big {
    margin-left: 300px;
    width: 500px;
    height: 500px;
    display: flex;
    flex-direction: column; 
    border: 1px solid black;
    text-align: center;
    font-size: 2em;
}
header {
    background-color: red;
    width: 100%;
    flex: 1;
}
nav{
    background-color: yellow;
    width: 100%;
    flex: 1;
}
.small {
    flex: 2;
    display: flex;
}
article {
    background-color: blue;
    height: 100%;
    flex: 3;
    display: flex;
    align-items: center;
    justify-content: center;
}
section {
    background-color: pink;
    width: 50%;
    height: 50%;
}
aside{
    background-color: green;
    height: 100%;
    flex: 2;
}
footer{
    width: 100%;
    background-color: #008484; 
    flex: 1;
}

• 本人新学菜鸟一名，以上纯属我学习成果，不足之处请大家多多指教！