Flex Box表现不尽如人意

Question

所以我一直在这里寻找解决我的问题的方法，但一直没有运气，我很难理解是什么导致我的底部的一个按钮缩小而其他按钮很好

我尝试了align-self: end，但是失败了，搜索到的SO似乎对列不起作用，有人推荐margin-top: auto。我也尝试过，即使它现在位于底部，它也会像其他按钮/ div一样缩小。

＆＃13;

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

让我知道你们的想法，好像我是初学者我已经花了数小时研究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>