FlexBox CSS и выравнивание
Я изучаю Flex, и вот мой шаблон:
<div id = "container">
<div>person1.name</div>
<div>person1.address</div>
<div>person1.phone</div>
<div>person1.email</div>
<div>person1.hobbies</div>
<div>person2.name</div>
<div>person2.address</div>
<div>person2.phone</div>
<div>person2.email</div>
<div>person2.hobbies</div>
</div>
Я бы хотел что-то вроде этого (для моего HTML-рендеринга): все, что характерно для person1, находится слева, а все, что характерно для person2, справа.
person1.name person2.name
person1.address personé.address
person1.phone person2.phone
person1.email person2.email
person1.hobbies person2.hobbies
Есть идеи использовать FlexBox?
Спасибо
Ответы 2
#container {
display: inline-flex;
flex-direction: column;
flex-wrap: wrap;
height: 100px;
}
#container > div {
height: 20px;
margin: 0 10px;
}<div id = "container">
<div>person1.name</div>
<div>person1.address</div>
<div>person1.phone</div>
<div>person1.email</div>
<div>person1.hobbies</div>
<div>person2.name</div>
<div>person2.address</div>
<div>person2.phone</div>
<div>person2.email</div>
<div>person2.hobbies</div>
</div>@VivekAthalye, вы спекулируете. Если есть какие-то другие требования, их нужно указать в вопросе. Я дал ответ на основании предоставленной информации.
Тем не менее, вы предполагаете, что контейнер имеет высоту 100 пикселей.
@StefanBob. Не уверен, о чем ты говоришь. Я дал прямой ответ на вопрос. Мой ответ решает поставленную проблему. Все остальное - предположения. Я не думаю, что мой ответ заслуживает отрицательного голоса, но, по крайней мере, вы прокомментировали. (Если вы проголосовали против меня, потому что думаете, что я против вас, имейте в виду, что на этом сайте более 2 человек.)
@Michael_B Я просто согласен с Вивеком, этот ответ бесполезен в очень распространенном случае, когда строки для полей, таких как хобби и адрес, будут выходить за одну строку. Или я думаю расширить страницу до необоснованной суммы
@StefanBob, если бы это была настоящая проблема, представленная в вопросе, я бы опубликовал другой ответ. Я не знаю всех требований в этом случае. Так что я не размышлял.
@Michael_B В этом я не сомневаюсь. Для тех, кто изучает flexbox и явно не перечисляет все аспекты проблемы, я считаю, что мы можем сделать вывод о его намерении только из того факта, что он использует интерполяцию переменных, данные могут быть длиннее. Это все. Да, вы технически выполняете все требования его вопроса. Отлично.
Вот мой умозрительный ответ, если людей больше двух и такая сфера, как хобби, выходит за пределы одной строчки.
#container {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
.person {
flex: 0 1 300px;
}
.<div id = "container">
<div class = "person">
<div>person1.name</div>
<div>person1.address</div>
<div>person1.phone</div>
<div>person1.email</div>
<div>person1.hobbies</div>
</div>
<div class = "person">
<div>person2.name</div>
<div>person2.address</div>
<div>person2.phone</div>
<div>person2.email</div>
<div>person2.hobbies soccer, collecting stamps, jogging, video games, tv, cooking, reading</div>
</div>
<div class = "person">
<div>person3.name</div>
<div>person3.address</div>
<div>person3.phone</div>
<div>person3.email</div>
<div>person3.hobbies</div>
</div>
</div>+1 Я собирался опубликовать точно такой же подход со строкой «Я лично предпочитаю оборачивать отдельные детали человека в отдельный div, чтобы у меня было больше гибкости с позиционированием» .. после ужина ... спасибо, что сделали.
Сделал это для вас и вашего комментария @VivekAthalye :)
Это не сработает, если в каком-либо из полей шаблона есть несколько строк ... например, адрес и хобби.