彈性盒模型
image
對于某個元素只要聲明了 display:flex;盏档，那么這個元素就成為了彈性容器，具有flex彈性布局的特性燥爷。
- 每個彈性容器都有兩根軸：主軸和交叉軸蜈亩，兩軸之間成90°。注意：水平的不一定就是主軸前翎。
- 每根軸都有起點和終點稚配，這對于元素的對齊非常重要。
- 彈性容器中的所有子元素稱為
彈性元素港华，彈性元素永遠沿主軸排序道川。 - 彈性元素也可以通過
display:flex;設(shè)置為另一個彈性容器，形成嵌套關(guān)系立宜。因此一個元素既可以是彈性容器也可以是彈性元素冒萄。
實踐是檢驗真理的唯一標準
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
