display:flex是CSS3中的一种布局方式，它可以让元素以弹性盒子模型的方式进行排列，从而实现灵活的布局效果。该属性可以应用于任意元素，使其成为一个弹性容器，内部的子元素则根据弹性容器的排列规则进行布局。使用display:flex属性时，弹性容器的子元素会默认成为弹性项目，它们可以通过设置flex属性来控制它们在弹性容器内的占比。flex属性是一个复合属性，包括三个子属性：flex-grow、flex-shrink、flex-basis，分别用于控制弹性项目的伸缩性、收缩性和基准宽度。除了控制弹性项目的伸缩性，display:flex还可以通过设置justify-content和align-items属性来控制弹性容器内的子元素的对齐方式。其中，justify-content属性用于控制弹性项目在主轴方向上的对齐方式，而align-items属性则用于控制弹性项目在交叉轴方向上的对齐方式。另外，display:flex还支持一些其他属性，如flex-wrap、flex-direction和align-content等，它们可以进一步扩展弹性容器的排列方式和对齐方式。例如，flex-wrap属性可以控制弹性项目是否换行，flex-direction属性可以控制弹性容器内弹性项目的排列方向，而align-content属性可以控制多行弹性项目的对齐方式。总的来说，display:flex是一种非常灵活且强大的布局方式，它可以帮助开发者实现各种复杂的布局效果。不过需要注意的是，由于display:flex是CSS3中的新属性，因此在一些老旧的浏览器中可能不被支持，需要使用兼容性处理来确保页面的正常展示。
标签：容器,flex,弹性,对齐,display,属性 From： https://www.cnblogs.com/dadaya123/p/17444540.html