flex 布局

flex 布局原理

全称 flexible box，弹性布局。

如何开启：为元素添加 display: flex。

开启 flex 布局的元素，称为 flex 容器（flex container），其子元素成为容器成员，称为 flex 项目。

flex 布局原理：通过给父盒子添加 display: flex，来控制子盒子的位置和排列方式。

flex 布局父盒子常见属性

flex-direction

设置主轴方向

justify-content

设置主轴子元素排列方式

flex-wrap

设置子元素是否换行

默认不换行，若子盒子宽度和大于父盒子，则会收缩！

align-items

设置子元素在侧轴上的排列方式（子元素单行）

align-content

设置子元素在侧轴上的排列方式（子元素多行）

flex-flow

flex-direction 与 flex-wrap 属性的复合写法

son {
    
  flex-flow: row wrap;
}

flex 布局子盒子常见属性

flex

flex 属性其实是 flex-grow、flex-shrink、flex-basis 三个属性的简写。

flex-grow 属性值为一个数字，用于设置弹性盒子的扩展比例，即盒子占剩余空间的份数，默认为 0。常见的 flex: 1 是 flex-grow 为 1。

flex-shrink 属性值为一个数字，用于设置盒子的收缩比例，当子盒子的宽度之和大于父盒子时才会收缩。

flex-basis 用于设置子盒子的初始长度。

span {
    
  flex: 1;
}

.son {
    
  flex: 0 0 33.33%;
}

align-self

单独设置某个子盒子在侧轴的排列方式，它会覆盖 align-items 属性。默认值为 auto，表示继承父盒子的 align-items 属性，其余属性值与 align-items 相同。

order

定义子盒子在主轴上的排列顺序。默认值为 0，值越小越靠前，可以为负数。

.son {
    
  order: -3;
}