Utilizing flexbox for grid positioning

Looking to optimize the positioning of a list of items using flexbox. I've managed to solve it with the usual methods, but now I want to enhance my code by utilizing better tools like flexbox. Here is what I currently have:

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

However, I aspire to achieve the following layout with Flexbox:

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

HTML

<div
  v-for="item in list"
  :key="item.id+Math.random()"
  class="neo-form-toggle-list__item neo-form-toggle neo-form-toggle--checkbox slideout--checkbox container--checkbox"
>
  <div class="checkbox--group">
    <input
      class="neo-form-toggle__field"
      type="checkbox"
      :id="item.id"
      name="rule"
      :checked="checked"
    />
    <label
      class="neo-form-toggle__label checkbox--label rule"
      :class="item.templateRule.title.length > 5 ? 'rule__big--title' : 'rule__small--title'"
      :for="item.id">
      {{ item.templateRule.title }}
    </label>
    <p class="item">{{ item.templateRule.description }}</p>
  </div>
</div>

My css bellow:

.neo-form-toggle__label {
  &.checkbox--label {
    text-transform: none;
    font-weight: normal;
    font-size: 12px;
    float: right;
    margin-right: 3%;
    &.rule {
      font-weight: bold;
      &__big--title {
        margin-right: 1rem;
      }
      &__small--title {
        margin-right: 5rem;
      }
    }
  }
}

.neo-form-toggle {
  &.neo-form-toggle--checkbox {
    &.checkbox--margin {
      margin-right: 2.25rem !important;
    }
  }
}

.neo-form-toggle {
  &.neo-form-toggle--checkbox {
    &.slideout--checkbox {
      width: 13rem;
    }
    &.checkbox--margin {
      margin-right: 2.25rem !important;
    }
    &.container--checkbox {
      margin-right: 5rem;
      margin-bottom: 0;
    }
  }
}

Although I've started learning about Flexbox, I'm still struggling to grasp its functionality. Any guidance on enhancing this CSS would be greatly appreciated.

htmlcssvue.jsflexboxgrid

Answer №1

Check out this straightforward example:

<head>
    <title>Simple Web Design</title>
    <meta charset="UTF-8" />
    <style>
      * {
        margin: 0;
        padding: 0;
      }

      .container {
        display: flex;
        width: 300px;
        padding: 5px;
      }

      .checkbox {
        margin: 2px 6px 0 0;
      }

      .labels {
        flex: 1;
      }

      .label__title {
        font-size: 14px;
      }

      .label__subtitle {
        font-size: 11px;
      }
    </style>
  </head>

  <body>
    <div class="container">
      <input type="checkbox" class="checkbox" />
      <div class="labels">
        <p class="label__title">Featured Product</p>
        <p class="label__subtitle">Updated on a monthly basis</p>
      </div>
    </div>
  </body>

Answer №2

In my opinion, Grid would be the best choice for layout design. It's important to remember that flexbox is limited to one-dimensional positioning (either row or column, not both). Grid, on the other hand, is specifically designed for creating 2-dimensional layouts. You can define rows, columns, and more with ease using features like "grid-template-areas," making grid building incredibly straightforward.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

How can you target the current component and use createElement within VueJS?

My goal is to gain access to the current component and generate a div within it once the component is ready. The following is the code snippet for my component, which demonstrates my attempt to target the this element and create a new div within it using ...

javascriptvue.jsvuejs2

What are the best techniques for positioning text next to images in HTML and CSS?

I have attempted to position the text in close proximity to the images as shown in the picture below (to allow for spacing in the middle). As depicted in the image, the "AVENUE FOR GROWTH" and "NETWORKING OPPORTUNITIES" texts are near Man's hand and w ...

htmlcss

CSS-loader imported styles failing to function properly

Constructing a React 16.4.0 application with Bootstrap 4.1.1. My approach involves using css-loader alongside webpack to generate personalized stylesheets for each component within my app. Despite my efforts, I am facing the issue where my custom styles ...

javascriptcssreactjswebpackbootstrap-4

Field for user input featuring a button to remove the entry

I am attempting to add a close icon to a bootstrap 3 input field, positioned on the top right of the input. Here is what I have tried so far: https://jsfiddle.net/8konLjur/ However, there are two issues with this approach: The placement of the × ...

javascriptjqueryhtmlcsstwitter-bootstrap

Manipulating deeply nested state data in Vuex actions can be a challenge

When working in the store, I have an action that updates certain data. The action is structured like this: setRoomImage({ state }, { room, index, subIndex, image }) { state.fullReport.rooms[room].items[index].items[subIndex].image = image; co ...

javascriptvue.jsvuex

Showing events from MySQL database on Vue.js Fullcalendar

I am trying to fetch events from my MySQL database and pass them to my Vue component to be displayed on the FullCalendar. However, the event array is being populated with a full HTML document. Below is my EventController: public function getEvents() { ...

javascriptmysqllaravelvue.jsvue-component

Transformation and swapping between two distinct visuals

In this scenario, there are two images: a boat and a plane. The specific effect desired is as follows: The boat should animate from left to right, while the plane remains hidden. Once the boat reaches the middle of the screen, it should disappear and the p ...

htmlcsscss-animations

Save room for text that shows up on its own

I am currently dealing with a situation where text appears conditionally and when it does, it causes the rest of the page to be pushed down. Does anyone know the best way to reserve the space for this text even when it's not visible so that I can pre ...

javascriptcssvue.js

What is the best way to retrieve the value of a custom attribute from a dropdown list using either JavaScript or jQuery?

I have a dropdown list on a web form and I need to have a 'hidden' variable for each item in the list that can be retrieved using the onchange event on the client side. To achieve this, after databinding the dropdownlist, I am setting a custom at ...

javascriptjqueryhtmlasp.net

Navigable Vuetify Tabs with routing capabilities

Within my Vue application, I have a page that contains various tabs. My goal is to display different tabs based on the routes being accessed. To achieve this functionality, I followed an answer provided in this link. Overall, it's working well! I ca ...

javascriptvue.jstabsvuetify.jsvue-router

Choose the "toolbar-title" located within the shadow root of ion-title using CSS

Within Ionic, the ion-title component contains its content wrapped in an additional div inside the shadow-dom. This particular div is designated with the class .toolbar-title. How can I target this div using a SCSS selector to modify its overflow behavior? ...

cssangularionic-frameworksassshadow-dom

What is the best way to insert horizontal padding into each line of a single sentence that is wrapped on multiple lines

Below is the code snippet I am working with: <div><p><span>... highlighted text ...</span></p><p>Chapter info</p></div> Here is a screenshot of how it currently appears: I am looking for a way to add paddi ...

csshtml

Bring in styles from the API within Angular

My goal is to retrieve styles from an API and dynamically render components based on those styles. import { Component } from '@angular/core'; import { StyleService } from "./style.service"; import { Style } from "./models/style"; @Component({ ...

javascriptcssangularsass

Dealing with customized protocol responses in JavaScript

My web server is set up to return a response like: HTTP/1.1 302 Found message://ActualMessage While this setup works seamlessly for UI clients like Android and iOS, I'm faced with the challenge of handling this case on a web browser. For instance, ...

javascripthtml

Select multiple options by checking checkboxes in each row using React

Is it possible to display multiple select checkboxes with more than one per row? For example, I have four options [a, b, c, d]. How can I arrange it to have 2 options per row, totaling 2 rows instead of having 1 option per row for 4 rows? ☑a ☑b ☑c ...

javascriptcssreactjsmaterial-ui

Is there a method to delay the loading of a webpage until an image has fully loaded (preloading)?

How can I ensure that an image used in a preloader is loaded before the other contents on my website? <div class="overlay" id="mainoverlay"> <div class="preloader" id="preloader"> <img src="images/logo128.png" id="logo-p ...

javascripthtml

Extract a specific pattern from a string using Javascript

Currently, I am attempting to extract a specific string from a tag in javascript using the following code: document.querySelector('.title h2').textContent However, when I execute this code, I am getting a result that includes unnecessary double ...

javascripthtml

Interactive Timeline - Adjust color on click

I am having trouble implementing a timeline and changing the color when clicking on different states. Can anyone help me figure out what the issue is or how I can achieve this? I intended to give each state a different color, but sadly, it didn't wor ...

htmlcssangulartypescript

Utilizing pseudo elements (after) in CSS with the font family in Font Awesome 6 fails to function properly

I am attempting to create the div using CSS after pseudo-element and I have included the Unicode in the content with the font family being "Font Awesome 6 Free". However, nothing is showing up and I'm not sure why. Can someone please assist me? Here i ...

htmlcssfont-awesome

Having difficulty with submitting a modal form via Ajax Request in Laravel

Attempting to delete a user based on input from a modal form, but encountering difficulty. No error message is showing in the console. As a beginner, struggling to pinpoint the mistake. Error: Ajax request issue. Code snippet below: Blade modal section: ...

phphtmljqueryajaxlaravel