<div className = {css.title} >
<div className = {css.row}>
<div className = {css.columnLeft}>
<div className = {css.header}>Images</div>
</div>
<div className = {css.columnRight}>
<strong>Image 1 of 2</strong>
</div>
</div>
<Icon />
</div>
css
.row {
width: 100%;
display: flex;
align-items: center;
}
.columnLeft {
flex: 1 0 25%;
text-align: left;
}
.columnRight {
flex: 1 0 75%;
}
В настоящее время делает
Я хотел бы, чтобы он был выровнен по горизонтали больше, чем между левым и центральным.
Чтобы сохранить «Изображение 1 из 2» (центральный столбец) в середине экрана:
flex: 1 1 50%
flex: 0 0 auto
Это заставит левый и правый столбцы начать вычисление гибкости с базы 50%
(что дает им равный вес, независимо от неравной ширины содержимого). Центральный столбец будет отталкиваться от левого и правого столбцов и занимать равное количество пустого пространства от каждого, чтобы отобразить его содержимое 2.
Если вы хотите, чтобы центральная колонка начинала сворачиваться с определенной ширины, дайте ей max-width
и text-align: center
.
Вот об этом.
<div className = {css.title}>
<div className = {css.row}>
<div className = {css.columnLeft}>
<div className = {css.header}>Images</div>
</div>
<div className = {css.columnCenter}>
<strong>Image 1 of 2</strong>
</div>
<div className = {css.columnRight}>
<Icon />
</div>
</div>
</div>
CSS:
.row {
display: flex;
}
.columnLeft,
.columnRight {
flex: 1 1 50%;
}
.columnCenter {
flex: 0 0 auto;
display: flex;
justify-content: center;
}
.columnRight {
display: flex;
flex-direction: row-reverse;
}
HTML-демонстрация:
.row {
display: flex;
justify-content: center;
}
.columnLeft, .columnRight {
flex: 0 1 50%;
border: 1px solid red;
}
.columnCenter {
flex: 0 0 auto;
display: flex;
justify-content: center;
}
.columnRight {
display: flex;
flex-direction: row-reverse;
}
.middle {
width: 1px;
height: 2rem;
background-color: red;
}
<div class = "row">
<div class = "columnLeft">
<div class = "header">More content on left side</div>
</div>
<div class = "columnCenter">
<strong>I am centered</strong>
</div>
<div class = "columnRight">Icon</div>
</div>
<div class = "row">
<div class = "middle" />
</div>
Примечания:
1 - Я дал среднему гибкому элементу класс columnCenter
и поместил обертку .columnRight
вокруг <Icon />
, потому что в вашем примере центральный элемент имел класс columnRight
, что сбивало с толку (например, неправильное имя), ИМХО.
2 — Имейте в виду, что flex гибкий (отсюда и название). Если в одном из столбцов содержится значительно больше содержимого, чем в другом, равное отталкивание центрального столбца от боковых сторон уже не будет таким равномерным. Стороны уступают равное количество места только в том случае, если у них больше места, чем необходимо для отображения их содержимого. Если вы хотите, чтобы центральный текст оставался в центре, несмотря ни на что, поместите max-width
в боковые столбцы.
минимальный воспроизводимый пример был бы полезен.