CSS - Flexbox/alignment

Hi guys! I´m learning CSS after HTML, still need a lot of practice so sometimes I struggle to identify the issue however I keep trying. I´m in a middle of an exercise and which for some may be easy I´m stuck in… This is suppose to be aligned on the bottom as part of the final result and I´m considering flex grow but does not seem to be doing much and I´m not sure what I´m doing wrong.

Thank you in advance for the support


)

just to add one more image which is the final one

Please post the code (HTML and CSS) not images of code.


What is “this”? Please be a little more specific with your question.

flex-grow is used on flex items. The parent of the i element must be a flex container.

html:

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<title>FlexBox Nav</title>
		<link
			rel="stylesheet"
			href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"
		/>
		<link rel="stylesheet" href="css/style.css" />
	</head>
	<body>
		<div class="app-wrap">
			<header class="app-header">
				<a href="#" class="button">
					<i class="fa fa-arrow-left"></i>
					Back
				</a>

				<h1>FlexBox App Layout</h1>

				<a href="#" class="button">
					<i class="fa fa-cog"></i>
				</a>
			</header>

			<div class="content">
				<p>
					Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur,
					beatae?
				</p>

				<p>
					Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloremque
					deserunt quisquam repellendus quia autem saepe culpa fugit nulla
					distinctio hic, beatae cum, perspiciatis iusto natus nesciunt itaque
					quaerat, earum ex.
				</p>

				<img src="https://avatars.githubusercontent.com/u/20506354?v=4" />

				Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam quo ipsa
				excepturi sunt, quibusdam, quos!

				<p>
					Lorem ipsum dolor sit amet, consectetur adipisicing elit. Modi natus
					dolores placeat esse ratione fugiat voluptatum impedit blanditiis
					consequuntur quos debitis consequatur ea beatae fuga perspiciatis
					vero, mollitia, molestias omnis. Dolorum quas iusto, molestiae ut at
					architecto dolorem nulla est!
				</p>

				<p>
					lorem ipsum dolor sit amet, consectetur adipisicing elit. nulla, illum
					ea consectetur!
				</p>

				<p>
					lorem ipsum dolor sit amet, consectetur adipisicing elit. cumque ea,
					mollitia sequi quo consequatur dolor itaque numquam, aut tempore
					suscipit, ut quaerat. qui!
				</p>

				<p>
					lorem ipsum dolor sit amet, consectetur adipisicing elit. aliquam id
					rem numquam, illum atque ducimus maiores assumenda dolorum ut.
				</p>

				<p>
					lorem ipsum dolor sit amet, consectetur adipisicing elit. accusantium
					cum unde animi, obcaecati, minima odio.
				</p>

				<p>
					lorem ipsum dolor sit amet, consectetur adipisicing elit. nulla, illum
					ea consectetur!
				</p>

				<p>
					lorem ipsum dolor sit amet, consectetur adipisicing elit. cumque ea,
					mollitia sequi quo consequatur dolor itaque numquam, aut tempore
					suscipit, ut quaerat. qui!
				</p>

				<p>
					lorem ipsum dolor sit amet, consectetur adipisicing elit. aliquam id
					rem numquam, illum atque ducimus maiores assumenda dolorum ut.
				</p>

				<p>
					lorem ipsum dolor sit amet, consectetur adipisicing elit. accusantium
					cum unde animi, obcaecati, minima odio.
				</p>

				<p>
					lorem ipsum dolor sit amet, consectetur adipisicing elit. nulla, illum
					ea consectetur!
				</p>

				<p>
					lorem ipsum dolor sit amet, consectetur adipisicing elit. cumque ea,
					mollitia sequi quo consequatur dolor itaque numquam, aut tempore
					suscipit, ut quaerat. qui!
				</p>

				<p>
					lorem ipsum dolor sit amet, consectetur adipisicing elit. aliquam id
					rem numquam, illum atque ducimus maiores assumenda dolorum ut.
				</p>

				<p>
					lorem ipsum dolor sit amet, consectetur adipisicing elit. accusantium
					cum unde animi, obcaecati, minima odio.
				</p>
			</div>

			<div class="icon-bar">
				<a href="#">
					<i class="fa fa-home"></i>
					Home
				</a>
				<a href="#">
					<i class="fa fa-bell"></i>
					Notifications
				</a>
				<a href="#">
					<i class="fa fa-envelope"></i>
					Messages
				</a>
				<a href="#">
					<i class="fa fa-user"></i>
					Me
				</a>
			</div>
		</div>
	</body>
</html>

css

html {
  box-sizing: border-box;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

html {
  font-size: 10px;
}

body {
  font-family: sans-serif;
  margin: 0;
  font-size: 1.5rem;
  background-image: linear-gradient(260deg, #2376ae 0%, #c16ecf 100%);
}

a {
  color: white;
  text-decoration: none;
}

a.button {
  background: rgba(0, 0, 0, 0.1);
  padding: 1rem 1.5rem;
  border-radius: 4px;
}

.app-wrap {
  max-width: 540px;
  height: 90vh;
  margin: 5vh auto 5vh auto;
  border: 10px solid rgba(0, 0, 0, 0.8);
  border-bottom-width: 70px;
  border-radius: 10px;
  box-shadow: 0 0 50px rgba(0, 0, 0, 0.3);
  display: flex;
  flex-direction: column;
}

.content {
  padding: 20px;
  background: white;
  box-shadow: inset 0 5px 0 rgba(0, 0, 0, 0.1);
  line-height: 1.6;
  align-items: end;
  overflow-y: scroll;
  flex-direction: column;
}

.content img {
  max-width: 50%;
  float: left;
  margin-right: 10px;
}

.icon-bar a {
  text-align: center;
  padding: 1.5rem;
  border-left: 1px solid rgba(0, 0, 0, 0.1);
  background: #efca51;
  color: rgba(0, 0, 0, 0.5);
}

.icon-bar a:first-child {
  border-left: 0;
}

.icon-bar a:first-child,
.icon-bar a:hover {
  border-bottom: 5px solid rgba(0, 0, 0, 0.1);
}

.icon-bar {
  border-top: 1px solid #e6e6e6;
}

.icon-bar i {
  display: block;
  font-size: 2.5rem;
  color: white;
  text-shadow: 3px 3px 0 rgba(0, 0, 0, 0.1);
  padding-bottom: 1rem;
  display: flex;
  flex-direction: row;
  justify-content: end;
  align-self: auto;
  margin-top: auto;
  flex-grow: 4; /* default 0 */
  height: 100%;
}

.app-header {
  background: #f0cb45;
  color: rgba(0, 0, 0, 0.5);
  padding: 1rem;
}

this I mean the bottom part the icon bar

.icon-bar needs to be a flexbox container and its direct child is the a element, so that is the element what would have flex-grow on it.

1 Like