Я сделаю все возможное, чтобы ответить на ваши гибкие вопросы, но прежде чем начать, я бы предположил, что, возможно, более логичным и интуитивно понятным методом для достижения ваших целей будет использование grid . Есть ли причина, по которой вы избегаете этого? Они располагаются так же, как таблицы, и вы можете управлять ими с гораздо большей простотой использования.
1a.
Flex-based указывает начальный размер элемента flex (доВы начинаете расти или уменьшаться, чтобы соответствовать пространству). Если вы удалили flex-base, он вернется к значению по умолчанию - auto. Это означает, что начальный размер всех элементов flex будет определен явно (например, 150px) или автоматически определен в зависимости от размера его содержимого. Установив его на ноль, вы даете всем элементам одинаковую отправную точку. Таким образом, с flex-base zero и flex-grow 1 все элементы будут расти одинаково, чтобы заполнить пространство. Примечание: flex-grow - это просто пропорция, указывающая, сколько места нужно заполнить, если осталось свободное место.
1b.
Чтобы сделать первый столбец как можно меньшим: (Я не уверен, что вы имеете в виду конкретную ширину, если да, посмотрите следующее решение)
/* Leave the rest of the code as is */
ee-cell:nth-child(1) {
flex-basis: auto;
flex-grow: 0;
}
Чтобы сделать третий столбец определенной ширины:
/* Leave the rest of the code as is */
ee-cell:nth-child(3) {
width: 100px;
flex-basis:auto;
flex-grow: 0;
}
Оба эти решения устанавливают основу для auto, который говорит, что начальный размер будет специфичным для этого элемента (либо содержимого - в первом примере - или определенной ширины - во втором примере), а затем говорит: не позволяйте этому элементу расти допомогите заполнить пространство (flex-grow: 0)
2.
Я смотрю на этот CSS-код, и моей главной заботой является удобочитаемость и простота использования (будущее обслуживание),Я думаю, что вы можете достичь своих целей с помощью flex, как вы сделали. Но если бы это был я, я бы переключился на сетки. Приведенный ниже код делает то же самое, но также дает вам гораздо больший контроль (я перечислю больше вариантов, которые будут у вас ниже) и, на мой взгляд, имеет больше смысла, когда вы его читаете:
<style>
ee-table {
display: grid;
grid-template-columns: repeat(3, 1fr);
/* use the line below to accomplish 1b - smallest possible first column, set width last column */
/* grid-template-columns: auto 1fr 100px; */
width: 100%;
}
@media screen and (max-width: 1200px) {
ee-table {
grid-template-columns: 1fr 1fr;
}
ee-cell[unnecessary] {
display: none
}
}
@media screen and (max-width: 800px) {
ee-table {
grid-template-columns: 1fr;
}
ee-cell[header] {
display: none
}
}
</style>
<ee-table>
<ee-cell header>Header - One .. ... .</ee-cell>
<ee-cell header>Header - Two. .. </ee-cell>
<ee-cell header unnecessary>Header - Three</ee-cell>
<ee-cell>Row 1 - One. ..... .. ..</ee-cell>
<ee-cell>Row 1 - Two. ... .. .. ... ...... </ee-cell>
<ee-cell unnecessary>Row 1 - Three..... .. .. . ... .. .. ... ...... </ee-cell>
<ee-cell>Row 2 - One</ee-cell>
<ee-cell>Row 2 - Two</ee-cell>
<ee-cell unnecessary>Row 2 - Three</ee-cell>
<ee-cell>Row 3 - One</ee-cell>
<ee-cell>Row 3 - Two</ee-cell>
<ee-cell unnecessary>Row 3 - Three</ee-cell>
<ee-table>
Дополнительные параметры с сеткой
- Пробелы в сетке: вы можете установить интервал между столбцами и строками (которые могут отличаться, если хотите).
- Свобода от строк: у вас гораздо больше гибкости, когда вы можете иметь все в одном длинном списке в HTML. Этого также можно добиться с помощью flex, но гораздо менее элегантно.
- Перемещение ячеек: вы можете сделать это во flexbox, но вы не сможете сделать это между рядами, как вы можете с помощью сетки.