Flexbox 是一维布局方式 ，按行或按列。

它解决了元素对齐、分布和响应式的问题。

开启 flex

只需要给外层容器设置
display: flex

直接子元素就会默认按行模式进行排列
flex-direction: row;

轴

在行模式下，有一条水平方向的主轴和一条垂直方向 的交叉轴。子元素会从 flexbox 容器左上角开始，从左到右依次排列，即主轴最左边，交叉轴最上边。

改变主轴布局

改变主轴方向 的布局合使用 justify-content 属性

• 靠右对齐
  • justify-content: flex-end;
• 居中对齐
  • justify-content: center;
• 平分空间
  • justify-content: space-evenly;
  • justify-content: space-around;

• 两端对齐

  • justify-content: space-between;

    改变交叉轴布局

    改变交叉轴方向的布局使用 align-items 属性

• 靠下对齐

  • align-item: flex-end;
• 居中对齐
  • align-item: center;

    列模式

    flex-direction: coloumn;
    在列模式下，主轴变成了交叉轴，交叉轴变成主轴，其它的设置项跟行模式一样。
    

    比例

    非固定尺寸的子元素，可能通过设置 flex 属性调整空间点比。默认为1， 平分空间，把二个元素设置成
    flex: 2;
    则会点 2 / 3 的空间。