кое-что о показе:-webkit-бокс-флекс: 1

Question

Попытайтесь представить себе ситуацию

есть div и внутри контейнера есть три div,

, и иногда нам нужно позволить внутренним элементам div самостоятельно адаптироваться.

вот так

css:

.a{display:-webkit-box;width:300px;height:100px;background:#222}
.a div{-webkit-box-flex:1;height:100px}
.a-1{background:red}
.a-2{background:yellow}
.a-3{background:blue}

html:

<div class="a">
    <div class="a-1">abc</div>
    <div class="a-2">abcdddd</div>
    <div class="a-3">abcdddddddde</div>
</div>    

но a-1, a-2, a-3 не адаптируются самостоятельно.я имею в виду a-1 a-2 a-3 не равны по длине.кажется, также зависит от длины текста.

как решить?

Answer 1

Похоже, вы неправильно поняли цель гибкой компоновки коробки.Он работает, занимая неиспользуемое пространство в содержащем элементе и добавляя его в дочерние элементы.Так, например, если ваш контейнер содержит 300px, и у вас есть три элемента, изначально 80px, 100px и 60px, то у вас 300-80-100-60 = 60px.Тогда, если все три ваших дочерних элемента имеют значение flex, равное 1, то оно выделяет 60 / (3 * 1) = 20px каждому.Таким образом, дочерние размеры теперь равны 100px, 120px и 80px.

Для вашего примера, если вы хотите, чтобы они были одинакового размера, вы должны установить для -webkit-box-flex значение 0 для всех трех дочерних элементов, но установить ихширина (или высота при необходимости) до 33,33% каждая.

Answer 2

У меня есть случаи, когда я не знаю, сколько элементов будет внутри элемента, но я все же хочу, чтобы они были расположены равномерно.Например, если бы у меня было 3 элемента, их ширина была бы 33%, но для 4 элементов ширина была бы 25%.Чтобы обойти это, я сначала установил ширину в 1%, затем установил flex в 1.

.flex-container {
display: -webkit-box;
display: -moz-box;
display: -ms-box;
display: box;
}

.flex-element {
-webkit-box-flex: 1;
-moz-box-flex: 1;
-ms-box-flex: 1;
box-flex: 1;
width: 1%;
}

Answer 3

Я думаю, вам нужно добавить display: -webkit-box к .a div{-webkit-box-flex:1;height:100px}