A record of a CSS layout discussion with the core development and operation of the Taro team

I was looking for candidates very seriously at work today. When I checked the information of some candidates on the recruitment website, I suddenly received a WeChat message from the core development and operation of the Taro team (I said he was a development, he said he was an operation) classmates, as follows picture:

Many people have not talked for a long time. Now there are more ways to communicate, but people usually communicate less. Originally I thought he was here to chat with me, and by the way, he would introduce a few friends to me and let me help recommend positions. I am a little headhunter, so Nan...

Back to the topic, after he asked this at the time, I had a few small doubts in my mind that were still unclear. After all, to complete a requirement, you must at least understand the nature of the requirement and what are some of the problems that will arise at the same time.

So, seeing his problem, describe a final effect that I understand. It's probably like this. The container box will be stretched, but now it is not stretched, as shown in the figure:

Seeing the demand, the question "Can't flex" pop up without even thinking about it. Thinking about it afterwards, this is really a brain fever reaction, and the facts later proved that such a reaction often sometimes has problems.

The demand point is probably understood, then there are still some uncontrollable factors in the page, such as what will happen after the content increases, like this:

Too much element content, after opening the box, the corresponding will destroy the width alignment.

Understand the requirements and understand the problems that may arise. The next step is to get started. However, I am now a headhunter, not a code farmer, so I shouldn't type code during working hours. However, this problem made my mind very itchy, so I fished a fish, was lazy, and quickly practiced it according to my flex layout assumptions.

The result is the problem situation seen earlier. First, the outer layer flex-direction: row; then there is flex-direction: column; , the result column , we set up height will combine flex-wrap: wrap; line break, and after multiple final wrap would exceed the scope of the parent element, but not the distraction parent element .

Yes, that's his problem before.

So I thought of the way to use multi-column layout, tried it, um, it is indeed feasible. But there is another problem. When using -wekbit-column-count: 2; can satisfy 2 columns, what should we do when there are three columns in the sub-elements? Do you use JS to calculate? The display is unreasonable.

Well, okay, there is really no good idea for the time being.

However, not long after, he sent me a message saying that it was done, and lost a url address to me. I opened it and saw, writing-mode , why didn't I expect the attribute 061cd12b236ce0? When I adjusted the flex before direction , but I forgot writing-mode

In the evening, combined with that demo, simplified it a bit, and recorded it by the way. For writing-mode it will not be expanded. It is available on MDN, mainly to control the writing direction of the text.

<div class="demo">
    <div class="box">
        <div class="list" id="list">
            <div class="item">item_01</div>
            <div class="item">item_02</div>
            <div class="item">item_03</div>
            <div class="item">item_04</div>
            <div class="item">item_05</div>
            <div class="item">item_06</div>
            <div class="item">item_07</div>
            <div class="item">item_08</div>
            <div class="item">item_09</div>
        </div>
    </div>
    <div class="box">002</div>
    <div class="box">003</div>
</div>

.box {
    display: inline-block;
    vertical-align: top;
    min-width: 200px;
    height: 130px;
    margin: 10px;
    padding: 15px 20px;
    border: 1px solid #bbb;
}
.list {
    display: inline-block;
    writing-mode: vertical-lr;
}
.item {
    display: inline-block;
    margin: 5px 10px 10px;
    writing-mode: horizontal-tb;
    background-color: rgba(255, 0, 0, .5);
}

Let's take a look at the final result.

Demo address: http://lab.tianyizone.com/demo/writing-mode-layer.html