0

Здравствуйте! Пытаюсь научиться делать сайты на практике, разбираясь по ходу, но сталкиваюсь с жестокой реальностью и всё валится с рук. В общем примерно так всё должно выглядеть:

Так выглядит часть, которую я пытаюсь воссоздать с помощью flexbox'ов. Как бы я не пытался его сделать, элементы никак не хотят встать туда, куда я хочу. Хочу сделать так, чтобы центральный элемент находился по середине, а левый и правый равнялись от него и при этом, если продолжить список, остальные элементы должны спускать ровно.

.fx1 {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
}
<div class="fx1">
  <div>Первый Автор</div>
  <div>Второй Автор</div>
  <div>Третий Автор</div>
</div>

2
  • Если вы хотите, чтобы центральный элемент "находился посередине", то первый же вопрос возникает - это "известна ли (фиксирована) ширина среднего контейнера.
    – A K
    Commented 3 мар. 2018 в 18:59
  • @AK фиксирована, конечно. Commented 3 мар. 2018 в 19:54

2 ответа 2

3

если вы хотите, чтобы ваши дочерние блоки выстроились равномерно по ширине родительского блока, используйте св-ва

justify-content:space-between;
justify-content:space-around;

подробная информация по flexbox тут

.container {
  display: flex;
  justify-content: space-between;
}
b {
  display: block;
  border: solid 1px black;
}
<div class="container">
  <div><b>М. Җәлил</b>Кызыл<br>Ромашка</div>
  <div><b>М. Җәлил</b>Мокамай</div>
  <div><b>М. Җәлил</b>21<br>Апрель</div>
</div>

8
  • И судя по уточнению автора вопроса - ему не нужно равномерно по ширине, ему нужно, чтобы средний стал по центру. Для этого нужно уточнить, фиксирована ли ширина среднего блока. Так что пока ответ вряд ли стоит засчитывать.
    – A K
    Commented 3 мар. 2018 в 19:00
  • так если у него всего 3 блока,то средний встанет по центру при обоих варинтах исполбзования justify-content Commented 3 мар. 2018 в 19:05
  • @SergeyKanyukov я всё скопировал, как у Вас, но всё равно у меня по центру столбом стоят и только. Не знаю, почему не работает. Commented 3 мар. 2018 в 19:51
  • @РасимХусаенов не совсем понял,что у вас не получается.Точнее, какого результата вы хотите добиться Commented 4 мар. 2018 в 5:54
  • @SergeyKanyukov сегодня снёс всё, скопировал Ваш код и всё заработало. К сожалению, оказалось, что это не совсем то. Мне нужно что-то вроде этого, (pp.userapi.com/c841637/v841637578/720cc/U_2g_JEmHJg.jpg) чтобы если сделать список, всё шло столбиком. Commented 4 мар. 2018 в 15:50
-1

Flex задается родителскому элементу чтобы преобразовать дочерные.

.main-wrap {
  display:flex;
  justify-content:space-between;
}
.block-1 {
  background-color:lightblue;
}
<div class="main-wrap">
  <div class="block-1">Bulbasaur</div>
  <div class="block-1">Pikachu</div>
  <div class="block-1">Chermander</div>
  <div class="block-1">Onix</div>
</div>

0

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.