Question

我创建了几个带有某些复选框的div，我想使用flex框（更具体地说是order函数）更改每个div的位置。例： Div：年龄复选框：新，旧，婴儿

Div：音乐复选框：新音乐，旧音乐

我想只使用flex box顺序来放置音乐div。

<div id="TEST" class="col-md-6 col-sm-6 col-xs-12">
                    <div class="narrow-title odd">TEST</div>
                    <div class="odd">
                        <ul class="selec-design block-metal">
                            <li>
                                <a href="TEST">
                                    <span></span>TEST<input type="checkbox" id="TEST" name="TEST" value="TEST" style="display:none;">
                                </a>
                            </li>
                            <li>
                                <a href="TEST">
                                    <span></span>TEST<input type="checkbox" id="TEST" name="TEST" value="TEST" style="display:none;">
                                </a>
                            </li>
                            <li>
                                <a href="TEST">
                                    <span></span>TEST<input type="checkbox" id="TEST" name="TEST" value="TEST" style="display:none;">
                                </a>
                            </li>
                            <li>
                                <a href="TEST">
                                    <span></span>TEST<input type="checkbox" id="TEST" name="TEST" value="TEST" style="display:none;">
                                </a>
                            </li>
                            <li>
                                <a href="TEST">
                                    <span></span>TEST<input type="checkbox" id="TEST" name="TEST" value="TEST" style="display:none;">
                                </a>
                            </li>
                            <li>
                                <a href="TEST">
                                    <span></span>TEST<input type="checkbox" id="TEST" name="TEST" value="TEST" style="display:none;">
                                </a>
                            </li>
                            <li>
                                <a href="TEST">
                                    <span></span>TEST<input type="checkbox" id="TEST" name="TEST" value="TEST" style="display:none;">
                                </a>
                            </li>
                            <li>
                                <a href="TEST">
                                    <span></span>TEST<input type="checkbox" id="TEST_2272" name="TEST" value="TEST" style="display:none;">
                                </a>
                            </li>
                            <li>
                                <a href="TEST"><span></span>TEST<input type="checkbox" id="TEST_2239" name="TEST" value="TEST" style="display:none;">
                                </a>
                            </li>
                            <li>
                                <a href="TEST">
                                    <span></span>TEST<input type="checkbox" id="TEST_1796" name="TEST" value="TEST" style="display:none;">
                                </a>
                            </li>
                            <li>
                                <a href="TEST">
                                    <span></span>TEST<input type="checkbox" id="TEST_2237" name="TEST" value="TEST" style="display:none;">
                                </a>
                            </li>
                        </ul>
                    </div>
                </div>

Answer 1

首先，切勿两次使用ID。它们注定是独一无二的。

现在，如果要使用弹性框对元素进行排序，只需在CSS中为子元素赋予[1,2,3]属性即可。

这是一个使用div的示例。您可能需要玩弄自己的显示器和位置，才能使其与列表项一起使用。

order

#TEST {
  display: flex;
  flex-direction: column;
}
#TEST ul, 
#TEST li {
  display: block;
}
#TEST1 {
  order: 1;
}
#TEST2 {
  order: 2;
}
#TEST3 {
  order: 3;
}
#TEST4 {
  order: 4;
}
#TEST5 {
  order: 5;
}
#TEST6 {
  order: 6;
}
#TEST7 {
  order: 7;
}
#TEST8 {
  order: 8;
}

使用flexbox（订单）组织和订购多个div

1 个答案: