最近在整理之前的基础知识, 看了弹性布局, 然而过几天都忘记了, 在网上看到了大佬用弹性布局写得麻将 -> 然后自己就写了一个
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>flexMajiang</title>
<link rel="stylesheet" href="./css/flexMajiang.css" type="text/css" charset="utf-8">
</head>
<body>
<ul class="MJContainer oneCone">
<li></li>
</ul>
<ul class="MJContainer twoCone">
<li></li>
<li></li>
</ul>
<ul class="MJContainer threeCone">
<li></li>
<li></li>
<li></li>
</ul>
<ul class="MJContainer fourCone">
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<ul class="MJContainer fiveCone">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<ul class="MJContainer sixCone">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<ul class="MJContainer sevenCone">
<li>
<span></span>
</li>
<li>
<span></span>
</li>
<li>
<span></span>
</li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<ul class="MJContainer eightCone">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<ul class="MJContainer nineCone">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</body>
</html>
*{
margin: 0 ; padding: 0;
box-sizing: border-box;
}
body{
display: flex; flex-flow: row nowrap;
justify-content: space-around;
margin-top: 10px;
}
ul.MJContainer{
display: flex; width: 80px;
height: 100px; list-style: none;
background: #009688; border-radius: 4px;
}
ul.MJContainer > li{
width: 20px; height: 20px;
border-radius: 50%; background: #fff;
}
ul.oneCone > li{
width: 40px; height: 40px;
}
ul.oneCone{ /* 一筒 */
justify-content: center; align-items: center;
}
ul.twoCone{/* 二筒 */
flex-direction: column;
justify-content: space-around;
align-items: center;
}
ul.threeCone{/* 三筒 */
flex-direction: column; justify-content: space-between;
padding: 5px;
}
ul.threeCone > li:nth-child(2){
align-self: center;
}
ul.threeCone > li:nth-child(3){
align-self: flex-end;
}
ul.fourCone > li{/* 四筒 */
margin: 0 10px;
}
ul.fourCone{
flex-wrap: wrap; align-items: center;
}
ul.fiveCone > li{/* 五筒 */
margin: 0 10px;
}
ul.fiveCone > li:nth-child(3){
margin: 0 30px;
}
ul.fiveCone{
flex-wrap: wrap; padding: 5px 0;
justify-content: space-around;
align-items: center;
}
ul.sixCone > li:nth-child(2n){/* 六筒 */
margin-right: 20px;
}
ul.sixCone > li:nth-child(2n + 1){
margin-left: 20px;
}
ul.sixCone > li:nth-child(3),
ul.sixCone > li:nth-child(4){
margin-top: 20px;
}
ul.sixCone{
padding: 10px 0;
flex-wrap: wrap; align-items: center;
}
ul.sevenCone > li:first-child,
ul.sevenCone > li:nth-child(2),
ul.sevenCone > li:nth-child(3){/* 七筒 */
background: transparent;
width: 100%; height: 20px;
display: flex; padding: 0 10px;
margin-top: -5px;
justify-content: flex-start;
}
ul.sevenCone > li:first-child > span,
ul.sevenCone > li:nth-child(2) > span,
ul.sevenCone > li:nth-child(3) > span{
width: 20px; border-radius: 50%;
height: 100%; background: #fff;
}
ul.sevenCone > li:nth-child(2){
justify-content: center;
}
ul.sevenCone > li:nth-child(3){
justify-content: flex-end;
}
ul.sevenCone > li:nth-child(4),
ul.sevenCone > li:nth-child(6){
margin-left: 20px;
}
ul.sevenCone > li:nth-child(5),
ul.sevenCone > li:nth-child(7){
margin-right: 20px;
}
ul.sevenCone{
flex-wrap: wrap; padding-top: 10px;
}
ul.eightCone > li:nth-child(2n){/* 八筒 */
margin-right: 20px;
}
ul.eightCone > li:nth-child(2n + 1){
margin-left: 20px;
}
ul.eightCone{
flex-wrap: wrap; padding: 10px 0;
}
ul.nineCone{
flex-wrap: wrap; padding: 5px 10px;
align-items: center;
}
发现大佬的六筒写错了 -> 七筒 用 ul 和 li 实现的
- 效果图如下:
这个例子虽然用了弹性布局 但是弹性布局的 flow flex-grow flex-shrink flex-basis 没有用到
