Question

如何使用flex进行此布局？左列包含动态高度

的文本

右列有2个部分...与顶部对齐的文本和与底部对齐的文本。是否可以使用flex？

------------------------------------------
| XXXXXXXXXXXXXXX   | XXXXXXXXXXXXXXXXXX |
| XXXXXXXXXXXXXXX   | XX Align To Top XX |
| XXXXXXXXXXXXXXX   | XXXXXXXXXXXXXXXXXX |
| XXXXXXXXXXXXXXX   |                    |
| Dynamic Height    |       Empty        |
| XXXXXXXXXXXXXXX   |                    |
| XXXXXXXXXXXXXXX   | XXXXXXXXXXXXXXXXXX |
| XXXXXXXXXXXXXXX   |  Align to bottom   |
| XXXXXXXXXXXXXXX   | XXXXXXXXXXXXXXXXXX |
------------------------------------------

Answer 1

我已经完成了你想要的东西

＆＃13;

.container {
  display: flex;
}

.left {
  background: red;
  padding: 10px;
}

.right {
  background: green;
  padding: 10px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

＆＃13;

<div class="container">
  <div class="left">left content <br> left content <br> left content <br> left content</div>
  <div class="right">
    <div class="top">
      top content
    </div>
    <div class="bottom">
      bottom content
    </div>
  </div>
</div>

＆＃13;

Answer 2

＆＃13;

* {
  box-sizing: border-box;
}

div {
  border: 1px solid black;
}

.parent,
.child {
  display: flex;
}

.child {
  flex: 1;
  flex-direction: column;
  justify-content: space-between;
}

＆＃13;

<div class="parent">
  <div class="child">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque, totam! Voluptatum, necessitatibus. Reiciendis m ipsum dolor sit amet, consectetur adipisicing elit. Cumque, totam! Voluptatum, necessitatibus. Reiciendis m ipsum dolor sit amet, consectetur adipisicing elit. Cumque, totam! Voluptatum, necessitatibus. Reiciendis m ipsum dolor sit amet, consectetur adipisicing elit. Cumque, totam! Voluptatum, necessitatibus. Reiciendis quia nisi, quos vero architecto amet, incidunt sint tempore fugit, nulla in, saepe perspiciatis eos eius odit!</div>
  <div class="child">
    <div class="top">Top</div>
    <div class="bottom">Bottom</div>
  </div>

</div>

＆＃13;

Answer 3

我认为这是你想要实现的目标。

您需要使用flex containers。在这种情况下，我使用了main flex容器。正确的弹性项目我把它变成另一个弹性容器来实现你想要的东西。

希望这会有所帮助：＆gt;

＆＃13;

.main {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
}

.col{
  width: 50vw;
  height: 300px;
  background: red;
  border: 1px solid grey;
}

.col2 {
   display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: space-between;
}
.col2 div {
  height: 100px;
  width: 100%;
   background: blue;
}

＆＃13;

<div class="main">
  <div class="col col1">

  </div>
  <div class="col col2">
    <div class="top"></div>
    <div class="bottom"></div>
  </div>
</div>

＆＃13;

Answer 4

您将拥有2个区块作为父级，而在第二个区块中您将拥有有3个街区。
在父块上，您需要使用display: flex 把你的2个父块放在一行。
在第二个父块中，您还需要使用display: flex和flex-direction: column来制作内部3块列视图。您还需要添加justify-content: space-between来划分3个街区。

.parent {
  display: flex;
  color: #fff;
}

.child__first,
.child__second {
  width: 50vw;
  text-align: center;
}

.child__first {
  height: 200px;
  background-color: #ff00ff;
}

.child__second {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 300px;
  background-color: #ff0000;
}

<div class="parent">
  <div class="child__first">Child First</div>
  <div class="child__second">
    <div class="child__second-top">Child Second Top</div>
    <div class="child__second-middle">Child Second Middle</div>
    <div class="child__second-bottom">Child Second Bottom</div>
  </div>
</div>

Flex - 内容与底部对齐

4 个答案: