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

发布时间：2020-07-14 14:53:39 作者：Leah
来源：亿速云阅读：232

本篇文章给大家分享的是有关如何使用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年之前的语法，已经过时，使用是需要加上对应前缀的。

所以兼容性的代码，大致如下

display: -webkit-box; /* Chrome 4+, Safari 3.1, iOS Safari 3.2+ */
    display: -moz-box; /* Firefox 17- */
    display: -webkit-flex; /* Chrome 21+, Safari 6.1+, iOS Safari 7+, Opera 15/16 */
    display: -moz-flex; /* Firefox 18+ */
    display: -ms-flexbox; /* IE 10 */
    display: flex;

举个例子：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>弹性盒子--display: box;</title>
		<style>
			.box {
				width: 330px;
				height: 400px;
				border: 1px #000 solid;
				margin: 0 auto;
				display: -webkit-box;
				display: -moz-box;
				display: -ms-flexbox;
				display: -o-box;
				display: box;
				}
				
				.box p {
				width: 100px;
				height: 20px;
				background: #000;
				margin: 5px;
			}
		</style>
	</head>
	<body>
		<div class="box">
			<p>123</p>
			<p>123</p>
			<p>123</p>
		</div>
	</body>
</html>

效果图：

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

给父元素声明一个display:box伸缩盒属性后，就代表是把整个盒子里的块元素都变成了内联元素，然后这个父元素里面的子元素就可以自由分配空间了，而不会每个块元素各占一行，而是协商共同排在一行上面。如上面例子中div里面的3个p标签会在一行展示，而不是上下层级分配。

二：display:flex 主要让子容器针对父容器的宽度按一定规则进行划分

display:flex;是2011年之后出现的，也将是以后标准的语法，大部分新版浏览器基本都不用使用前缀了，目前应该只有苹果浏览器需要带webkit前缀，其他都可以正常显示。

新版本设置伸缩盒的display属性如下：
display:flex;将容器盒模型作为块级弹性伸缩盒显示(新版本)
display:inline-flex;将容器盒模型作为内联级弹性伸缩盒显示(新版本)

用法：

首先flex的使用需要有一个父容器，父容器中有几个items.

父容器：container

属性：

　　 display:flex;/*flex块级，inline-flex:行内快*/

　　 justify-content:space-around;/*center:水平居中,flex-start:靠左;flex-end:靠右；space-between:两边的向两边靠，中间等分；space-around:完美的平均分配*/

　　 align-items:stretch;/*center:垂直居中、flex-start：至顶、flex-end:至底、space-between、space-around*/　　

　　 flex-direction: row;/*column从上向下的排列，column-reverse、row:从左到右，row-reverse:从右向左*/

　　 flex-wrap:wrap;/*wrap多行显示（父容器不够显示的时候，从上到下）、nowrap(当容器不够宽的时候，子元素会平分父容器的宽或者高)、wrap-reverse:从下向上*/

/*flex-flow是flex-direction、flex-wrap的缩写*/

举个例子：

<!doctype html>
<html>
 <head>
  <meta charset="UTF-8">
  <title>弹性盒子--display:flex;</title>
  <style>
    .container{
       width:600px;
       height:400px;
       border:1px solid #000;
       display:flex;/*flex块级，inline-flex:行内快*/
       justify-content:space-around;
       align-items:stretch;
       flex-direction: row;
       flex-wrap:wrap;
       /*flex-flow是flex-direction、flex-wrap的缩写*/
    }
    .box{
    　　width:200px;
     　 height:100px;
        border:1px solid #000;
     }
   </style>
 </head>
 <body>
     <div>
　　　　   <div>这是中间的box1</div>
        　<div>这是中间的box2</div>
　　　</div>
 </body>
</html>

效果图：

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

注意，设为Flex布局以后，子元素的 float 、 clear 和 vertical-align 属性将失效。

以上就是如何使用CSS3 的弹性盒子display属性中flex与box属性，小编相信有部分知识点可能是我们日常工作会见到或用到的。希望你能通过这篇文章学到更多知识。更多详情敬请关注亿速云行业资讯频道。

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

相关阅读