CSS—弹性盒子布局（一看就懂）

一、布局之间的关系

• 默认布局：块元素上下排列，行内元素一行从左到右排列
• 浮动布局：可以将元素一行排列，设置元素靠左和靠右排列
• 定位布局：可以将元素放到指定的位置

总结

• 每种布局方式都有优点和缺点
• 几种布局方式之间不是互相取代的关系，而是互相配合，互相辅佐
• 几种布局方式之间，存在重复的地方，比如将两个元素一个靠左，一个靠右，使用浮动和定位都可以实现

二、flex 布局

2.1 flex 布局是什么

• 说明

  • flex 是 Flexible Box 的缩写，意思是"弹性布局"，用来为盒状模型提供最大的灵活性。
  • 任何一个容器都可以指定为 flex 布局。

• 注意

  • Webkit 内核的浏览器，必须加上-webkit前缀。

    .box {
           
        display: -webkit-flex;
    }
    

  • 设置为 flex 布局以后，子元素的 float、clear 和 vertical-align 属性都将失效。

2.2 基本概念

• 说明
  • 采用 flex 布局的元素，称为 flex容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为 flex 项目（flex item），简称"项目"。
  • 容器默认存在两根轴：水平的主轴和垂直的交叉轴。
    • 主轴又分主轴的开始位置和结束位置
    • 交叉轴同样也分开始位置和结束位置
  • 项目默认沿着主轴排列

看下图展示

2.3 容器的属性

2.3.1 flex-direction属性

• 说明

  • flex-dirction属性决定主轴的方向（即项目的排列方向）

• 属性值

  • row：默认值，主轴为水平方向，起点在左端

    

  • row-reverse：主轴为水平方向，起点在右端

    

  • column：主轴为垂直方向，起点在顶部

    

  • column-reverse：主轴为垂直方向，起点在底部

    

• 语法

  .box {
       
      flex-direction: row | row-reverse | column | column-reverse;
  }
  

2.3.2 flex-wrap属性

• 说明

  • 默认情况下，项目都排在一条线（轴线）上
  • flex-wrap 属性用来设置换行

• 属性值

  • nowrap：默认值，不换行。

    

  • wrap：换行，第一行在上方。

    

  • wrap-reverse：换行，第一行在下方。

    

2.3.3 flex-flow 属性

• 说明
  • flex-flow 属性是 flex-direction 和 flex-wrap 属性的复合(结合)属性。
  • 可以使用 flex-direction 的属性值
  • 也可以使用 flex-wrap 的属性值
  • 没有顺序
  • 默认值是 row nowrap

2.3.4 justify-content 属性

• 说明

  • 用来定义项目在主轴上的对齐方式

• 属性值

  • flex-start：默认值，左对齐

    

  • flex-end：右对齐

    

  • center：居中

    

  • space-between：两端对齐，项目之间的间隔都相等

    

  • space-around：每个项目两侧的间隔相等，所以，项目之间的间隔比项目与边框的间隔大一倍。

    

  • space-evenly：分散对齐

    

2.3.5 align-items属性

• 说明

  • 用来定义项目在交叉轴上如何对齐

• 属性值

  • stretch：默认值，如果项目没有设置高度或设为 auto，将占满整个容器的高度