主页 / 问题 / 1046621
Accepted
Linne
Asked:2020-11-15 23:33:48 +0800 CST2020-11-15 23:33:48 +0800 CST

如何在flex上实现列偏移？

  • 772

请告诉我如何使用 css flexbox 来实现它。两个块最大宽度：30em。用最少的代码非常可取。

.parent {
   display: flex;
   flex-wrap: wrap;
}
.parent li {
   flex: 1 1 320px;
   max-width: 30em;
}
 .parent > li {
   flex-direction: column-reverse;
}

 <ul class="parent">
    <li>Column One</li>
    <li>Column Two</li>
 </ul>

这不是它的工作原理。底线是桌面上的块A在左侧，在移动设备上。

在此处输入图像描述

css

1 个回答

  1. Best Answer

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

body {
  font-family: "Roboto", sans-serif;
  line-height: 1.2;
}

.container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 450px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  margin: -25px;
}

.block {
  width: 50%;
  padding: 25px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 36px;
  text-transform: uppercase;
}

.block:nth-child(1) {
  background: #3498db;
}

.block:nth-child(2) {
  background: #2ecc71;
}

@media screen and (max-width: 767px) {
  .block {
    width: 100%;
  }
  .block:nth-child(1) {
    order: 2;
  }
}
    <div class="container">
  <div class="block">a</div>
  <div class="block">b</div>
</div>

    • 1

相关问题