弹性布局flex

Posted 2021-10-05 forceddd

弹性布局通过display:flex/inline-flex开启。开启之后，当前元素为容器元素，它的直接子元素为项目元素。
容器元素有六个属性：
flex-direction/flex-wrap/flex-flow/justify-content/align-items/align-content

1. flex-direction：row/row-reverse/column/column-reverse,控制主轴方向
2. flex-wrap :nowrap/wrap/wrap-reverse,控制是否换行
3. flex-flow ：direction和wrap的合写形式，默认值为 row nowrap
4. justify-content:项目在主轴上的对齐方式
5. align-items：项目在交叉轴上的对齐方式
6. align-content：多根轴线的对齐方式，如果只有一根轴线，则不起作用

项目元素也有六个属性:
order/flex-grow/flex-shrink/flex-basis/flex/align-self

1. order:项目的排列顺序，数值越小越靠前，默认为0
2. flex-grow:项目的放大比例，默认为0，代表即使有剩余空间，也不放大
3. flex-shrink:项目的缩小比例，默认为1，代表如果空间不足，会缩小
4. flex-basis:在分配剩余空间之前，项目占据的主轴空间，默认为auto，代表项目本身大小。
5. flex:grow shrink basis 的合写形式，默认为 0 1 auto
6. align-self:项目自身的对齐方式，可以使这个项目和其他的项目对齐方式不同。