Используя 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>