Как функционирует горизонтальное и вертикальное выравнивание в гибких ящиках?

КОНТЕКСТ:

В гибком контейнере у нас есть две оси, главная ось и поперечная ось:

Ejes del contenedor flexible

ВОПРОСЫ:

Как возможно выравнивать гибкие элементы в горизонтальной оси?

Как возможно выравнивать гибкие элементы в вертикальной оси?

Как возможно выравнивать гибкие элементы в обеих осях одновременно?

Что происходит, когда я меняю адрес гибкого контейнера используя свойство flex-direction?

Как возможно выравнивать только элемент в левую сторону и остальные в правую сторону, если не существует свойство justify-self или justify-items в главной оси?

Замечание:

Этот вопрос основан на этой, в способ спроси и ответ, с целью помогать в сообщество StackOverflow на испанском языке понимать немного лучше гибкие ящики и выравнивание гибких элементов.

7
задан 23.05.2017, 15:39
2 ответа

Поскольку он обучается в вопросе, в гибких ящиках у нас есть две оси, главный (main axis) и поперечная улица (cross axis) .


, Чтобы выравнивать гибкие элементы в главная ось , у нас есть свойство:

, Чтобы выравнивать гибкие элементы в поперечная ось , у нас есть три свойства:

Давайте Начинаться с вопросом, который он говорит as¦-:

Â: Qué происходит, когда я меняю direcci¦n гибкого контейнера используя свойство flex-direction?

Прежде всего важен иметь просвет, что гибкие ящики или flexbox имеют как prop¦sito diseño (layout) в единственном dimensi¦n .

Â: Qué это означает?

direcci¦n гибкого контейнера может быть линия или из колонны, а не оба в то же время.

Свойство flex-direction принимает четыре типа стоимости:

, Когда flex-direction считает стоимостью row или row-reverse главную ось, - горизонтальный и поперечная ось - вертикальная.

В то время как, когда flex-direction имеет как стоимость column или column-reverse главная ось - вертикальная и поперечная ось - горизонтальная.

Это проистекает, в который:

Поперечная ось - телесная ось, перпендикулярная самому большему dimensi¦n тела или обычному direcci¦n движения.

Вкратце и возвращаясь в вопрос:

Â: Qué происходит, когда я меняю direcci¦n гибкого контейнера используя свойство flex-direction?

вкладывает главную ось и поперечную ось, если меняется direcci¦n линии в колонну, или наоборот.

Pensémoslo as¦-:

  • Direcci¦n в линии

fila

  • Direcci¦n в колонне

columna


Имея немного mÃ: s просвет это, давайте вновь писать вопросы, которые они говорят as¦-:

Â: C¦mo возможный выравнивать гибкие элементы в горизонтальной оси?

Â: C¦mo возможный выравнивать гибкие элементы в вертикальной оси?

Уже мы знаем, что direcci¦n затрагивает оси гибкого контейнера, и они métodos alineaci¦n они вкладываются, тогда подходящие вопросы:

  • Â: C¦mo возможный выравнивать гибкие элементы в главной оси?
  • Â: C¦mo возможный выравнивать гибкие элементы в поперечной оси?

Métodos, чтобы выравнивать в главной оси:

Según W3C есть два métodos, чтобы выравнивать гибкие элементы в главной оси:

  1. Свойство justify-content
  2. auto mÃ: rgenes

justify-content

Свойство justify-content выравнивает гибкие элементы гибкого контейнера в главной оси.

Это свойство определяется в гибком контейнере, но только преданная гибким элементам.

Существуют пять типов выравнивания, которые принимает это свойство:

  • flex-start - Гибкие элементы группируются в начало гибкого контейнера.

Синтаксисов : justify-content: flex-start;

flex-start

body {
  margin: 0;
}
.flex-container {
  counter-reset: flex-items;
  height: 100vh;
  background-color: peachpuff;
  display: flex;
  justify-content: flex-start;  /* Valor inicial */
}
.flex-item {
  counter-increment: flex-items;
  flex: 0 0 30%;
  background-color: gold;
}
.flex-item:nth-child(even) {
  background-color: dodgerblue;
}
.flex-item::after {
  content: counter(flex-items);
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  font-size: 3em;
}
<section class="flex-container">
  <div class="flex-item"></div>
  <div class="flex-item"></div>
</section>
  • flex-end - Гибкие элементы группируются в конце гибкого контейнера.

Синтаксисов : justify-content: flex-end;

flex-end

body {
  margin: 0;
}
.flex-container {
  counter-reset: flex-items;
  height: 100vh;
  background-color: peachpuff;
  display: flex;
  justify-content: flex-end;
}
.flex-item {
  counter-increment: flex-items;
  flex: 0 0 30%;
  background-color: gold;
}
.flex-item:nth-child(even) {
  background-color: dodgerblue;
}
.flex-item::after {
  content: counter(flex-items);
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  font-size: 3em;
}
<section class="flex-container">
  <div class="flex-item"></div>
  <div class="flex-item"></div>
</section>
  • center - Гибкие элементы группировался в центр гибкого контейнера.

Синтаксисов : justify-content: center;

center

body {
  margin: 0;
}
.flex-container {
  counter-reset: flex-items;
  height: 100vh;
  background-color: peachpuff;
  display: flex;
  justify-content: center;
}
.flex-item {
  counter-increment: flex-items;
  flex: 0 0 30%;
  background-color: gold;
}
.flex-item:nth-child(even) {
  background-color: dodgerblue;
}
.flex-item::after {
  content: counter(flex-items);
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  font-size: 3em;
}
<section class="flex-container">
  <div class="flex-item"></div>
  <div class="flex-item"></div>
</section>
  • space-around - Гибкие элементы распространяются однообразно в гибком контейнере.

Синтаксис : justify-content: space-around;

space-around

body {
  margin: 0;
}
.flex-container {
  counter-reset: flex-items;
  height: 100vh;
  background-color: peachpuff;
  display: flex;
  justify-content: space-around;
}
.flex-item {
  counter-increment: flex-items;
  flex: 0 0 30%;
  background-color: gold;
}
.flex-item:nth-child(even) {
  background-color: dodgerblue;
}
.flex-item::after {
  content: counter(flex-items);
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  font-size: 3em;
}
<section class="flex-container">
  <div class="flex-item"></div>
  <div class="flex-item"></div>
</section>
  • space-between - Гибкие элементы распространяются однообразно в гибком контейнере. В отличие от space-around, первый гибкий элемент выравнивает на конце и último гибкий элемент на противоположном конце.

Синтаксиса : justify-content: space-between;

space-between

body {
  margin: 0;
}
.flex-container {
  counter-reset: flex-items;
  height: 100vh;
  background-color: peachpuff;
  display: flex;
  justify-content: space-between;
}
.flex-item {
  counter-increment: flex-items;
  flex: 0 0 30%;
  background-color: gold;
}
.flex-item:nth-child(even) {
  background-color: dodgerblue;
}
.flex-item::after {
  content: counter(flex-items);
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  font-size: 3em;
}
<section class="flex-container">
  <div class="flex-item"></div>
  <div class="flex-item"></div>
</section>

Вкратце :

justify-content resumen


Дело MÃ: rgenes

В отличие от свойства justify-content, автомобиль mÃ: rgenes они определяются в гибких элементах вместо гибкого контейнера.

С ними мы можем добиваться выравнивания, которое algún способ заменяет небытие таких свойств как justify-self и justify-items.

Aquà - мы можем покрывать вопрос:

Â: C¦mo возможный выравнивать только элемент в левую сторону и demÃ: s в правую сторону, если не существует свойство justify-self или justify-items в главной оси?

Для этого esperar¦-хозяева, которые он существовал justify-self: flex-start;, и использовать это в первом элементе, в то время как в остальном aplicar¦ - в 'justify-content: flex-end;

К сожалению свойство justify-self не существует, но есть teor¦ - в Michael_B , большой налогоплательщик в StackOverflow в Inglés гибких ящиков (и тот, кто estÃ: спусковые салазки этот ответ, ссылка aquà - ), которого для этого estÃ: n автомобиль mÃ: rgenes.

.flex-item:first-child { margin-right: auto; }

auto margen

body {
  margin: 0;
}
.flex-container {
  counter-reset: flex-items;
  height: 100vh;
  background-color: peachpuff;
  display: flex;
  justify-content: flex-end;
}
.flex-item {
  counter-increment: flex-items;
  flex: 0 0 10%;
  background-color: gold;
}
.flex-item:first-child {
  margin-right: auto;
}
.flex-item:nth-child(even) {
  background-color: dodgerblue;
}
.flex-item::after {
  content: counter(flex-items);
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  font-size: 3em;
}
<section class="flex-container">
  <div class="flex-item"></div>
  <div class="flex-item"></div>
  <div class="flex-item"></div>
  <div class="flex-item"></div>
</section>

Или también:

.flex-item:nth-child(2) { margin-left: auto; }

auto - margen

body {
  margin: 0;
}
.flex-container {
  counter-reset: flex-items;
  height: 100vh;
  background-color: peachpuff;
  display: flex;
  justify-content: flex-end;
}
.flex-item {
  counter-increment: flex-items;
  flex: 0 0 10%;
  background-color: gold;
}
.flex-item:nth-child(2) {
  margin-left: auto;
}
.flex-item:nth-child(even) {
  background-color: dodgerblue;
}
.flex-item::after {
  content: counter(flex-items);
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  font-size: 3em;
}
<section class="flex-container">
  <div class="flex-item"></div>
  <div class="flex-item"></div>
  <div class="flex-item"></div>
  <div class="flex-item"></div>
</section>

Давайте Менять direcci¦n в колонну и давайте применять нижний край со стоимостью автомобиль.

margin-bottom auto

jsFiddle

Восток я вступаю в брак и многие других могут добиваться с автомобилем mÃ: rgenes.


Métodos, чтобы выравнивать в поперечной оси:


align-content

Свойство align-content выравнивает элементы сходно с justify-content, но в поперечной оси.

Это свойство también определяется в гибком контейнере, но únicamente преданная гибким элементам. Требуют, чтобы он существовал mÃ: s l¦-nea гибких элементов для того, чтобы Ваш эффект был видимым.

Существуют 6 типов выравнивания, которые принимает это свойство. Вся стоимость ведет себя равно единственно, чем в поперечно оси. único добавочной стоимости stretch.

Синтаксисов: align-content: flex-start;

align content flex start

body {
  margin: 0;
}
.flex-container {
  counter-reset: flex-items;
  height: 100vh;
  background-color: peachpuff;
  display: flex;
  align-content: flex-start;
  flex-wrap: wrap;
}
.flex-item {
  counter-increment: flex-items;
  flex: 0 0 25%;
  background-color: gold;
  border: .4em solid peachpuff;
  box-sizing: border-box;
}
.flex-item:nth-child(even) {
  background-color: dodgerblue;
}
.flex-item::after {
  content: counter(flex-items);
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  font-size: 3em;
}
<section class="flex-container">
  <div class="flex-item"></div>
  <div class="flex-item"></div>
  <div class="flex-item"></div>
  <div class="flex-item"></div>
  <div class="flex-item"></div>
  <div class="flex-item"></div>
  <div class="flex-item"></div>
</section>

Синтаксисов: align-content: flex-end;

align content flex end

body {
  margin: 0;
}
.flex-container {
  counter-reset: flex-items;
  height: 100vh;
  background-color: peachpuff;
  display: flex;
  align-content: flex-end;
  flex-wrap: wrap;
}
.flex-item {
  counter-increment: flex-items;
  flex: 0 0 25%;
  background-color: gold;
  border: .4em solid peachpuff;
  box-sizing: border-box;
}
.flex-item:nth-child(even) {
  background-color: dodgerblue;
}
.flex-item::after {
  content: counter(flex-items);
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  font-size: 3em;
}
<section class="flex-container">
  <div class="flex-item"></div>
  <div class="flex-item"></div>
  <div class="flex-item"></div>
  <div class="flex-item"></div>
  <div class="flex-item"></div>
  <div class="flex-item"></div>
  <div class="flex-item"></div>
</section>

Синтаксисов: align-content: center;

center

body {
  margin: 0;
}
.flex-container {
  counter-reset: flex-items;
  height: 100vh;
  background-color: peachpuff;
  display: flex;
  align-content: center;
  flex-wrap: wrap;
}
.flex-item {
  counter-increment: flex-items;
  flex: 0 0 25%;
  background-color: gold;
  border: .4em solid peachpuff;
  box-sizing: border-box;
}
.flex-item:nth-child(even) {
  background-color: dodgerblue;
}
.flex-item::after {
  content: counter(flex-items);
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  font-size: 3em;
}
<section class="flex-container">
  <div class="flex-item"></div>
  <div class="flex-item"></div>
  <div class="flex-item"></div>
  <div class="flex-item"></div>
  <div class="flex-item"></div>
  <div class="flex-item"></div>
  <div class="flex-item"></div>
</section>

Синтаксисов: align-content: space-between;

align space between

body {
  margin: 0;
}
.flex-container {
  counter-reset: flex-items;
  height: 100vh;
  background-color: peachpuff;
  display: flex;
  align-content: space-between;
  flex-wrap: wrap;
}
.flex-item {
  counter-increment: flex-items;
  flex: 0 0 25%;
  background-color: gold;
  border: .4em solid peachpuff;
  box-sizing: border-box;
}
.flex-item:nth-child(even) {
  background-color: dodgerblue;
}
.flex-item::after {
  content: counter(flex-items);
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  font-size: 3em;
}
<section class="flex-container">
  <div class="flex-item"></div>
  <div class="flex-item"></div>
  <div class="flex-item"></div>
  <div class="flex-item"></div>
  <div class="flex-item"></div>
  <div class="flex-item"></div>
  <div class="flex-item"></div>
</section>

Синтаксиса: align-content: space-around;

align content space around

body {
  margin: 0;
}
.flex-container {
  counter-reset: flex-items;
  height: 100vh;
  background-color: peachpuff;
  display: flex;
  align-content: space-around;
  flex-wrap: wrap;
}
.flex-item {
  counter-increment: flex-items;
  flex: 0 0 25%;
  background-color: gold;
  border: .4em solid peachpuff;
  box-sizing: border-box;
}
.flex-item:nth-child(even) {
  background-color: dodgerblue;
}
.flex-item::after {
  content: counter(flex-items);
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  font-size: 3em;
}
<section class="flex-container">
  <div class="flex-item"></div>
  <div class="flex-item"></div>
  <div class="flex-item"></div>
  <div class="flex-item"></div>
  <div class="flex-item"></div>
  <div class="flex-item"></div>
  <div class="flex-item"></div>
</section>

Синтаксиса: align-content: stretch;

introducir la descripción de la imagen aquí

body {
  margin: 0;
}
.flex-container {
  counter-reset: flex-items;
  height: 100vh;
  background-color: peachpuff;
  display: flex;
  align-content: stretch;
  flex-wrap: wrap;
}
.flex-item {
  counter-increment: flex-items;
  flex: 0 0 25%;
  background-color: gold;
  border: .4em solid peachpuff;
}
.flex-item:nth-child(even) {
  background-color: dodgerblue;
}
.flex-item::after {
  content: counter(flex-items);
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  font-size: 3em;
}
<section class="flex-container">
  <div class="flex-item"></div>
  <div class="flex-item"></div>
  <div class="flex-item"></div>
  <div class="flex-item"></div>
  <div class="flex-item"></div>
  <div class="flex-item"></div>
  <div class="flex-item"></div>
</section>

align-статей и align-self

Свойство align-items выравнивает все гибкие элементы гибкого контейнера в поперечной оси.

Это свойство определяется в гибком контейнере, но только преданная гибким элементам.

Свойство align-self очень сходное с align-items с различием, которое эта выравнивает единственные , гибкий элемент гибкого контейнера в поперечной оси.

ВАЖНО: Это свойство отличается в demÃ: s, так как он определяется в гибком элементе и не в гибком контейнере.

Существуют пять типов выравнивания, которые принимают эти свойства (в них давайте давать utilizarÃ: align-items по причине краткости):

Синтаксисов: align-items: flex-start;

align items flex start

body {
  margin: 0;
}
.flex-container {
  counter-reset: flex-items;
  height: 100vh;
  background-color: peachpuff;
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
}
.flex-item {
  counter-increment: flex-items;
  flex: 0 0 25%;
  background-color: gold;
  border: .4em solid peachpuff;
  box-sizing: border-box;
}
.flex-item:nth-child(even) {
  background-color: dodgerblue;
}
.flex-item::after {
  content: counter(flex-items);
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  font-size: 3em;
}
<section class="flex-container">
  <div class="flex-item"></div>
  <div class="flex-item"></div>
  <div class="flex-item"></div>
  <div class="flex-item"></div>
</section>

Синтаксиса: align-items: flex-end;

align items flex end

body {
  margin: 0;
}
.flex-container {
  counter-reset: flex-items;
  height: 100vh;
  background-color: peachpuff;
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
}
.flex-item {
  counter-increment: flex-items;
  flex: 0 0 25%;
  background-color: gold;
  border: .4em solid peachpuff;
  box-sizing: border-box;
}
.flex-item:nth-child(even) {
  background-color: dodgerblue;
}
.flex-item::after {
  content: counter(flex-items);
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  font-size: 3em;
}
<section class="flex-container">
  <div class="flex-item"></div>
  <div class="flex-item"></div>
  <div class="flex-item"></div>
  <div class="flex-item"></div>
</section>

Синтаксиса: align-items: center;

align items center

body {
  margin: 0;
}
.flex-container {
  counter-reset: flex-items;
  height: 100vh;
  background-color: peachpuff;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}
.flex-item {
  counter-increment: flex-items;
  flex: 0 0 25%;
  background-color: gold;
  border: .4em solid peachpuff;
  box-sizing: border-box;
}
.flex-item:nth-child(even) {
  background-color: dodgerblue;
}
.flex-item::after {
  content: counter(flex-items);
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  font-size: 3em;
}
<section class="flex-container">
  <div class="flex-item"></div>
  <div class="flex-item"></div>
  <div class="flex-item"></div>
  <div class="flex-item"></div>
</section>

Синтаксисов: align-items: baseline;

align items baseline

body {
  margin: 0;
}
.flex-container {
  counter-reset: flex-items;
  height: 100vh;
  background-color: peachpuff;
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
}
.flex-item {
  counter-increment: flex-items;
  flex: 0 0 25%;
  background-color: gold;
  border: .4em solid peachpuff;
  box-sizing: border-box;
}
.flex-item:nth-child(even) {
  background-color: dodgerblue;
}
.flex-item::after {
  content: counter(flex-items);
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  font-size: 5em;
}
.flex-item:nth-child(even)::after {
  font-size: 8em;
}
<section class="flex-container">
  <div class="flex-item"></div>
  <div class="flex-item"></div>
  <div class="flex-item"></div>
  <div class="flex-item"></div>
</section>

Синтаксисов: align-items: stretch;

align items stretch

body {
  margin: 0;
}
.flex-container {
  counter-reset: flex-items;
  height: 100vh;
  background-color: peachpuff;
  display: flex;
  align-items: stretch;
  flex-wrap: wrap;
}
.flex-item {
  counter-increment: flex-items;
  flex: 0 0 25%;
  background-color: gold;
  border: .4em solid peachpuff;
  box-sizing: border-box;
}
.flex-item:nth-child(even) {
  background-color: dodgerblue;
}
.flex-item::after {
  content: counter(flex-items);
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  font-size: 3em;
}
<section class="flex-container">
  <div class="flex-item"></div>
  <div class="flex-item"></div>
  <div class="flex-item"></div>
  <div class="flex-item"></div>
</section>
7
ответ дан 24.11.2019, 13:02

Â: C¦mo возможный выравнивать гибкие элементы в обеих осях одновременно?

Используя свойства justify-content и align-items, оба со стоимостью center.

.contenedor-flexible {
  justify-content: center;
  align-items: center;
}

center center

body {
  margin: 0;
}
.flex-container {
  counter-reset: flex-items;
  height: 100vh;
  background-color: peachpuff;
  display: flex;
  justify-content: center;
  align-items: center;
}
.flex-item {
  counter-increment: flex-items;
  flex: 0 0 30%;
  background-color: gold;
}
.flex-item:nth-child(even) {
  background-color: dodgerblue;
}
.flex-item::after {
  content: counter(flex-items);
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  font-size: 3em;
}
<section class="flex-container">
  <div class="flex-item"></div>
</section>

Или с автомобилем mÃ: rgenes, используя únicamente свойство в гибком элементе:

.elemento-flexible{
  margin: auto;
}

body {
  margin: 0;
}
.flex-container {
  counter-reset: flex-items;
  height: 100vh;
  background-color: peachpuff;
  display: flex;
}
.flex-item {
  counter-increment: flex-items;
  flex: 0 0 30%;
  background-color: gold;
  margin: auto;
}
.flex-item:nth-child(even) {
  background-color: dodgerblue;
}
.flex-item::after {
  content: counter(flex-items);
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  font-size: 3em;
}
<section class="flex-container">
  <div class="flex-item"></div>
</section>
0
ответ дан 24.11.2019, 13:02

Теги

Похожие вопросы