野花--css实现元素竖向排列 --- writing-mode和flex的区别

第一种:使用flex方法

前提条件1.父元素有宽度和高度

.box {
  background-color: #9bceea;
  height: 60px;
  width: 90px;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  .item {
    height: 30px;
    width: 30px;
    background-color: #8F41E9;
  }
}

<div class="box">
	<div class="item">1</div>
	<div class="item">2</div>
	<div class="item">3</div>
	<div class="item">4</div>
	<div class="item">5</div>
	<div class="item">6</div>
	<div class="item">7</div>
	<div class="item">8</div>
	<div class="item">9</div>
	<div class="item">10</div>
	<div class="item">11</div>
</div>

运行结果:

运行确实是纵向排列,然后因为高度限制,自动换列,直到结束最后一个div排列.

但是上述有一个问题,就是.box的背景并没有显示出来,按照我的诉求,应该要显示box的背景在整个div中.右下角并没有将背景色显示出来,这个就是flex布局在有高度和宽度限制条件下,纵向排列的局限性.

第二种方法:writing-mode属性结合float

让列表内元素竖着排列，高度不够，纵向换行的需求。

.box {
  background-color: #9bceea;
  height: 60px;
  writing-mode: vertical-lr;

  .item {
    float: left;
    writing-mode: initial;
    height: 30px;
    width: 50px;
    background-color: #8F41E9;
  }
}

<div class="box">
	<div class="item">第1项</div>
	<div class="item">第2项</div>
	<div class="item">第3项</div>
	<div class="item">第4项</div>
	<div class="item">第5项</div>
	<div class="item">第6项</div>
	<div class="item">第7项</div>
	<div class="item">第8项</div>
	<div class="item">第9项</div>
	<div class="item">第10项</div>
	<div class="item">第11项</div>
</div>

如果只有父元素中有writing-mode属性,子元素中没有writing-mode属性,哪么文字也会纵向排列,就像这样

因此,需要在子项中添加writing-mode属性值initial还原成初始的文字排列

这样就实现了纵向排列,自动换行