弹性盒模型
image
对于某个元素只要声明了 display:flex;，那么这个元素就成为了弹性容器，具有flex弹性布局的特性。
- 每个弹性容器都有两根轴：主轴和交叉轴，两轴之间成90°。注意：水平的不一定就是主轴。
- 每根轴都有起点和终点，这对于元素的对齐非常重要。
- 弹性容器中的所有子元素称为
弹性元素，弹性元素永远沿主轴排序。 - 弹性元素也可以通过
display:flex;设置为另一个弹性容器，形成嵌套关系。因此一个元素既可以是弹性容器也可以是弹性元素。
实践是检验真理的唯一标准
flex.png
<style>
*{margin:0;padding:0;}
.wrap{display: flex;width:100%;height:600px;}
.left{width:200px;background:red;}
.right{flex:1;display: flex;flex-direction: column;}
.top{height:100px;background: black;}
.cont{flex:1;background: orange;display: flex;justify-content: flex-end;}
.content{flex: 1;background: blue;display:flex;justify-content:center;align-items:center;}
.sider{width:200px;background: green;}
.center{width:200px;height:200px;background: purple;}
</style>
</head>
<body>
<div class="wrap">
<div class="left"></div>
<div class="right">
<div class="top"></div>
<div class="cont">
<div class="content">
<div class="center"></div>
</div>
<div class="sider"></div>
</div>
</div>
</div>
</body>
下面是一个小练习
骰子.png
可以在下面的地址练习一下
https://codepen.io/haolucky/pen/MRWbyX
网友评论