首页 > 开发 > CSS > 正文

关于flex布局的一个问题

2017-09-12 09:34:57  来源: 网友分享
<div class="box dice1">    <span></span></div><div class="box dice2">    <span></span>    <span></span></div>    * {    padding: 0;    margin: 0;}span {    display: inline-block;    width: 100px;    height: 100px;    border-radius:  50px;    background-color: #000;    margin: 10px;}.box {    display: inline-flex;    width: 360px;    height: 360px;    border: 2px solid #000;    border-radius: 15px;}.dice1 {    flex-flow: row wrap;    justify-content: center;}.dice2 {    flex-flow: row nowrap;    justify-content: space-between;    align-items: center}

问题>>>>>>>>>>怎么保证这两个骰子不变的情况下,让他们对齐,不要一个低一个高

解决方案

外面再套一层div,然后最外面这层div设定为flex

像这样:

<div class="body">  // ..</div>

css加上这么一段:

div.body {  display: flex;}