Applying flexbox to create a visually appealing design

Question

Applying flexbox to create a visually appealing design

Is there a way to achieve this layout using flexbox without relying on grid due to limited support in IE11? I want to be able to easily add or remove small divs without adding more containers.

To see the desired layout, check out this image: Desired Layout image

.container {
  display: flex;
}

.large {
  height: 200px;
  width: 150px;
  border: 1px solid black;
}

.small {
  height: 100px;
  width: 150px;
  border: 1px solid black;
}

<div class="container">
  <div class="large">1</div>
  <div class="small">2</div>
  <div class="small">3</div>
  <div class="small">4</div>
  <div class="small">5</div>
</div>

css

Answer 1

Answer №1

When it comes to layout design, I prefer using css-grid over flexbox. Here's a simple example to demonstrate:

If you're interested in learning more about css-grid, you can check out this helpful tutorial. For the latest specifications on css-grid, you can refer to the official documentation here.

.container {
  display: grid;
  grid-template-columns: 60px 60px 60px 60px 60px;
  grid-template-rows: 30px 30px;
  grid-auto-flow: column;
}
.container div {
  border:1px solid gold;
}
.item-a {
  grid-column: 1;
  grid-row: 1 / 3;
}

<section class="container">
  <div class="item-a">item-a</div>
  <div class="item-b">item-b</div>
  <div class="item-c">item-c</div>
  <div class="item-d">item-d</div>
  <div class="item-e">item-e</div>
</section>

Answer 2

When it comes to layout design, I prefer using css-grid over flexbox. Here's a simple example to demonstrate:

If you're interested in learning more about css-grid, you can check out this helpful tutorial. For the latest specifications on css-grid, you can refer to the official documentation here.

.container {
  display: grid;
  grid-template-columns: 60px 60px 60px 60px 60px;
  grid-template-rows: 30px 30px;
  grid-auto-flow: column;
}
.container div {
  border:1px solid gold;
}
.item-a {
  grid-column: 1;
  grid-row: 1 / 3;
}

<section class="container">
  <div class="item-a">item-a</div>
  <div class="item-b">item-b</div>
  <div class="item-c">item-c</div>
  <div class="item-d">item-d</div>
  <div class="item-e">item-e</div>
</section>

Answer 3

Answer №2

For organizing the layout of smaller divs within a parent div, I chose to create a container with the class .small_cont and utilized properties like margin and flex-wrap. However, I would recommend considering using a grid layout for better alignment.

.container {
  display: flex;
}

.large {
  height: 220px;
  width: 150px;
  border: 1px solid black;
  box-sizing:border-box;
  margin:10px;
}

.small_cont {
  width:340px;
  display:flex;
  height:200px;
  flex-wrap:wrap;
}

.small {
  height: 100px;
  width: 150px;
  border: 1px solid black;
  box-sizing:border-box;
  margin:10px;
}

<div class="container">
  <div class="large">1</div>
  <div class="small_cont">
    <div class="small">2</div>
    <div class="small">3</div>
    <div class="small">4</div>
    <div class="small">5</div>
  </div>
</div>

Answer 4

For organizing the layout of smaller divs within a parent div, I chose to create a container with the class .small_cont and utilized properties like margin and flex-wrap. However, I would recommend considering using a grid layout for better alignment.

.container {
  display: flex;
}

.large {
  height: 220px;
  width: 150px;
  border: 1px solid black;
  box-sizing:border-box;
  margin:10px;
}

.small_cont {
  width:340px;
  display:flex;
  height:200px;
  flex-wrap:wrap;
}

.small {
  height: 100px;
  width: 150px;
  border: 1px solid black;
  box-sizing:border-box;
  margin:10px;
}

<div class="container">
  <div class="large">1</div>
  <div class="small_cont">
    <div class="small">2</div>
    <div class="small">3</div>
    <div class="small">4</div>
    <div class="small">5</div>
  </div>
</div>

Applying flexbox to create a visually appealing design

Answer №1

Answer №2

Similar questions

Applying a specified style to a pseudo element using the ::after selector to display an

Is the <style> tag effective when placed within other elements?

Getting rid of the outline on <html> while tabbing in Firefox

Guide on utilizing regular expressions to match CSS selectors

"Enhancing the spacing between background images through CSS: A guide to using the repeat property

Position an image on the top left corner of a div's border

CSS-Only tooltip that adjusts size dynamically

Filtering rows of an HTML table that contain links in the `<href>` column data in real time

Is there a way to convert basic less code into CSS using VS2012 and Web Essentials?

Just starting out with CSS and coding. Setting up radio buttons and divs for a simple beginner's gallery

The word-break CSS property is ineffective in this situation

focusing on a specific category within a CSS identifier

Content located on the right-hand side of the menu

The width of the Bootstrap row decreases with each subsequent row

Align the logo in the center of the navbar with items placed on either side

Having trouble with GSAP Scrolltrigger PIN functionality in Next.js?

Ensuring the image is properly sized to fit the screen and enabling the default zoom functionality

Solving the issue of IE7 div overflow-y: scroll causing content to be obscured by the scrollbar

CSS Only Sidebar Dropdown (without using Bootstrap)

Which element is able to utilize the inline-block style?