Div выровнять по горизонтали: Горизонтальное и вертикальное выравнивание

Флексбокс «на пальцах». Первая часть: оси и выравнивание

Флексбокс — это набор ЦСС‑свойств для гибкой раскладки элементов на странице или в отдельном блоке.

Чтобы включить флексбокс, нужно задать элементу display: flex. Тогда элемент станет флекс‑контейнером, а все вложенные в него элементы станут флекс‑элементами.

<div>
  <div>Первая колонка</div>
  <div>Вторая колонка</div>
</div>
<style>
  .columns {
    /* Включаем флексбокс */
    display: flex;
    /* Настраиваем направление 
       и способ раскладки */
    flex-direction: row;
    justify-content: space-between;
  }
</style>

Первая колонка

Вторая колонка

Относитесь к флекс‑контейнеру, как к прямоугольному формату, внутри которого можно расположить несколько элементов по строкам или колонкам, выровняв их по одной из сторон или распределив по формату.

Ключевая идея раскладки флексбоксами — введение главной и поперечной осей, по которым и будут раскладываться флекс‑элементы:

Главная ось →

Поперечная ось →

Серая область — флекс‑контейнер, «кубики» внутри — флекс‑элементы

За направление главной оси отвечает свойство flex-direction. Если элементы нужно разложить слева направо, используем flex-direction: row; если справа налево, то flex-direction: row-reverse. Если элементы нужно разложить сверху вниз, используем flex-direction: column; если снизу вверх, то flex-direction: column-reverse:

flex‑direction: row

flex‑direction: row‑reverse

flex‑direction: column

flex‑direction: column‑reverse

За расположение элементов на главной оси отвечает свойство justify-content. Если элементы нужно прижать к началу оси, используем justify-content: flex-start; если к концу, то justify-content: flex-end; если к центру, то justify-content: center:

justify‑content: flex‑start

justify‑content: flex‑end

justify‑content: center

Чтобы отжать первый и последний элемент к краям, а оставшееся место поделить, используем justify-content: space-between. Чтобы равномерно поделить место между всеми элементами, используем justify-content: space-around или justify-content: space-evenly:

justify‑content: space‑between

justify‑content: space‑around

justify‑content: space‑evenly

space‑around равномерно распределяет элементы по ширине таким образом, чтобы расстояние до краёв блока равнялось половине расстояния между элементами. space‑evenly распределяет элементы так, чтобы все расстояния были одинаковы

Поперечная ось идёт перпендикулярно главной. Соответственно, если главная ось идёт по горизонтали, то поперечная пройдёт по вертикали. И наоборот: если главная ось идёт по вертикали, поперечная пройдёт по горизонтали.

За расположение элементов на поперечной оси отвечает свойство align-items. Если элементы нужно растянуть на всю ось (поведение по умолчанию), используем align-items: stretch:

Если элементы на поперечной оси, нужно прижать к началу оси, используем align-items: flex-start; если к концу, то align-items: flex-end; если к центру, то align-items: center:

align‑items: flex‑start

align‑items: flex‑end

align‑items: center

Если элементы на поперечной оси, нужно выровнять по базовой, то используем align-items: baseline:

Все свойства, что мы рассмотрели выше, применяются ко флекс‑контейнеру и влияют на все элементы внутри него. Если отдельные элементы нужно расположить по‑особенному на поперечной оси, используют align-self в самих элементах:

align‑self: flex‑start

align‑self: flex‑end

align‑self: center

Всё самое интересное начинается, когда мы комбинируем раскладку по осям. Например, чтобы отцентрировать модуль по горизонтали и вертикали, нужно выровнять по центру флекс‑элементы по главной и поперечной оси:

justify‑content: center и align‑items: center

Таким образом можно любую сложную модульную вёрстку разбить на вложенные друг в друга флекс‑контейнеры с собственным ритмом элементов:

<header>...</header>
<main>
  <aside>...</aside>
  <article>...</article>
  <aside>...</aside>
</main>
<style>
  header,
  main,
  aside {
    /* Превращаем шапку, содержимое
       и сайдбары во флекс-контейнеры */
    display: flex;
  }
  header {
    /* В шапке раскладываем элементы
       слева направо */
    flex-direction: row;
  }
  aside {
    /* В левом сайдбаре раскладываем
       элементы сверху вниз */
    flex-direction: column;
    justify-content: flex-start;
  }
  aside:last-child {
    /* В правом сайдбаре равномерно
       распределяем элементы */
    justify-content: space-between;
  }
</style>

Что запомнить

Флексбокс — это набор ЦСС‑свойств для гибкой раскладки элементов в каком‑то контейнере. Чтобы включить флексбокс, используем display: flex у контейнера.

Внутри флекс‑контейнера элементы раскладываются по двум осям. Главная ось определяет направление раскладки (слева направо, справа налево, сверху вниз или снизу вверх). Её направление задаётся с помощью flex-direction. Поперечная ось идёт перпендикулярно главной и используется для выравнивания элементов на ней.

Ещё по теме

• Как работает флексбокс. Наглядное введение

• Flexbox

• Флексбокс на примере игрального кубика

• Flexbox Froggy

P. S. Это был совет о веб‑разработке. Хотите знать всё о коде, тестах, фронтенд‑разработке, цеэсэсе, яваскрипте, рельсах и джейде? Присылайте вопросы.

Веб‑разработка

Свежак

css — выравнивание элементов HTML по горизонтали в div

спросил 10 лет, 11 месяцев назад

Изменено 3 года, 6 месяцев назад

Просмотрено 145 тысяч раз

У меня есть три HTML-объекта, и я хочу расположить кнопку «Назад» слева, кнопку «Далее» справа и развернуть посередине внутри контейнера div.

 <ПРЕДЫДУЩИЙ> |ДИАПАЗОН| <ДАЛЕЕ>
 

 #btnПредыдущий
    {
        плыть налево;
    }
    #spanStage
    {
        вес шрифта: полужирный;
        вертикальное выравнивание: посередине;
    }
    #btnДалее
    {
        поплавок: справа;
    } 

 <дел>
        
        Этап 5
        
     

• HTML
• CSS

Стиль «display:flex» — хороший способ разместить эти элементы в одной строке. Независимо от того, какой элемент в div. Особенно, если классом ввода является управление формой, другие решения, такие как начальная загрузка, встроенный блок, не будут работать хорошо.

Пример:

 <дел>
     
     Этап 5