javascript - 如何以特定方式定位元素？

Question

我有一些 html div 和简单的 css 样式，如下所示：

.wrap{
  display: flex;
  flex-direction:row;
  justify-content: space-around;
  align-items: center;
}
.child{
  width: 45px;
  height: 45px;
  border-radius: 50%;
  background-color: lightBlue;
  display:flex;
  justify-content: center;
  align-items: center;
  font-size: 20px;
}

<div class='wrap'>
  <div class='child'>
    0
  </div>
    <div class='child'>
    1
  </div>
    <div class='child'>
    2
  </div>
    <div class='child'>
    3
  </div>
    <div class='child'>
    4
  </div>
    <div class='child'>
    5
  </div>
    <div class='child'>
    6
  </div>
    <div class='child'>
    7
  </div>
    <div class='child'>
    8
  </div>
    <div class='child'>
    9
  </div>
    <div class='child'>
    10
  </div>
</div>

我想将此元素在移动设备上的位置更改为如下所示：

在此处输入图像描述

我怎样才能做到这一点？我首先想到的是 flex-wrap 和 order？

标签： javascripthtmlcss

Answer 1

你可以这样做：

.wrap {
  display: flex;
  flex-direction: row;
  flex-wrap:wrap; /* enable the wrap*/
  justify-content:center; /* center everything */
}

/* create a hidden element taking full width
   used to seperate our elements
*/
.wrap:before {
  content:"";
  flex-basis:100%;
  order:1
}
/* put all even elements after the seperation to have a new row*/
.child:nth-child(even) {
  order:2;
}

.child {
  width: 45px;
  height: 45px;
  margin:5px;
  border-radius: 50%;
  background-color: lightBlue;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 20px;
}

<div class='wrap'>
  <div class='child'>
    0
  </div>
  <div class='child'>
    1
  </div>
  <div class='child'>
    2
  </div>
  <div class='child'>
    3
  </div>
  <div class='child'>
    4
  </div>
  <div class='child'>
    5
  </div>
  <div class='child'>
    6
  </div>
  <div class='child'>
    7
  </div>
  <div class='child'>
    8
  </div>
  <div class='child'>
    9
  </div>
  <div class='child'>
    10
  </div>
</div>