Flex Box не ведет себя так, как ожидалось

Question

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

Я попытался align-self: end, но это не удалось, и при поиске SO, который, кажется, не работает для столбцов, и кто-то рекомендовал margin-top: auto.Я тоже это попробовал, и хотя теперь он находится внизу, он сжимается в отличие от других кнопок / делений.

.menuItem {
	width: 85%;

	margin: 4px;

	text-align: center;
	background-color: #084154;
	border-radius: 20px;
	opacity: 0.5;
}

.menuItem:hover {
	opacity: 0.8;
	cursor: pointer;
}

.border {
	width: 80%;

	padding: 2px;
	margin-right: auto;
	margin-bottom: 4px;
	margin-left: auto;

	border-bottom: 2px solid #f4f4f4;
}

#menuPanel {
	width: 20%;
	height: 100%;

	font-size: 18px;
	background-color: #336699;
}

#content {
	width: 80%;
	height: 100%;
}

/* ALL MY FLEX */

/* Flex Containers */

.flexVertContainer {
  display: flex;
  flex-direction: column;
}

.flexHoriContainer {
  display: flex;
  flex-direction: row;
}

/* Flex Items */

.flexItem {
  flex: 0;
}

.flexGrownItem {
  padding: 20px;
  flex: 0.5 0.5 auto;
  max-width: 50%;
}

/* Flex Addons */
/* FLEX VERT CENTER AND HORI CENTER R BACKWARDS */

.EXTflexContainerItemsHoriCenter {
  /* Auto Aligns Horizontally */
  justify-content: center;
}

.EXTflexContainerItemsHoriSpaced {
  /* Spaces Objects That Are Aligned */
  justify-content: space-around;
}

.EXTflexContainerItemsVertCenter {
  /* Auto Aligns Vertically */
  align-items: center;
}

<div id="menuPanel" class="flexVertContainer EXTflexContainerItemsVertCenter">
			<br>
			<div class="menuItem flexItem">
				<p>Dashboard</p>
			</div>
			<div class="border"></div>

			<div class="menuItem flexItem">
				<p>Manage</p>
			</div>
			<div class="border"></div>

			<div class="menuItem flexItem">
				<p>Users</p>
			</div>
			<div class="border"></div>

			<div class="menuItem flexItem">
				<p>Billing</p>
			</div>

			<div class="menuItem flexItem" style="margin-top: auto">
					<a href="/core/sessions/logout.php">Log Out</a>
			</div>
			<br>
		</div>

		<div id="content">

		</div>

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

Answer 1

В другой кнопке вы используете тег p.у него есть поле браузера по умолчанию.

, а в a браузер не добавляет поля по умолчанию.поэтому его размер зависит от его содержания.если вы хотите сделать ссылку похожей на другую кнопку, вам нужно добавить к ней padding.

.menuItem {
	width: 85%;

	margin: 4px;

	text-align: center;
	background-color: #084154;
	border-radius: 20px;
	opacity: 0.5;
}

.menuItem:hover {
	opacity: 0.8;
	cursor: pointer;
}

.border {
	width: 80%;

	padding: 2px;
	margin-right: auto;
	margin-bottom: 4px;
	margin-left: auto;

	border-bottom: 2px solid #f4f4f4;
}

#menuPanel {
	width: 20%;
	height: 100%;

	font-size: 18px;
	background-color: #336699;
}

#content {
	width: 80%;
	height: 100%;
}

/* ALL MY FLEX */

/* Flex Containers */

.flexVertContainer {
  display: flex;
  flex-direction: column;
}

.flexHoriContainer {
  display: flex;
  flex-direction: row;
}

/* Flex Items */

.flexItem {
  flex: 0;
}

.flexGrownItem {
  padding: 20px;
  flex: 0.5 0.5 auto;
  max-width: 50%;
}

/* Flex Addons */
/* FLEX VERT CENTER AND HORI CENTER R BACKWARDS */

.EXTflexContainerItemsHoriCenter {
  /* Auto Aligns Horizontally */
  justify-content: center;
}

.EXTflexContainerItemsHoriSpaced {
  /* Spaces Objects That Are Aligned */
  justify-content: space-around;
}

.EXTflexContainerItemsVertCenter {
  /* Auto Aligns Vertically */
  align-items: center;
}

.menuItem a {
display: block;
padding: 1em 0;
}

<div id="menuPanel" class="flexVertContainer EXTflexContainerItemsVertCenter">
			<br>
			<div class="menuItem flexItem">
				<p>Dashboard</p>
			</div>
			<div class="border"></div>

			<div class="menuItem flexItem">
				<p>Manage</p>
			</div>
			<div class="border"></div>

			<div class="menuItem flexItem">
				<p>Users</p>
			</div>
			<div class="border"></div>

			<div class="menuItem flexItem">
				<p>Billing</p>
			</div>

			<div class="menuItem flexItem" style="margin-top: auto">
					<a href="/core/sessions/logout.php">Log Out</a>
			</div>
			<br>
		</div>

		<div id="content">

		</div>