html5中display flex,如何使用CSS3 的弹性盒子display属性中flex与box属性

如何使用CSS3 的弹性盒子display属性中flex与box属性

发布时间：2020-07-14 14:53:39

来源：亿速云

阅读：99

作者：Leah

本篇文章给大家分享的是有关如何使用CSS3 的弹性盒子display属性中flex与box属性，小编觉得挺实用的，因此分享给大家学习，希望大家阅读完这篇文章后可以有所收获，话不多说，跟着小编一起来看看吧。

一：什么是弹性盒子

CSS3 弹性盒( Flexible Box 或 flexbox)，是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。可以用简单的方式满足很多常见的复杂的布局需求。它的优势在于开发人员只是声明布局应该具有的行为，而不需要给出具体的实现方式。浏览器会负责完成实际的布局。该布局模型在主流浏览器中都得到了支持。

二：CSS3 弹性盒子内容

弹性盒子由弹性容器(Flex container)和弹性子元素(Flex item)组成。

弹性容器通过设置 display 属性的值为 flex 或 inline-flex将其定义为弹性容器。

弹性容器内包含了一个或多个弹性子元素。

注意： 弹性容器外及弹性子元素内是正常渲染的。弹性盒子只定义了弹性子元素如何在弹性容器内布局。

三：display:box 与 display:flex的区别和用法

1. display:box  主要是控制父容器里面子元素的排列方式、排列顺序、垂直(水平)对齐方式

display:box是2009年之前的语法，已经过时，使用是