css中的弹性布局是什么意思

发布时间：2020-11-17 10:23:59 作者：小新
来源：亿速云阅读：271

小编给大家分享一下css中的弹性布局是什么意思，希望大家阅读完这篇文章后大所收获，下面让我们一起去探讨吧！

css中的弹性布局是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。引入弹性布局模型的目的是提供一种更有效的方式来对一个容器的子元素进行排列、对齐和分配空白空间。

弹性布局介绍：

弹性盒子是 CSS3 的一种新的布局模式。

CSS3 弹性盒（ Flexible Box 或 flexbox），是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。

引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。

弹性盒子内容：

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

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

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

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

弹性子元素通常在弹性盒子内一行显示。默认情况每个容器只有一行。

以下元素展示了弹性子元素在一行内显示，从左到右

<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
    display: -webkit-flex;    
    display: flex;    
    width: 400px;    
    height: 250px;    
    background-color: lightgrey;}
 .flex-item {
    background-color: cornflowerblue;    
    width: 100px;    
    height: 100px;    
    margin: 10px;}
</style>
</head>
<body>
 <div class="flex-container">
  <div class="flex-item">flex item 1</div>
  <div class="flex-item">flex item 2</div>
  <div class="flex-item">flex item 3</div> </div>
 </body>
</html>

看完了这篇文章，相信你对css中的弹性布局是什么意思有了一定的了解，想了解更多相关知识，欢迎关注亿速云行业资讯频道，感谢各位的阅读！

css中的弹性布局是什么意思

相关阅读