writing

admin管理员组

文章数量:1026989

writing

蒙古文是从上到下，从左到右书写的，所以一般布局中，div布局要横向排列。这时我一般都是父div为flex-direction：row

.category_1{background: blueviolet;}.category_2{background: #fd0101;}.detail{display: inline-block;}.flex_test{display: flex;flex-direction: row;height: 100%;
}<div class="flex_test"><div class="category_1"><div class="detail">mongol</div><div class="detail">mongol</div><div class="detail">mongol</div></div><div class="category_2"><div class="detail">mongol</div><div class="detail">mongol</div><div class="detail">mongol</div></div></div>

这代码对于横向排列没有问题。但是为了竖向显示蒙古文加入writing-mode的话引起二级div会像默认块级元素一样竖向排列；

.flex_test{display: flex;flex-direction: row;height: 100%;writing-mode: vertical-lr;
}

这时效果会变成

可以看出来蒙古文是可以书香显示，但是二级元素category1和2变了原来横向排列的格式，变成了竖向排列了。

因为我的需求是在二级div即category类里动态添加detail类的inline-block div。

在最外部为flex布局下，为了完成我的需求，我把writing-mode移到内部。
这里有2种思路，
一是，最内部detail里加入wrting-mode，可以自动撑开外部父div，但是detai虽然为inline-block但占据一个列，并会靠在下方不是我要的需求。

二是，category里加入wrting-mode，但是这会导致新增加的子div不会自动撑开外部category的div。

到了这里，死活都满足不了需求。
想过通过计算宽度等动态改变父元素的宽度。可是太麻烦了。

后面随便调试了一下。

终于看出曙光了。

最外部布局不加入flex，直接writing-mode：vertical-lr;

最外部父元素加一句writing-mode：vertical-lr;

这样不仅解决了，二级div横向排列，还解决了内部动态添加子div时自动撑开的问题。

即：

.flex_test{height: 100%;writing-mode: vertical-lr;
}

想放弃过，可是最后总是碰巧能解决。这说明有时候再坚持一下就可以了。。祝好运！！

writing

蒙古文是从上到下，从左到右书写的，所以一般布局中，div布局要横向排列。这时我一般都是父div为flex-direction：row

.category_1{background: blueviolet;}.category_2{background: #fd0101;}.detail{display: inline-block;}.flex_test{display: flex;flex-direction: row;height: 100%;
}<div class="flex_test"><div class="category_1"><div class="detail">mongol</div><div class="detail">mongol</div><div class="detail">mongol</div></div><div class="category_2"><div class="detail">mongol</div><div class="detail">mongol</div><div class="detail">mongol</div></div></div>

这代码对于横向排列没有问题。但是为了竖向显示蒙古文加入writing-mode的话引起二级div会像默认块级元素一样竖向排列；

.flex_test{display: flex;flex-direction: row;height: 100%;writing-mode: vertical-lr;
}

这时效果会变成

可以看出来蒙古文是可以书香显示，但是二级元素category1和2变了原来横向排列的格式，变成了竖向排列了。

因为我的需求是在二级div即category类里动态添加detail类的inline-block div。

在最外部为flex布局下，为了完成我的需求，我把writing-mode移到内部。
这里有2种思路，
一是，最内部detail里加入wrting-mode，可以自动撑开外部父div，但是detai虽然为inline-block但占据一个列，并会靠在下方不是我要的需求。

二是，category里加入wrting-mode，但是这会导致新增加的子div不会自动撑开外部category的div。

到了这里，死活都满足不了需求。
想过通过计算宽度等动态改变父元素的宽度。可是太麻烦了。

后面随便调试了一下。

终于看出曙光了。

最外部布局不加入flex，直接writing-mode：vertical-lr;

最外部父元素加一句writing-mode：vertical-lr;

这样不仅解决了，二级div横向排列，还解决了内部动态添加子div时自动撑开的问题。

即：

.flex_test{height: 100%;writing-mode: vertical-lr;
}

想放弃过，可是最后总是碰巧能解决。这说明有时候再坚持一下就可以了。。祝好运！！

本文标签： writing