Question

如果我使用display: flex; flex-direction: column;作为父亲div，我该如何对内部子div进行内联？

我尝试将display: inline-block用于子级div，同时float:left，但没有人使用此工作。

＆＃13;

#container {
  display: flex;
  flex-direction: column;
}
.item
{
  border: 1px dotted;
  width: 100px;
  height: 100px;
}
.item1 {
  order: 2;
}
.item2 {
  order: 1;
}
.item3 {
  order: 3;
}

＆＃13;

<div id="container">
  <div class="item1 item" >2</div>
  <div class="item2 item" >1</div>
  <div class="item3 item" >3</div>
</div>

＆＃13;

Answer 1

＆＃13;

.item
{
  border: 1px dotted;
  width: 100px;
  height: 100px;
  display: inline-block;
}
.item1 {
  order: 2;
  display: block;
}
.item2 {
  order: 1;
  float: left;
}
.item3 {
  order: 3;
}

＆＃13;

<div id="container">
  <div class="item1 item" >2</div>
  <div class="item2 item" >1</div>
  <div class="item3 item" >3</div>
</div>

＆＃13;

Answer 2

＆＃13;

#container {
  display: flex;
  flex-wrap: wrap;
}

.item  { display: flex; }
.item1 { flex: 1 0 45%; order: 2; }
.item2 { flex: 1 0 60%; order: 1; }
.item3 { flex: 1 0 45%; order: 3; }

.item > span {
  border: 1px dotted;
  width: 100px;
  height: 100px;
  margin: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.item2 > span { margin: 0 auto;    }
.item1 > span { margin-left: auto; }
.item3 > span { margin-right: auto;}

＆＃13;

<div id="container">
  <div class="item1 item"><span>2</span></div>
  <div class="item2 item"><span>1</span></div>
  <div class="item3 item"><span>3</span></div>
</div>

＆＃13;

对齐内联订购的DIV？

2 个答案: