前言
Flex是Flexible Box的缩写,意为”弹性布局”,用来为盒状模型提供最大的灵活性。布局的传统解决方案,基于盒状模型,依赖 display属性 + position属性 + float属性。它对于那些特殊布局非常不方便,比如,垂直居中就不容易实现。
2009年,W3C提出了一种新的方案—-Flex布局,可以简便、完整、响应式地实现各种页面布局。目前,它已经得到了所有浏览器的支持,这意味着,现在就能很安全地使用这项功能。
原理
通过给父盒子添加flex属性,来控制子盒子的位置和排列方式
采用flex布局的元素,称为flex容器,简称容器。他的所有子元素自动成为容器成员,称为flex项目,简称项目
<style>
div {
display: flex;
width: 80%;
height: 300px;
background-color: pink;
justify-content: space-around;
}
div span {
width: 150px;
height: 100px;
background-color: rgb(212, 192, 255);
margin-right: 5px;
flex: 1;
}
</style>
<body>
<div>
<span>1</span>
<span>2</span>
<span>3