<div v
-show="imgPanelVisible"
style="flex: 1 0 auto;height: 238px;color: #fff;padding: 10px 10px 0px 10px;background
-color:#206e3c;isolation: isolate;display: flex;flex
-direction: column;text
-align: center;font
-size: 12px;">
<div style="flex: 1 0 auto;display: flex;flex
-direction: row;
justify-content: flex
-start;">
<div class="num0"
style="flex: 0 0 auto;display: flex;flex
-direction: column;
justify-content: center;width: 28px;border: 1px solid #fff;border
-right: 0px;position: relative;clip
-path: polygon(60% 0, 100% 0, 100% 100%, 60% 100%, 0% 50%);background
-color: #fff;">
<div style="margin
-right:
-8px;">0</div>
</div>
<div style="flex: 1;display: flex;flex
-direction: column;">
<div
style="flex: 1;border: 1px solid #fff;border
-right: 0px;border
-bottom: 0px;display: flex;
align-items: center;
justify-content: center;background
-color:#d81616;">
3</div>
<div
style="flex: 1;border: 1px solid #fff;border
-right: 0px;border
-bottom: 0px;display: flex;
align-items: center;
justify-content: center;background
-color: #2b2b2b;">
2</div>
<div
style="flex: 1;border: 1px solid #fff;border
-right: 0px;display: flex;
align-items: center;
justify-content: center;background
-color:#d81616;">
1</div>
</div>
<div style="flex: 1;display: flex;flex
-direction: column;">
<div
style="flex: 1 0 auto;border: 1px solid #fff;border
-right: 0px;border
-bottom: 0px;display: flex;
align-items: center;
justify-content: center;background
-color: #2b2b2b;">
6</div>
<div
style="flex: 1 0 auto;border: 1px solid #fff;border
-right: 0px;border
-bottom: 0px;display: flex;
align-items: center;
justify-content: center;background
-color:#d81616;">
5</div>
<div
style="flex: 1 0 auto;border: 1px solid #fff;border
-right: 0px;display: flex;
align-items: center;
justify-content: center;background
-color: #2b2b2b;">
4</div>
</div>
<div style="flex: 1;display: flex;flex
-direction: column;">
<div
style="flex: 1 0 auto;border: 1px solid #fff;border
-right: 0px;border
-bottom: 0px;display: flex;
align-items: center;
justify-content: center;background
-color:#d81616;">
9</div>
<div
style="flex: 1 0 auto;border: 1px solid #fff;border
-right: 0px;border
-bottom: 0px;display: flex;
align-items: center;
justify-content: center;background
-color: #2b2b2b;">
8</div>
<div
style="flex: 1 0 auto;border: 1px solid #fff;border
-right: 0px;display: flex;
align-items: center;
justify-content: center;background
-color:#d81616;">
7</div>
</div>
<div style="flex: 1;display: flex;flex
-direction: column;">
<div
style="flex: 1 0 auto;border: 1px solid #fff;border
-right: 0px;border
-bottom: 0px;display: flex;
align-items: center;
justify-content: center;background
-color:#d81616;">
12</div>
<div
style="flex: 1 0 auto;border: 1px solid #fff;border
-right: 0px;border
-bottom: 0px;display: flex;
align-items: center;
justify-content: center;background
-color: #2b2b2b;">
11</div>
<div
style="flex: 1 0 auto;border: 1px solid #fff;border
-right: 0px;display: flex;
align-items: center;
justify-content: center;background
-color: #2b2b2b;">
10</div>
</div>
<div style="flex: 1;display: flex;flex
-direction: column;">
<div
style="flex: 1 0 auto;border: 1px solid #fff;border
-right: 0px;border
-bottom: 0px;display: flex;
align-items: center;
justify-content: center;background
-color: #2b2b2b;">
15</div>
<div
style="flex: 1 0 auto;border: 1px solid #fff;border
-right: 0px;border
-bottom: 0px;display: flex;
align-items: center;
justify-content: center;background
-color:#d81616;">
14</div>
<div
style="flex: 1 0 auto;border: 1px solid #fff;border
-right: 0px;display: flex;
align-items: center;
justify-content: center;background
-color: #2b2b2b;">
13</div>
</div>
<div style="flex: 1;display: flex;flex
-direction: column;">
<div
style="flex: 1 0 auto;border: 1px solid #fff;border
-right: 0px;border
-bottom: 0px;display: flex;
align-items: center;
justify-content: center;background
-color:#d81616;">
18</div>
<div
style="flex: 1 0 auto;border: 1px solid #fff;border
-right: 0px;border
-bottom: 0px;display: flex;
align-items: center;
justify-content: center;background
-color: #2b2b2b;">
17</div>
<div
style="flex: 1 0 auto;border: 1px solid #fff;border
-right: 0px;display: flex;
align-items: center;
justify-content: center;background
-color:#d81616;">
16</div>
</div>
<div style="flex: 1;display: flex;flex
-direction: column;">
<div
style="flex: 1 0 auto;border: 1px solid #fff;border
-right: 0px;border
-bottom: 0px;display: flex;
align-items: center;
justify-content: center;background
-color:#d81616;">
21</div>
<div
style="flex: 1 0 auto;border: 1px solid #fff;border
-right: 0px;border
-bottom: 0px;display: flex;
align-items: center;
justify-content: center;background
-color: #2b2b2b;">
20</div>
<div
style="flex: 1 0 auto;border: 1px solid #fff;border
-right: 0px;display: flex;
align-items: center;
justify-content: center;background
-color:#d81616;">
19</div>
</div>
<div style="flex: 1;display: flex;flex
-direction: column;">
<div
style="flex: 1 0 auto;border: 1px solid #fff;border
-right: 0px;border
-bottom: 0px;display: flex;
align-items: center;
justify-content: center;background
-color: #2b2b2b;">
24</div>
<div
style="flex: 1 0 auto;border: 1px solid #fff;border
-right: 0px;border
-bottom: 0px;display: flex;
align-items: center;
justify-content: center;background
-color:#d81616;">
23</div>
<div
style="flex: 1 0 auto;border: 1px solid #fff;border
-right: 0px;display: flex;
align-items: center;
justify-content: center;background
-color: #2b2b2b;">
22</div>
</div>
<div style="flex: 1;display: flex;flex
-direction: column;">
<div
style="flex: 1 0 auto;border: 1px solid #fff;border
-right: 0px;border
-bottom: 0px;display: flex;
align-items: center;
justify-content: center;background
-color:#d81616;">
27</div>
<div
style="flex: 1 0 auto;border: 1px solid #fff;border
-right: 0px;border
-bottom: 0px;display: flex;
align-items: center;
justify-content: center;background
-color: #2b2b2b;">
26</div>
<div
style="flex: 1 0 auto;border: 1px solid #fff;border
-right: 0px;display: flex;
align-items: center;
justify-content: center;background
-color:#d81616;">
25</div>
</div>
<div style="flex: 1;display: flex;flex
-direction: column;">
<div
style="flex: 1 0 auto;border: 1px solid #fff;border
-right: 0px;border
-bottom: 0px;display: flex;
align-items: center;
justify-content: center;background
-color:#d81616;">
30</div>
<div
style="flex: 1 0 auto;border: 1px solid #fff;border
-right: 0px;border
-bottom: 0px;display: flex;
align-items: center;
justify-content: center;background
-color: #2b2b2b;">
29</div>
<div
style="flex: 1 0 auto;border: 1px solid #fff;border
-right: 0px;display: flex;
align-items: center;
justify-content: center;background
-color: #2b2b2b;">
28</div>
</div>
<div style="flex: 1;display: flex;flex
-direction: column;">
<div
style="flex: 1 0 auto;border: 1px solid #fff;border
-right: 0px;border
-bottom: 0px;display: flex;
align-items: center;
justify-content: center;background
-color: #2b2b2b;">
33</div>
<div
style="flex: 1 0 auto;border: 1px solid #fff;border
-right: 0px;border
-bottom: 0px;display: flex;
align-items: center;
justify-content: center;background
-color:#d81616;">
32</div>
<div
style="flex: 1 0 auto;border: 1px solid #fff;border
-right: 0px;display: flex;
align-items: center;
justify-content: center;background
-color: #2b2b2b;">
31</div>
</div>
<div style="flex: 1;display: flex;flex
-direction: column;">
<div
style="flex: 1 0 auto;border: 1px solid #fff;border
-right: 0px;border
-bottom: 0px;display: flex;
align-items: center;
justify-content: center;background
-color:#d81616;">
36</div>
<div
style="flex: 1 0 auto;border: 1px solid #fff;border
-right: 0px;border
-bottom: 0px;display: flex;
align-items: center;
justify-content: center;background
-color: #2b2b2b;">
35</div>
<div
style="flex: 1 0 auto;border: 1px solid #fff;border
-right: 0px;display: flex;
align-items: center;
justify-content: center;background
-color:#d81616;">
34</div>
</div>
<div style="flex: 0 0 23px;display: flex;flex
-direction: column;">
<div
style="flex: 1 0 auto;border: 1px solid #fff;border
-bottom: 0px;display: flex;
align-items: center;
justify-content: center;">
<span
style=" transform: rotate(270deg);transform
-origin: center;display: inline
-block;">3R</span>
</div>
<div
style="flex: 1 0 auto;border: 1px solid #fff;border
-bottom: 0px;display: flex;
align-items: center;
justify-content: center;">
<span
style=" transform: rotate(270deg);transform
-origin: center;display: inline
-block;">2R</span>
</div>
<div
style="flex: 1 0 auto;border: 1px solid #fff;display: flex;
align-items: center;
justify-content: center;">
<span
style=" transform: rotate(270deg);transform
-origin: center;display: inline
-block;">1R</span>
</div>
</div>
</div>
<div style="flex: 0 0 70px;display: flex;flex
-direction: row;">
<div style="flex:0 0 29px;"></div>
<div
style="flex: 1;border: 1px solid #fff;border
-top: 0px;border
-right: 0px;display: flex;flex
-direction: column;
justify-content: center;">
<div
style="flex: 1 0 auto;display: flex;flex
-direction: row;
align-items: center;border
-bottom: 1px solid #fff;
justify-content: center;">
<div style="border: 1px solid #fff;padding: 5px 25px;">一区</div>
</div>
<div style="flex: 0 0 30px;display: flex;flex
-direction: row;">
<div
style="flex: 1;border
-right: 1px solid #fff;display: flex;flex
-direction: row;
align-items: center;
justify-content: center;">
1
-18</div>
<div
style="flex: 1;display: flex;flex
-direction: row;
align-items: center;
justify-content: center;">
单</div>
</div>
</div>
<div
style="flex: 1;border: 1px solid #fff;border
-top: 0px;border
-right: 0px;display: flex;flex
-direction: column;
justify-content: center;">
<div
style="flex: 1 0 auto;display: flex;flex
-direction: row;
align-items: center;border
-bottom: 1px solid #fff;
justify-content: center;">
<div style="border: 1px solid #fff;padding: 5px 25px;">二区</div>
</div>
<div style="flex: 0 0 30px;display: flex;flex
-direction: row;">
<div
style="flex: 1;border
-right: 1px solid #fff;display: flex;flex
-direction: row;
align-items: center;
justify-content: center;">
<div
style="background
-color:#d81616;color: #d81616;border: 1px solid #fff;padding: 3px 13px;">
红</div>
</div>
<div
style="flex: 1;display: flex;flex
-direction: row;
align-items: center;
justify-content: center;">
<div
style="background
-color: #2b2b2b;color: #2b2b2b;border: 1px solid #fff;padding: 3px 13px;">
黑</div>
</div>
</div>
</div>
<div
style="flex: 1;border: 1px solid #fff;border
-top: 0px;display: flex;flex
-direction: column;
justify-content: center;">
<div
style="flex: 1 0 auto;display: flex;flex
-direction: row;
align-items: center;border
-bottom: 1px solid #fff;
justify-content: center;">
<div style="border: 1px solid #fff;padding: 5px 25px;">三区</div>
</div>
<div style="flex: 0 0 30px;display: flex;flex
-direction: row;">
<div
style="flex: 1;border
-right: 1px solid #fff;display: flex;flex
-direction: row;
align-items: center;
justify-content: center;">
双</div>
<div
style="flex: 1;display: flex;flex
-direction: row;
align-items: center;
justify-content: center;">
19
-36</div>
</div>
</div>
<div style="flex:0 0 22px;"></div>
</div>
<div style="flex: 0 0 60px;display: flex;flex
-direction: row;
align-items: center;">
<div
style="flex: 0 0 auto;background
-image: url(./src/assets/img/group_lp/btn_back.png);width: 35px;height: 35px;margin
-right: 3px;">
</div>
<div
style="flex: 0 0 auto;background
-image: url(./src/assets/img/group_lp/btn_clear.png);width: 35px;height: 35px;margin
-right: 3px;">
</div>
<div
style="flex: 0 0 auto;background
-image: url(./src/assets/img/group_lp/btn_x2.png);width: 35px;height: 35px;margin
-right: 3px;">
</div>
<div style="flex: 1 1 auto;"></div>
<div
style="flex: 0 0 auto;background
-image: url(./src/assets/img/group_lp/btn_chip.png);width: 35px;height: 35px;margin
-right: 8px;display: flex;flex
-direction: row;
align-items: center;
justify-content: center;">
10</div>
<div
style="flex: 0 0 auto;background
-image: url(./src/assets/img/group_lp/btn_chip.png);width: 35px;height: 35px;margin
-right: 8px;display: flex;flex
-direction: row;
align-items: center;
justify-content: center;">
50</div>
<div
style="flex: 0 0 auto;background
-image: url(./src/assets/img/group_lp/btn_chip.png);width: 35px;height: 35px;margin
-right: 8px;display: flex;flex
-direction: row;
align-items: center;
justify-content: center;">
100</div>
<div
style="flex: 0 0 auto;background
-image: url(./src/assets/img/group_lp/btn_chip.png);width: 35px;height: 35px;display: flex;flex
-direction: row;
align-items: center;
justify-content: center;">
?</div>
<div style="flex: 1 1 auto;"></div>
<div class="iconfont"
style="flex: 0 0 auto;width: 45px;height: 35px;display: flex;flex
-direction: row;
align-items: center;
justify-content: center;border: 1px solid white;border
-radius:5px;font
-size: 23px;">
</div>
</div>
</div>
请整理这里的
css,
display: flex;flex
-direction: row;
align-items: center;
justify-content: center;不用整理
其他的整理到<style>
本文深入解析Flex布局中的justify-content和align-items属性，详细说明了不同属性值如何影响元素在容器中的排列方式，包括从左到右、从上到下、居中、间距均匀等多种布局效果。
扫一扫
5687
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
