Can’t find the right flexbox for this layout [closed]

问题

I would like to design a website as the picturr shows my idea. I would like to organize my page with flexbox but I don’t know how I can do it...

回答1:

Use grid for that, something like that will get you the desired layout -

 .container {  
        display: grid;
          grid-template-columns: 1fr 1fr;
          grid-template-rows: 1fr 1fr;
          grid-template-areas: "area-1 area-3" "area-2 area-3";
        }
        
        .child-1 {
          grid-area: area-1;
        }
        .child-2 {
          grid-area: area-2;
        }
        .child-3 {
          grid-area: area-3;
        }

 <div class="container">
      <div class="child-1">One</div>
      <div class="child-2">Two</div>
      <div class="child-3">Three</div>
  </div>

Grid is for two-dimensional layouts, flex for one-dimensional.

回答2:

Use this guide to learn and test concepts of flexbox https://css-tricks.com/snippets/css/a-guide-to-flexbox/

The following is an example for your request

#container {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  height: 300px;
  margin: 10px 25%;
}

.block {
  text-align: center;
  border: 2px solid #bbb;
  padding: 50px 30px;
  margin: 2px;
  flex-grow: 1;
}


/*this to reorder div#2 on required place*/
.block:nth-child(2){
  order: 2;
}

<div id="container">
  <div class="block">1</div>
  <div class="block">2</div>
  <div class="block">3</div>
</div>

回答3:

Try this

.container {
    display: flex;
    flex-direction: row;
}
.container-1 {
    display: flex;
    flex-direction: column;
    width: 200px;
}
.container-1 div {
    flex-grow: 1;
    border: 1px solid black;
}
.container-1, .container-2 {
    width: 200px;
    height: 200px;
    border: 1px solid black;
}

<div class="container">
    <div class="container-1">
        <div> 1 </div>
        <div> 2 </div>
    </div>
    <div class="container-2"> 3 </div>
</div>

回答4:

You could use grid layout. Try to use below code.

.container {
  width: 100vw;
  height: 100vh;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  grid-gap: 10px;
  
 }
 
 .item1 {
  grid-row: 1;
  }
 
 .grid-item {
  border: 1px solid black;
  text-align: center;
  background: blue;
  color: white;
  padding: 10px;
 }
 
 .sub-container {
  grid-row: 1/span 2;
}

<div class="container">
  <div class="grid-item item1">1</div>
  <div class="grid-item sub-container">2</div>
  <div class="grid-item">3</div>
</div>

回答5:

Hope so this may help you:

.flex-container {
  display: flex;
height: 100vh;
  background-color: DodgerBlue;
}

.flex-container > div {
  background-color: #f1f1f1;
  width: 100%;
  margin: 10px;
  text-align: center;
  line-height: 75px;
  font-size: 30px;
}
.div1 {
  border: 1px solid red;
  height: 50%;
}
.div2 {
    border: 1px solid green;
    height: 50%;
}

<h1>Flexible Boxes</h1>

<div class="flex-container">
  <div class="first-half">
     <div class="div1">1</div>
     <div class="div2">3</div>
  </div>
  <div class="div3">2</div>
</div>

回答6:

Add two internal div's into a separate div and then use flex-box like this,

* {
  margin: 0;
  padding: 0;
}

.container {
  display: flex;
  height: 100vh;
  width: 100vw;
}

.container-1 {
  flex-basis: 50%;
}

.container-1 div {
  height: 50vh;
}

.container-1 div:nth-child(even) {
  background-color: purple;
}

.container-1 div:nth-child(odd) {
  background-color: red;
}

.container-2 {
  flex-basis: 50%;
  background-color: green;
}

<div class="container">
    <div class="container-1">
        <div> 1 </div>
        <div> 3 </div>
    </div>
    <div class="container-2"> 2 </div>
</div>

来源：https://stackoverflow.com/questions/59854987/can-t-find-the-right-flexbox-for-this-layout

标签

css

flexbox