彈性盒模型
image
對于某個元素只要聲明了 display:flex;，那么這個元素就成為了彈性容器，具有flex彈性布局的特性。
- 每個彈性容器都有兩根軸：主軸和交叉軸，兩軸之間成90°。注意：水平的不一定就是主軸。
- 每根軸都有起點(diǎn)和終點(diǎn)，這對于元素的對齊非常重要。
- 彈性容器中的所有子元素稱為
彈性元素，彈性元素永遠(yuǎn)沿主軸排序。 - 彈性元素也可以通過
display:flex;設(shè)置為另一個彈性容器，形成嵌套關(guān)系。因此一個元素既可以是彈性容器也可以是彈性元素。
實(shí)踐是檢驗(yàn)真理的唯一標(biāo)準(zhǔ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>
下面是一個小練習(xí)
骰子.png
可以在下面的地址練習(xí)一下
https://codepen.io/haolucky/pen/MRWbyX
