如何实现flex弹性布局的详细步骤解析？

本文共计1698个文字，预计阅读时间需要7分钟。

还在使用 float / position 来布局元素？你的页面布局是否已经过时了呢？试试使用 flex 弹性布局吧！它有多香、优点有哪些？

优点：- 代码简洁易读，使用方便；- 很大程度上替代了 float 和 position；- 适用于各种布局场景，如水平、垂直、多列布局等。

直接输出结果：还在使用 float / position 来布局元素？试试使用 flex 弹性布局吧！它有多香、优点有哪些？优点：代码简洁易读，使用方便；很大程度上替代了 float 和 position；适用于各种布局场景，如水平、垂直、多列布局等。

还在使用 float / position 一个像素一个像素地去布局你的页面吗？？使用flex弹性布局多香 一、弹性布局的优缺点

优点：

• 代码简洁易懂，使用方面；
• 很大程度上替代了 float 、position的复杂布局，特别是元素的水平和垂直居中，不用一个像素一个像素地调；
• 是页面布局快速达到自己想要的效果。

缺点：

• 浏览器兼容性比较差，版本低一点的浏览器可能实现不了自己想要的布局效果。

二、关于flex

1、什么是flex：flex 是 Flexible Box 的缩写，意为”弹性布局”。

2、flex的作用：flex 属性用于设置或检索弹性盒模型对象的子元素如何分配空间。

三、如何使用flex

1、使用flex布局只需要在最外层容器设置 display:flex; 即可。

2、我们可以将整个网页看成一个flex容器。

3、采用flex布局称为flex容器，所有子容器自动生成容器成员称为flex项目。

四、容器属性

1. justify-content 属性：用于设置或检索弹性盒子元素在主轴（横轴，X轴）方向上的对齐方式。