使用Flex尝试根据图像获取盒子

Question

我正在使用flex属性。我想要左侧的1.框和2.＆3。在右边。

.flex{
display:flex;
flex-wrap:wrap;
width:400px;
}
.flex > div{
flex: 0 0 50%;
}
.flex .one{
order:1;
background: red;
}
.flex .two{
order:2;
background: green;
}
.flex .three{
order:3;
background: blue;
flex:0 0 50%;
}

<div class="flex">
	<div class="one">1</div>
    <div class="three">3</div>
    <div class="two">2</div>
</div>

我尝试过，但无法按照图片附件获取。

Answer 1

使用justify-content: flex-end（将 flex项沿 flex轴对齐，该轴在行flex-direction中是水平的）-参见下面的演示：

.flex {
  display: flex;
  flex-wrap: wrap;
  width: 400px;
  justify-content: flex-end; /* added */
}

.flex>div {
  flex: 0 0 50%;
}

.flex .one {
  order: 1;
  background: red;
}

.flex .two {
  order: 2;
  background: green;
}

.flex .three {
  order: 3;
  background: blue;
  flex: 0 0 50%;
}

<div class="flex">
  <div class="one">1</div>
  <div class="three">3</div>
  <div class="two">2</div>
</div>

Answer 2

您可以使用margin-left: auto;向右推块3吗？或如前所述更改justify-content-这取决于您要如何进行：）

.flex{
   display:flex;
   flex-wrap:wrap;
   width:400px;
}
.flex > div{
   flex: 0 0 50%;
}
.flex .one{
   order:1;
   background: red;
}
.flex .two{
   order:2;
   background: green;
}
.flex .three{
   order:3;
   background: blue;
   flex:0 0 50%;
   margin-left: auto; /* update */
}

<div class="flex">
    <div class="one">1</div>
    <div class="three">3</div>
    <div class="two">2</div>
</div>

Answer 3

<style>
    .box_container {
        width: max-content;
    }

    .row1 {
        display: flex;
    }

    .box1,
    .box2,
    .box3 {
        height: 40px;
        width: 40px;
        background: green;
    }

    .box3 {
        float: right;
    }
</style>



<div class="box_container">
    <div class="row1">
        <div class="box1"></div>
        <div class="box2"></div>
    </div>
    <div class="box3"></div>
</div>

Answer 4

您可能不希望使用flex来查看网格：

.grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, 1fr);
}

.g1 {
  grid-column: 1;
  background: green;
}

.g2 {
  grid-column: 2;
  background: red;
}

.g3 {
  grid-column: 2;
  grid-row: 2;
  background: blue;
}

<div class="grid">
  <div class="g1">1</div>
  <div class="g2">2</div>
  <div class="g3">3</div>
</div>

或使用模板：

.grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template:
    "g1 g2"
    "g3 g4"; 
}

.g1 {
  grid-area: g1;
  background: green;
}

.g2 {
  grid-area: g2;
  background: red;
}

.g3 {
  grid-area: g4;
  background: blue;
}

<div class="grid">
  <div class="g1">1</div>
  <div class="g2">2</div>
  <div class="g3">3</div>
</div>