flexbox - czy da radę ustawić ostatni element w kolumnie.

Question

Cześć, mam pytanie ponieważ mam diva, który ma w sobie 3 divy ustawione jako row. Czy da radę aby ten ostatni div wyświetlał się pod tymi dwoma divami?

Pozdrawiam i z góry dziękuję.

Comments

dasz nam kod? w tedy bardziej prawdopodobne że ktoś pomoże

Answer 1

Można również użyć po prostu właściwości flex i ustawić stałą szerkość prawego boxa a lewy automatycznie będzie dostosowywał się do swojego "rodzica" konternera. Zmodyfikowany kod VBService:

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

.container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  width: 90vw;
  border: 2px solid red;
}
.box-1 {
  flex: 1 1 auto;
  background-color: orange;
}
.box-2 {
  flex: 0 0 100px;
  background-color: green;
}
.box-3 {
  flex: 1 1 100%;
  background-color: yellow;
}
[class^="box"] {
  padding: 20px;
}
[class^="box"]::before {
  content: attr(class);
}

Comments

Można też tak

.container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  width: 90vw;
  height: 50vh;
  border: 2px solid red;
}
.box-1, .box-2 {
  flex: 50%;
}
.box-2 {
  background-color: green;
}
.box-3 {
  flex: 100%;
  background-color: yellow;
}
[class^="box"]::before {
  content: attr(class);
  padding: 1em;
}

 

Answer 2

Możesz użyć np. flex-wrap: wrap; i odpowiednio ustawić width i height "wewnętrznych" div-ów.

Przykład

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

.container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  width: 90vw;
  height: 50vh;
  border: 2px solid red;
}
.box-1, .box-2 {
  width: 50%;
  height: 50%;
}
.box-1 {
  background-color: orange;
}
.box-2 {
  background-color: green;
}
.box-3 {
  width: 100%;
  height: 50%;
  background-color: yellow;
}


[class^="box"]::before {
  content: attr(class);
  position: relative;
  top: 1em;
  left: 1em;
  font: 900 1.2em monospace;
}