Using HTML and CSS to create a flexbox layout with multiple rows

Question

Using HTML and CSS to create a flexbox layout with multiple rows

.ent__food__image {
  display: flex;
  justify-content: end;
}

.bev__food__image {
  display: flex;
  justify-content: end;
}

.kids__food__image {
  display: flex;
  justify-content: end;
}

<main class="flex-container">
  <!-- Entrees -->
  <div class="ent ent--container">
    <div class="ent__food__image">
      <img src="/food images/nutburger.jpeg" alt="nutburger" />
    </div>
    <h3>Entrees</h3>
    <div class="ent__item__1">
      <h4>Millet Burger</h4>
      <p>
        Millet patty served on whole wheat bun, with sauce, onions, pickles, tomatoes, romaine and sprouts. <span>7.59</span>
      </p>
    </div>
    <div class="ent__item__2">
      <h4>Nutburger</h4>
      <p>
        Nutmeat patty served on a whole wheat bun with sauce, onions, pickles, tomatoes, romaine, and sprouts.
        <span>7.59</span>
      </p>
    </div>
    <div class="ent__item__3">
      <h4>Vegan Burrito</h4>
      <p>
        Whole wheat tortilla with basmati rice, black or pinto beans, onions, tomatoes, hot sauce, sour cream, romaine and sprouts.
        <span>6.99</span>
      </p>
    </div>
  </div>

  <!-- Beverages -->
  <div class="bev bev--container">
    <div class="bev__food__image">
      <img src="/food images/strawberry-smoothie.jpg" alt="Strawberry Smoothie" />
    </div>
    <h3>Beverages</h3>
    <div class="bev__item__1">
      <h4>Lemonade</h4>
      <p>Small - 3.49 Large - 3.79</p>
    </div>
    <div class="bev__item__2">
      <h4>Pinapple</h4>
      <p>Small - 3.49 Large - 3.79</p>
    </div>
    <div class="bev__item__3">
      <h4>Strawberry Smoothie</h4>
      <p>Small - 4.89 Large - 6.99</p>
    </div>
    <div class="bev__item__4">
      <h4>Coffee</h4>
      <p>1.79</p>
    </div>
  </div>

  <!-- Kids Menu -->
  <div class="kids kids--container">
    <div class="kids__food__image">
      <img src="/food images/grilled-cheese.jpg" alt="Grilled Cheese" />
    </div>
    <h3>
      Kids Menu
      <span class="kids__description">Includes mini cookie and juice box</span
              >
            </h3>
            <div class="kids__item__1">
              <h4>Grilled Cheese</h4>
              <p>5.29</p>
            </div>
            <div class="kids__item__2">
              <h4>Quesadilla</h4>
              <p>5.29</p>
            </div>
            <div class="kids__item__3">
              <h4>PGJ</h4>
              <p>5.29</p>
            </div>
            <div class="kids__item__4">
              <h4>Shake (Choco, van, straw)</h4>
              <p>4.10</p>
            </div>
          </div>
        </main>

Hello, I am studying flexbox and feeling uncertain about how to implement it effectively. Is there a way to arrange the text and images in a side-by-side layout similar to the image below? Alternatively, should I explore using grid to address this issue? I'm also unsure if my current HTML structure supports achieving this desired layout.

https://i.sstatic.net/XjFtY.png

html css flexbox

Answer 1

Answer №1

Are you manually coding CSS? I must say, using Bootstrap 5 is a great decision as it fully supports flexbox. Check out this link

Here's how your HTML structure should look:

<main class="flex-container">
  <div class="container">
   <div class="row">
    <div class="col">
      Column
    </div>
    <div class="col">
      Column
    </div>
    <div class="col">
      Column
    </div>
   </div>
  </div>

This will greatly benefit you. Also, avoid using double dashes and underscores excessively, while they may work, it's not considered good practice.

Answer 2

Are you manually coding CSS? I must say, using Bootstrap 5 is a great decision as it fully supports flexbox. Check out this link

Here's how your HTML structure should look:

<main class="flex-container">
  <div class="container">
   <div class="row">
    <div class="col">
      Column
    </div>
    <div class="col">
      Column
    </div>
    <div class="col">
      Column
    </div>
   </div>
  </div>

This will greatly benefit you. Also, avoid using double dashes and underscores excessively, while they may work, it's not considered good practice.

Answer 3

Answer №2

While your question was quite broad, I hope this information provides some help to you.

.test_css {
    display: flex;
    flex direction: column; /*columns*/
    flex-wrap: wrap; /*if needed*/
    align-items: flex-end; /*puts the class at the bottom, add only if you want that space between the boxes 1 & 2 and the sketched ones below*/
}
or
.test_css2 {
display: grid;
justify-content: center; /*center*/
align-content: end; /*bottom, adds that gap between the two sets of boxes*/
grid-template-columns: 12px 12px 12px; /*how big & how many columns*/
grid-template-rows: 12px 12px 12px; /*how big & how many rows*/
}

It's hard to gauge their effectiveness without more specific details, but this should give you a starting point.

If you're still getting comfortable with flexbox, I suggest checking out to refresh your memory on commands and understand any differences you might be unsure about. Additionally, consider incorporating both grid and flexbox in your CSS rather than solely relying on flexbox. I personally use as a reference for grids. Best of luck with your project!

Answer 4

While your question was quite broad, I hope this information provides some help to you.

.test_css {
    display: flex;
    flex direction: column; /*columns*/
    flex-wrap: wrap; /*if needed*/
    align-items: flex-end; /*puts the class at the bottom, add only if you want that space between the boxes 1 & 2 and the sketched ones below*/
}
or
.test_css2 {
display: grid;
justify-content: center; /*center*/
align-content: end; /*bottom, adds that gap between the two sets of boxes*/
grid-template-columns: 12px 12px 12px; /*how big & how many columns*/
grid-template-rows: 12px 12px 12px; /*how big & how many rows*/
}

It's hard to gauge their effectiveness without more specific details, but this should give you a starting point.

If you're still getting comfortable with flexbox, I suggest checking out to refresh your memory on commands and understand any differences you might be unsure about. Additionally, consider incorporating both grid and flexbox in your CSS rather than solely relying on flexbox. I personally use as a reference for grids. Best of luck with your project!

Using HTML and CSS to create a flexbox layout with multiple rows

Answer №1

Answer №2

Similar questions

Using CSS units such as vw, vh, or percentage to specify height is not possible

HTML5 Local Storage allows web developers to store data locally within

Display the text area when the "Yes" radio button is clicked, while it remains hidden either by default or when the "No" radio button is selected

What methods can I use to make sure the right side of my React form is properly aligned for a polished appearance?

Refresh your webpage automatically without the need to manually refresh after clicking a button using AJAX in HTML and PHP!

Tips for personalizing tooltips in Bootstrap 4

Inconsistency in field generation in WordPress Contact Form 7 causing issues

The e.currentTarget attribute in Material UI buttons is a key element that

Troubleshooting inactive CSS hover animation

Ensuring various conditions with ngIf

User interface for creating a platform resembling Product Hunt or Reddit

Material-UI React Native components: Injecting Styles without Props

Is there a way to adjust the transparency of the reflection while utilizing the -webkit-box-reflect property?

Styling the active selection in nav class with bold attribute in Bootstrap/AngularJs

Changing <br> to a newline ( ) using JSOUP

The NextRouter failed to mount

Arrange the table by adding and editing before and after appending

What is the process of uploading a video and showcasing it on an HTML page?

Using TypeScript and Angular to modify CSS properties

Use the double data type in MySQL to handle null values when blank form fields are submitted