Ограничение количества ящиков в строке отображения

Question

У меня есть следующий HTML код, который в основном представляет собой коробку с небольшими полями ввода внутри. Я хочу, чтобы в одной строке было максимум 4 поля ввода, и, если их больше, разбить строку. Причина, по которой я не делаю это вручную, заключается в том, что файл. js в конечном итоге добавит поля ввода в код.

.formPanel {
    display:flex;
}

.formOption {
    width: 25%
}

.formBox {
    width: 100%;
}

 <div id="formBody">
            <div id="insertForm" class="formPanel">
                <div class="formOption">
                    <h4>Task 1</h4>
                    <input type="text" placeholder="Task1" class="formBox">
                </div>
                <div class="formOption">
                    <h4>Task 2</h4>
                    <input type="text" placeholder="Task2" class="formBox">
                </div>
                <div class="formOption">
                    <h4>Task 3</h4>
                    <input type="text" placeholder="Task3" class="formBox">
                </div>
                <div class="formOption">
                    <h4>Task 4</h4>
                    <input type="text" placeholder="Task4" class="formBox">
                </div>
                <div class="formOption">
                    <h4>Task 5</h4>
                    <input type="text" placeholder="Task5" class="formBox">
                </div>
                <div class="formOption">
                    <h4>Task 6</h4>
                    <input type="text" placeholder="Task6" class="formBox">
                </div>
            </div>

Что такое опция css, чтобы это произошло? Я уже поместил ширину каждой ячейки в 25%, но у меня есть display: flex на родительском элементе, чтобы они оказались в одной строке.

В этой скрипке есть пример, о котором я говорю about: https://jsfiddle.net/wr41ah63/7/ Каждое задание находится в одной строке, но я хочу, чтобы в одной строке было максимум 4 задания.

Answer 1

Вы должны установить flex-wrap: wrap вместе с display: flex на .formPanel, чтобы это работало. В противном случае, независимо от установленной ширины, она всегда будет отображаться в одной строке.