Html - I want to create a format as shown in the image below with CSS. Currently trying with flexbox

PotatoSucksAtCoding
November 8, 2023
147 views
0 votes
2 Answers

I am trying to come up with the format in the image using flexbox, but currently my navbar is in a column not row. Am unsure of how to fix this or if I should be using grid/another way to come up with the format. I managed to do it by setting the display individually(setting display to inline-block on nav bar, footer etc) but am wondering if there is a more efficient way to do so/or my current idea of doing it is wrong. I tried grid using a 4×3 making it "header header header header" "nav nav nav nav" and so on but i did not know how to make the main fill up the row it was taking with only 3 sections.

body {
  background-color: white;
  font-family: 'Markazi Text', 'serif';
  text-align: center;
  display: flex;
  flex-flow: column wrap;
  justify-content: stretch;
}

header>img {
  width: 25%;
}

nav>ul {
  list-style: none;
  background-color: grey;
  flex-flow: row wrap;
}

nav>li {
  padding: 5px;
  flex-basis: auto;
}

main article {}

.foot {}

<!DOCTYPE html>
<html lang="en">

<head>
  <title>Little Lemon</title>
  <link href="styles.css" rel="stylesheet">
</head>

<body>
  <header>
    <img src="Images/Asset [email protected]" alt="Little Lemon Logo">
  </header>
  <nav>
    <ul class name="uList">
      <li class name="list"><a href="index.html">Home</a></li>
      <li class name="list"><a href="menu.html">Menu</a></li>
      <li class name="list"><a href="book.html">Book</a></li>
      <li class name="list"><a href="about.html">About</a></li>
    </ul>
  </nav>
  <main>
    <h1>Main</h1>
    <section class="article">section1</section>
    <section class="article">section2</section>
    <section class="article">section3</section>
  </main>
  <footer>
    <h1 class="foot">footer1</h1>
    <h1 class="foot">footer2</h1>
  </footer>
</body>

</html>

Answers

You can refer to this code and let me know it it works. I guess I made it correct and will be useful to you. Thank you.

body {
  background-color: white;
  font-family: 'Markazi Text', 'serif';
  text-align: center;
  /* display: flex; */
  /* flex-flow: column wrap; */
  /* justify-content: stretch; */
}

header img {
  width: 25%;
  border: 2px solid black;
  margin: 20px auto;
}

nav ul {
  list-style: none;
  background-color: grey;
  display: grid;
  grid-template-columns: repeat(4, 300px);
  width: 80%;
  margin: 20px auto;
}

nav li a {
  text-decoration: none;
}

nav li {
  padding: 20px;
  /* flex-basis: auto; */
}

main {
  border: 2px solid black;
  margin: auto;
  width: 70%;
}

section {
  display: flex;
  width: 70%;
  margin: auto;
  gap: 50px;
}

section div {
  display: flex;
  border: 2px solid black;
  height: 150px;
  margin: 20px auto;
  width: 33%;
  /* width: 50%; */
}

footer {
  display: flex;
  /* border: 2px solid black; */
  margin: auto;
  width: 80%;
  gap: 10px;
}

.foot {
  border: 2px solid black;
  margin: auto;
  width: 80%;
}

<header>
  <img src="Images/Asset [email protected]" alt="Little Lemon Logo">
</header>
<nav>
  <ul class name="uList">
    <li class name="list"><a href="index.html">Home</a></li>
    <li class name="list"><a href="menu.html">Menu</a></li>
    <li class name="list"><a href="book.html">Book</a></li>
    <li class name="list"><a href="about.html">About</a></li>
  </ul>
</nav>
<main>
  <h1>Main</h1>
</main>
<section>
  <div class="article">Section1</div>
  <div class="article">Section2</div>
  <div class="article">Section3</div>
</section>
<!-- <section class="article">section1</section>
      <section class="article">section2</section>
      <section class="article">section3</section> -->
<footer>
  <div class="foot">
    <h1>footer1</h1>
  </div>
  <div class="foot">
    <h1>footer2</h1>
  </div>
</footer>

First of all let me suggest some good resources that should help you with the Flexbox concept:

Flexbox docs on MDN.
Basic concepts of flexbox on MDN.
CSS flexible box layout on MDN.
A Complete Guide to Flexbox on CSS-Tricks.

Now, let me showcase a simple attempt to accomplish your desired design which you can build upon and tinker with it.

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
  padding: 8px 20px;
  border: 2px solid red;
}

.logo-wrapper {
  text-align: center;
  margin-bottom: 20px;
  border: 2px solid red;
}

.logo-wrapper .logo {
  max-width: 100%;
  max-height: 50px;
  vertical-align: middle;
  object-fit: cover;
}

.navbar {
  display: flex;
  list-style: none;
  margin-bottom: 15px;
  border: 2px solid red;
}

.navbar .nav-item {
  flex: 1 0 auto;
  text-align: center;
}

.main-page {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  padding: 6px 15px;
  margin-bottom: 20px;
  border: 2px dashed red;
}

.main-page .main-area {
  flex-grow: 1;
  margin-bottom: 20px;
  padding: 8px;
  border: 2px solid red;
}

.main-page .cards-wrapper {
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  flex-wrap: nowrap;
}

.main-page .cards-wrapper .card {
  flex: 0 0 30%;
  padding: 6px;
  border: 2px solid red;
}

footer {
  display: flex;
  flex-wrap: nowrap;
}

footer .footer-item {
  flex: 1 0 50%;
}

footer .date {
  text-align: right;
}

<header>
  <div class="logo-wrapper">
    <img src="https://via.placeholder.com/250x80" alt="Logo" class="logo">
  </div>
  <ul class="navbar">
    <li class="nav-item"><a href="#">Link 1</a></li>
    <li class="nav-item"><a href="#">Link 2</a></li>
    <li class="nav-item"><a href="#">Link 3</a></li>
    <li class="nav-item"><a href="#">Link 4</a></li>
  </ul>
</header>
<main class="main-page">
  <section class="main-area">
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Odit blanditiis dolorum suscipit, expedita voluptatem quo doloribus! Unde qui, deserunt iste mollitia, veniam maxime quo corporis nam reiciendis vitae modi sunt?
    Laudantium inventore laboriosam doloremque ullam perferendis fugit repudiandae, eum dicta distinctio architecto soluta! Repudiandae, delectus. Aperiam esse dolorem blanditiis, sit voluptatum laudantium hic soluta. Cupiditate enim similique facilis ut pariatur.
    Totam incidunt soluta deleniti cumque neque veritatis sed eveniet iusto ducimus dolor explicabo quisquam, nemo autem voluptatum maiores voluptate quam possimus aut sequi ipsa beatae nam provident. Tempora, doloribus quasi?
    Quas provident maiores sunt earum saepe tempora aperiam necessitatibus doloremque inventore adipisci recusandae quam, natus est qui molestias distinctio, dolorem nisi exercitationem sit, similique architecto sequi. Non similique quisquam consequuntur!
    Ipsa facilis harum ea sit repellendus! At itaque ea voluptas quas doloribus exercitationem magnam voluptate id suscipit, iste, a quae consectetur. Ut autem neque natus non deleniti odit placeat doloribus?
    Minima sit consequatur sed amet a nobis doloremque excepturi minus nemo officia. Laboriosam, recusandae esse. Voluptatum tempora repellat earum at temporibus voluptatibus ipsum, accusantium autem inventore eaque velit eligendi nulla!
    Molestias incidunt optio autem dolorum magni ex consequuntur recusandae laborum repellat eos pariatur dignissimos quisquam fugit beatae distinctio commodi deserunt mollitia aliquid expedita, id sunt atque, magnam rem. Veritatis, sed?
    Vitae nam soluta iste minima ratione. Reiciendis quos error ipsam delectus in assumenda magnam quibusdam deleniti, sequi repellat soluta dicta, maxime quisquam sint inventore officiis quaerat ex commodi iure? Libero!
    Explicabo in porro quo nisi libero itaque necessitatibus, eligendi quisquam repellat eum soluta commodi earum cupiditate dolores neque quam perferendis eos voluptates cumque, velit blanditiis iusto adipisci. Commodi, dignissimos molestias.
    Error quod laudantium assumenda, fuga quam labore hic culpa, dignissimos totam incidunt repellat iste numquam porro ad facere quisquam mollitia velit? Itaque eaque nemo nisi ipsum veritatis quia quas accusamus.
  </section>
  <div class="cards-wrapper">
    <div class="card">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Doloribus, dolor praesentium! Nam error ipsa delectus magnam minima id facere? Iste et provident sequi inventore odio soluta eius ab, quam porro?</div>
    <div class="card">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Doloribus, dolor praesentium! Nam error ipsa delectus magnam minima id facere? Iste et provident sequi inventore odio soluta eius ab, quam porro?</div>
    <div class="card">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Doloribus, dolor praesentium! Nam error ipsa delectus magnam minima id facere? Iste et provident sequi inventore odio soluta eius ab, quam porro?</div>
  </div>
</main>
<footer>
  <p class="footer-item copyright">Copyright &copy; Someone</p>
  <p class="footer-item date">2023</p>
</footer>

The borders are only set to visually demonstrate how flexbox and its components work and to outline each section so they can be easily seen and understood.

And as I said, this is just an attempt that you will hopefully find useful and that’ll allow you to build upon and have your own ides.

Keep in mind that the above snippet does not cover some cases that you might want to keep in mind when you build websites such as responsiveness.

And finally, I recommend looking at the different CSS libraries and frameworks out there, such as bootstrap, tailwind…, and check how they implement and use their own flexbox utilities as I think this will help you to have a better idea on how flexbox work.

Please signup or login to give your own answer.

Click here to cancel reply.

Html – I want to create a format as shown in the image below with CSS. Currently trying with flexbox

Answers