I am having trouble aligning multiple div items when using flex box. mainly for div id= 'flow'. I want the content header and content itself to be aligned vertically while being presented in rows/ below is how it should look. Tried using justify content center and even tried wrapping it multiple ways but since they are separate entities they do align vertically only horizontally
<!DOCTYPE HTML>
<html lang="en-us">
<head>
<meta charset="utf-8" />
<title>Pacific Trails Resort :: Activities </title>
<link rel="stylesheet" href="pacific.css">
<style type="text/css">
#wrapper {
display: grid;
background-color: #FFFFFF;
margin-left: auto;
margin-right: auto;
min-width: 960px;
max-width: 2048px;
box-shadow: 3px 3px 3px #333333;
}
body {
background-color: #90c7e3;
background: linear-gradient(white ,#90c7e3);
background-repeat: no-repeat;
}
header {
background-color: #002171;
color: #FFFFFF;
background-image: url(sunset.jpg);
background-position: right;
background-repeat: no-repeat;
text-align: center;
}
header ul {
margin: 0;
padding: 0;
}
h1 {
padding-top: .5em;
padding-bottom: .5em;
margin: 0;
}
h2 {
color: #1976D2;
text-shadow: 1px 1px #CCCCCC;
}
h3{
color: #00003;
}
nav {
background-color: #ffffff;
font-weight: bold;
padding: 0;
padding-left: 0;
text-align: center;
margin: 0;
}
nav ul{
list-style: none;
margin: 0;
padding: 0;
}
nav li{
list-style: none;
border-bottom: 1px solid #00008b;
}
nav a {
list-style-type: none;
text-decoration: none;
padding: 8px;
color: #002171;
}
ul{
list-style-image: url(marker.gif);
}
dt{
color: #002171;
}
main{
padding-top: 1px;
padding-right: 20px;
padding-bottom: 20px;
padding-left: 20px;
display: block;
}
.contact{
font-size: 90%;
}
footer{
font-size: 75%;
font-style:italic;
padding: 2em;
text-align: center;
}
#homehero{
height: 300px;
background-image: url(coast.jpg);
background-size: 100% 100%;
background-repeat: no-repeat;
}
#yurthero{
height: 300px;
background-image: url(yurt.jpg);
background-size: 100% 100%;
background-repeat: no-repeat;
}
#trailhero{
height: 300px;
background-image: url(trail.jpg);
background-size: 100% 100%;
background-repeat: no-repeat;
}
.Resort{
color: #1976D2;
font-weight:bold;
}
@media (min-width: 600px){
nav ul{
flex-direction: row;
flex:none;
justify-content: space-around;
border: none;
}
nav li{
border-bottom: none;
display: inline;
text-align: center;
}
nav a {
margin-right: 2em;
margin-left; 2em;
text-decoration: none;
padding: 10px;
}
#flow{
display: flex;
flex-direction: row;
flex: 1;
justify: center;
align-items: center;
}
}
</style>
</head>
<body>
<div id="wrapper">
<header>
<h1>Pacific Trails Resort</h1>
</header>
<nav>
<a href="index.html">Home</a>
<a href="yurts.html">Yurts</a>
<a href="activities.html">Activities</a>
<a href="index.html">Reservations</a>
</nav>
<div id="trailhero">
</div>
<main>
<h2>Activities at Pacific Trails</h2>
<div id="flow">
<h3>Hiking</h3>
<p>Pacific Trails Resort has 5 miles of hiking trails and is adjacent to a state park. Go alone or join one of our guided hikes </p>
<h3>Kayaking</h3>
<p>Ocean kayaks are available for guest use</p>
<h3>Bird Watching</h3>
<p>While anytime is a good time for bird watching at Pacific Trails, we offer guided birdwatching trips at sunrise several times a week.</p>
</div>
</main>
<footer>
<small>
<i>Copy right © 2022 Pacific Trails Resort</i><br />
<a href="mailto:[email protected]"> [email protected]</a>
</small>
</footer>
</div>
</body>
</html>
thank you
CodePudding user response：
I've made some changes to your code by wrapping each content in a div and giving it class card. I also corrected your #flow styling where you put justify instead of justify-content.
<main>
<div class='title'>
<h2>Activities at Pacific Trails</h2>
</div>
<div id="flow">
<div class='card'>
<h3>Hiking</h3>
<p>Pacific Trails Resort has 5 miles of hiking trails and is adjacent to a state park. Go alone or join one of our guided hikes </p>
</div>
<div class='card'>
<h3>Kayaking</h3>
<p>Ocean kayaks are available for guest use</p>
</div>
<div class='card'>
<h3>Bird Watching</h3>
<p>While anytime is a good time for bird watching at Pacific Trails, we offer guided birdwatching trips at sunrise several times a week. </p>
</div>
</main>
CSS:
.title {
align-items: center;
justify-content: center;
text-align: center;
}
#flow{
display: flex;
flex: 1;
justify-content: center;
align-items: center;
}
.card{
text-align: center;
width: 500px;
}
CodePudding user response：
Inside #flow you want 3 columns, instead you have six items. Why not wrap each heading-paragraph pair inside a div?
<div id="flow">
<div class='column'>
<h3>Hiking</h3>
<p>Pacific Trails Resort has 5 miles of hiking trails and is
adjacent to a state park. Go alone or join one of our guided hikes </p>
</div>
<div class='column'>
<h3>Kayaking</h3>
<p>Ocean kayaks are available for guest use</p>
</div>
<div class='column'>
<h3>Bird Watching</h3>
<p>While anytime is a good time for bird watching at Pacific Trails, we offer guided birdwatching trips at sunrise several times a week.
</p>
</div>
</div>
From there styling should be straight forward
#flow{
display:flex;
justify-content: space-around;
}
.column{
flex: 0 0 25%;
max-width: 20em;
}
Example in codepen here.
But if you want all 3 columns to always be the same width, it might make more sense to use display:grid on #flow.