Делаем div такой же ширины, как и самый широкий div, но НЕ заполняем ширину экрана CSS flex - PullRequest
0 голосов
/ 28 апреля 2020

Я почти уверен, что мне удалось сделать это случайно при разработке этой страницы, но теперь я не могу до конца понять, что я сделал.

Я пытаюсь создать три <div> s следующим образом:

  • Все элементы одинаковой ширины
  • Ширина должна соответствовать самой широкой <div>
  • Общая ширина должна быть не более необходимой (ie не полная ширина экрана)
  • Собрание <div> с, которое будет центрировано на странице

Пока у меня есть следующее:

.switch-buttons-container {
	display: flex;
	flex-flow: wrap;
	justify-content: center;
	margin: auto;
}

.button-div {
	flex: 1 1 0;
	padding: 5px;
	color: grey;
	border: 1px solid black;
	background-color: rgba(0,0,0,0.25);
	border-radius: 0px 0px 10px 10px;
	line-height: 28px;
	font-size: 22px;
	margin-left: 2px;
	margin-right:2px;
	font-weight: bold;
	cursor: pointer;
}

.selected {
	color: white;
	background-color: rgba(0,0,0,0.5);
}

.indicator, .indicator-selected {
	display: inline-block;
	width: 20px;
	height: 20px;
	border-radius: 10px;
	border: 1px solid black;
	margin-right: 10px;
}

.indicator {
	background-color: grey;
}

.indicator-selected {
	background-color: yellow;
}

.button-text {
	display: inline-block;
}
<div class="switch-buttons-container" id="systems-selection-box"> 
	<div class="button-div selected" id="system1">
		<div class="indicator-selected"> </div>
		<div class="button-text">System 1</div>
	</div>
	<div class="button-div" id="system2">
		<div class="indicator"> </div>
		<div class="button-text">Sys 2</div>
	</div>
	<div class="button-div" id="system3">
		<div class="indicator"> </div>
		<div class="button-text">3</div>
	</div>
</div>

Как вы можете видеть, это заполняет всю ширину экрана, а не делает кнопки настолько широкими, насколько это необходимо.

Обратите внимание, что текстовое содержимое кнопок не известно во время разработки, и есть другие области страницы, которые имеют различные требования к ширине, поэтому это не может быть ограничено в элементе body.

Я предполагаю, что Мне нужно что-то исправить в классе .switch-buttons-container, но я искал и искал и пробовал все виды, но просто не могу понять это правильно.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...