前端工程师需要知道的布局方法 flex 盒子模型

从最初的块级元素div 布局，到 float 布局，position 布局，你更需要知道一个更好的布局方式：flex 布局

工具/原料

编辑器：vscode

html

css

1. 弹性容器 与 弹性子元素 概念

1、弹性容器：对一个元素设置为display：flex，它就会被定义为一个弹性容器弹性子元素：被定义为弹性容器的元素下的 一级子元素，也叫做弹性项目。弹性容器内包含了 一个 或 多个 弹性子元素。

2.弹性容器 与 弹性子元素 的属性

1、弹性容器：使用display：flex 使得父元素变成弹性元素，这个display：酆璁冻嘌flex 就是弹性元素的一个属性，除了这个之外还有其他的属性，// display 指定 HTML 元素盒子类型。指定元素为容器// flex-direction 指定了弹性容器中子元素的排列方式// justify-content 设置弹性盒子元素在主轴（横轴）方向上的对齐方式。// align-items 设置弹性盒子元素在侧轴（纵轴）方向上的对齐方式。// flex-wrap 设置弹性盒子的子元素超出父容器时是否换行。// align-content 修改 flex-wrap 属性的行为，类似 align-items, 但不是设置子元素对齐，而是设置行对齐// flex-flow flex-direction 和 flex-wrap 的简写弹性子元素：// order 设置弹性盒子的子元素排列顺序。// align-self 在弹性子元素上使用。覆盖容器的 align-items 属性。// flex 设置弹性盒子的子元素如何分配空间。

3.flex-direction 弹性方向

1、flex-direction 指的是弹性方向，子容器 在 父容器 排列方式，row：为横向弹性，也就是水平方向上的弹性row-reverse：横向方向弹性column：为纵向弹性，也就数竖直方向上弹性column-reverse：纵向反向弹性

4.justify-content

1、justify-content 子元素在弹性方向上的对齐方式justify-content:flex-start，默认值。头部对齐just足毂忍珩ify-content:flex-end，尾部对齐justify-content:center，居中对齐justify-content:space-between，项目位于各行之间留有空白的容器内。|justify-content:space-around，项目位于各行之前、之间、之后都留有空白的容器内。|

5.align-items

1、al坡纠课柩ign-items 子容器 在 父容器 垂直弹性方向上的对齐方式align-items:stretch，默认值。垌桠咛虞元素被拉伸以适应容器。align-items:center，居中对齐align-items:flex-start，头部对齐align-items:flex-end，尾部对齐align-items:baseline，基线对齐