如何使用 flex 创建自定义马赛克 [英] How to create a custom mosaic with flex

问题描述

我正在尝试使用 flex 创建一个自定义马赛克，如下所示:

除了框 4 的高度和宽度加倍外，所有框的宽度都是父容器的三分之一.

我设法达到以下条件:

#push-group-element ul,#push-group-element ul li{列表样式类型:无；边距:0；填充:0；显示:弹性；弹性:1 0 33.33%；对齐内容:居中；}.mosaic-容器{显示:弹性；宽度:100%；高度:100%；溢出:隐藏；列表样式类型:无；背景:红色；flex-wrap: 包裹;}.mosaic-item {位置:相对；填充:10px；背景:绿色；轮廓:1px纯黑色；}.mosaic-item {高度:150px；}#push-group-element .mosaic-item:nth-child(4) {弹性:1 0 66.6%；高度:300px；}

<ul class="mosaic-container"><li class="mosaic-item item-small" data-item="1">1</li><li class="mosaic-item item-small" data-item="2">2</li><li class="mosaic-item item-small" data-item="3">3</li><li class="mosaic-item item-big" data-item="4">4</li><li class="mosaic-item item-small" data-item="5">5</li><li class="mosaic-item item-small" data-item="6">6</li><li class="mosaic-item item-small" data-item="7">7</li><li class="mosaic-item item-small" data-item="8">8</li><li class="mosaic-item item-small" data-item="8">9</li>

我的问题是第 6 号框没有换行并落到下一行，因此创建了一个新的不需要的行，其中包含框 9 和一个空心空间，6 应该是.

总结一下:根据我附上的草图，我如何使盒子 6 包裹在数字 5 和 7 8 9 以下的同一行中.提前谢谢你

解决方案

添加如下所示的 span 元素:

#push-group-element ul,#push-group-element ul li {列表样式类型:无；边距:0；填充:0；显示:弹性；弹性:1 0 33.33%；对齐内容:居中；}.mosaic-容器{显示:弹性；宽度:100%；高度:100%；溢出:隐藏；列表样式类型:无；背景:红色；flex-wrap: 包裹;}.mosaic-item {位置:相对；填充:10px；背景:绿色；轮廓:1px纯黑色；}.mosaic-item {高度:150px；}#push-group-element .mosaic-item:nth-child(4) {弹性:1 0 66.6%；高度:300px；}

<ul class="mosaic-container"><li class="mosaic-item item-small" data-item="1">1</li><li class="mosaic-item item-small" data-item="2">2</li><li class="mosaic-item item-small" data-item="3">3</li><li class="mosaic-item item-big" data-item="4">4</li><span style="width: 33.3%;"><li class="mosaic-item item-small" data-item="5">5</li><li class="mosaic-item item-small" data-item="6">6</li></span><li class="mosaic-item item-small" data-item="7">7</li><li class="mosaic-item item-small" data-item="8">8</li><li class="mosaic-item item-small" data-item="8">9</li>

或使用 float 属性代替 flex 的类似结果(无需更改 HTML 结构).

#push-group-element ul,#push-group-element ul li {列表样式类型:无；边距:0；填充:0；对齐内容:居中；宽度:33.3%；向左飘浮;}#push-group-element ul {宽度:100%；}.mosaic-容器{宽度:100%；高度:100%；溢出:隐藏；列表样式类型:无；背景:红色；}.mosaic-item {位置:相对；填充:10px；背景:绿色；轮廓:1px纯黑色；}.mosaic-item {高度:150px；}#push-group-element .mosaic-item:nth-child(4) {宽度:66.6%；高度:300px；}

<ul class="mosaic-container"><li class="mosaic-item item-small" data-item="1">1</li><li class="mosaic-item item-small" data-item="2">2</li><li class="mosaic-item item-small" data-item="3">3</li><li class="mosaic-item item-big" data-item="4">4</li><li class="mosaic-item item-small" data-item="5">5</li><li class="mosaic-item item-small" data-item="6">6</li><li class="mosaic-item item-small" data-item="7">7</li><li class="mosaic-item item-small" data-item="8">8</li><li class="mosaic-item item-small" data-item="8">9</li>

I am trying to create a custom mosaic with flex that would look like this:

All the boxes have a width of third of the parent container except box 4 that is doubled in height and width.

I managed to get to the following condition:

#push-group-element ul,
#push-group-element ul li{
  list-style-type: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex: 1 0 33.33%;
  justify-content: center;
}

.mosaic-container {
  display: flex;
  width: 100%;
  height: 100%;
  overflow: hidden;
  list-style-type: none;
  background: red;
  flex-wrap: wrap;
}
.mosaic-item {
  position: relative;
  padding: 10px;
  background: green;
  outline: 1px solid black;
}
.mosaic-item {
  height: 150px;
}
#push-group-element .mosaic-item:nth-child(4) {
  flex: 1 0 66.6%;
  height: 300px;
}

<div id="push-group-element" style="width:600px">
  <ul class="mosaic-container">
    <li class="mosaic-item item-small" data-item="1">1</li>
    <li class="mosaic-item item-small" data-item="2">2</li>
    <li class="mosaic-item item-small" data-item="3">3</li>
    <li class="mosaic-item item-big" data-item="4">4</li>
    <li class="mosaic-item item-small" data-item="5">5</li>
    <li class="mosaic-item item-small" data-item="6">6</li>
    <li class="mosaic-item item-small" data-item="7">7</li>
    <li class="mosaic-item item-small" data-item="8">8</li>
    <li class="mosaic-item item-small" data-item="8">9</li>
  </ul>
</div>

My problem is that box number 6 is not wrapping and falls to the next line, thus creating a new unwanted row with box 9 and a hollow space where 6 is supposed to be.

To sum it up: How do I make box 6 wrap below number 5 and 7 8 9 are in the same row according to the sketch I attached. thankyou in advance

解决方案

Add a span element like shown below:

#push-group-element ul,
#push-group-element ul li {
  list-style-type: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex: 1 0 33.33%;
  justify-content: center;
}

.mosaic-container {
  display: flex;
  width: 100%;
  height: 100%;
  overflow: hidden;
  list-style-type: none;
  background: red;
  flex-wrap: wrap;
}

.mosaic-item {
  position: relative;
  padding: 10px;
  background: green;
  outline: 1px solid black;
}

.mosaic-item {
  height: 150px;
}

#push-group-element .mosaic-item:nth-child(4) {
  flex: 1 0 66.6%;
  height: 300px;
}

<div id="push-group-element" style="width:600px">
  <ul class="mosaic-container">
    <li class="mosaic-item item-small" data-item="1">1</li>
    <li class="mosaic-item item-small" data-item="2">2</li>
    <li class="mosaic-item item-small" data-item="3">3</li>
    <li class="mosaic-item item-big" data-item="4">4</li>
    <span style="width: 33.3%;">
      <li class="mosaic-item item-small" data-item="5">5</li>
      <li class="mosaic-item item-small" data-item="6">6</li>
    </span>
    <li class="mosaic-item item-small" data-item="7">7</li>
    <li class="mosaic-item item-small" data-item="8">8</li>
    <li class="mosaic-item item-small" data-item="8">9</li>
  </ul>
</div>

OR Similar result using float property instead of flex(no need of changing HTML strucutre).

#push-group-element ul,
#push-group-element ul li {
  list-style-type: none;
  margin: 0;
  padding: 0;
  justify-content: center;
  width: 33.3%;
  float: left;
}

#push-group-element ul {
  width: 100%;
}

.mosaic-container {
  width: 100%;
  height: 100%;
  overflow: hidden;
  list-style-type: none;
  background: red;
}

.mosaic-item {
  position: relative;
  padding: 10px;
  background: green;
  outline: 1px solid black;
}

.mosaic-item {
  height: 150px;
}

#push-group-element .mosaic-item:nth-child(4) {
  width: 66.6%;
  height: 300px;
}

<div id="push-group-element" style="width:600px">
  <ul class="mosaic-container">
    <li class="mosaic-item item-small" data-item="1">1</li>
    <li class="mosaic-item item-small" data-item="2">2</li>
    <li class="mosaic-item item-small" data-item="3">3</li>
    <li class="mosaic-item item-big" data-item="4">4</li>
    <li class="mosaic-item item-small" data-item="5">5</li>
    <li class="mosaic-item item-small" data-item="6">6</li>
    <li class="mosaic-item item-small" data-item="7">7</li>
    <li class="mosaic-item item-small" data-item="8">8</li>
    <li class="mosaic-item item-small" data-item="8">9</li>
  </ul>
</div>

这篇关于如何使用 flex 创建自定义马赛克的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！