I am trying to have 4 little squares inside one big square. Those small squares need to be position at the bottom inside a big square, so far my code looks like this
.date-grid button {
position: relative;
border: 0;
width: 7.5ch;
height: 7.5ch;
background-color: #A1A100;
margin-bottom: 2px;
}
.smallHolder {
display: flex;
align-items: flex-end;
}
.small1 {
border: 0;
width: 2.5ch;
height: 2.5ch;
background-color: gray;
}
.small2 {
width: 2.5ch;
height: 2.5ch;
background-color: red;
}
.small3 {
border: 0;
width: 2.5ch;
height: 2.5ch;
background-color: green;
}
.small4 {
border: 0;
width: 2.5ch;
height: 2.5ch;
background-color: blue;
}
<div class="date-grid">
<button class="vrs22">
<time>3</time>
<div class="smallHolder">
<div class="small1"></div>
<div class="small2"></div>
<div class="small3"></div>
<div class="small4"></div>
</div>
</button>
</div>
What I am trying to achieve is this:
Idea is to have this flexible so if I have 2 small squares, results should be like this:
Can anybody try to help me with this?
This could be a solution. It uses your unaltered HTML, but with completely different CSS. Changing the height and width of the outer container will still result in 4 small squares, as long as width and height of the outer container are equal.
* {
box-sizing: border-box;
}
.date-grid {
width: 100px;
height: 100px;
background: #eee;
display: flex;
flex-direction: column;
}
.vrs22 {
width: 100%;
height: 100%;
background: green;
border: none;
padding: 0;
}
time {
display: block;
height: 75%;
font-size: 24px;
display: flex;
flex-direction: column;
justify-content: center;
}
.smallHolder {
width: 100%;
height: 25%;
display: flex;
}
.smallHolder>div {
width: 25%;
height: 100%;
flex-shrink: 0;
flex-grow: 1;
}
.small1 {
background: #fb0;
}
.small2 {
background: #bf0;
}
.small3 {
background: #f07;
}
.small4 {
background: #ba0;
}
<div class="date-grid">
<button class="vrs22">
<time>3</time>
<div class="smallHolder">
<div class="small1"></div>
<div class="small2"></div>
<div class="small3"></div>
<div class="small4"></div>
</div>
</button>
</div>
With different container size:
* {
box-sizing: border-box;
}
.date-grid {
width: 150px;
height: 150px;
background: #eee;
display: flex;
flex-direction: column;
}
.vrs22 {
width: 100%;
height: 100%;
background: green;
border: none;
padding: 0;
}
time {
display: block;
height: 75%;
font-size: 24px;
display: flex;
flex-direction: column;
justify-content: center;
}
.smallHolder {
width: 100%;
height: 25%;
display: flex;
}
.smallHolder>div {
width: 25%;
height: 100%;
flex-shrink: 0;
flex-grow: 1;
}
.small1 {
background: #fb0;
}
.small2 {
background: #bf0;
}
.small3 {
background: #f07;
}
.small4 {
background: #ba0;
}
<div class="date-grid">
<button class="vrs22">
<time>3</time>
<div class="smallHolder">
<div class="small1"></div>
<div class="small2"></div>
<div class="small3"></div>
<div class="small4"></div>
</div>
</button>
</div>
And a variation with only two squares at the bottom:
* {
box-sizing: border-box;
}
.date-grid {
width: 100px;
height: 100px;
background: #eee;
display: flex;
flex-direction: column;
}
.vrs22 {
width: 100%;
height: 100%;
background: green;
border: none;
padding: 0;
}
time {
display: block;
height: 50%;
font-size: 24px;
display: flex;
flex-direction: column;
justify-content: center;
}
.smallHolder {
width: 100%;
height: 50%;
display: flex;
}
.smallHolder>div {
width: 25%;
height: 100%;
flex-shrink: 0;
flex-grow: 1;
}
.small1 {
background: #fb0;
}
.small2 {
background: #bf0;
}
<div class="date-grid">
<button class="vrs22">
<time>3</time>
<div class="smallHolder">
<div class="small1"></div>
<div class="small2"></div>
</div>
</button>
</div>
Related
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 9 months ago.
Improve this question
Locked. Comments on this question have been disabled, but it is still accepting new answers and other interactions. Learn more.
I want to create something similar to this one:
... and have it in flex, so it will rearrange. I don't know why I can't get to rearrange it to the right side (it overlaps on top of the chart). See the below what I have got:
I would like it to be at the right side, and occupy the rest of the window. How can I arrange this with CSS?
In simple terms, I would like to have the green container to the right side, and when making smaller the navigator, and the green container to flex and go under the red container. I am trying to do this, but for some reason it’s not happening.
I dont uderstand why the right container goes to right side of the first column.
Here’s my snippet:
* {
margin: 0px;
padding: 0px;
}
.general {
margin: auto;
display: grid;
margin-top: 0%;
width: 100%;
height: 100%;
background-color: #4f6d7a;
}
.enlaces {
float: center;
display: center;
width: 100%;
height: 100px;
background-color: #166088;
}
.tablas_carpetas {
position:grid;
display: flex;
flex-wrap: wrap;
width: 100%;
height: 300px;
background-color: #DBE9EE;
}
.tablas {
position:left;
grid-template-columns: auto;
display: flex;
flex-wrap: wrap;
flex-direction:column;
order: 1;
background-color: #dfc0c0;
height: 300px;
}
.tablas > div {
display:right;
float:right;
background: #ddd;
line-height: 20px;
height: 20px;
margin: 1px;
text-align: center;
}
.tablas_carpetas > .carpetas {
display:flex;
position:left;
order: 2;
height: 100%;
background-color: green;
}
.anuncios{
float: center;
display: center;
width: 100%;
height: 100px;
background-color: red;
}
.pie{
float: center;
display: center;
width: 100%;
height: 100px;
background-color: black;
}
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$(document).ready(function () {
$("#botones").mouseenter(function () {
$("#resto").show();
});
$("#botones").mouseleave(function () {
$("#resto").hide();
});
});
</script>
<div class="general">
<div class="enlaces"></div>
<div class="tablas_carpetas">
<div class="tablas">
<div>AA</div>
<div>AKo</div>
<div>AQo</div>
<div>AJo</div>
<div>ATo</div>
<div>A9o</div>
<div>A8o</div>
<div>A7o</div>
<div>A6o</div>
<div>A5o</div>
<div>A4o</div>
<div>A3o</div>
<div>A2o</div>
<div>AKs</div>
<div>KK</div>
<div>KQo</div>
<div>KJo</div>
<div>KTo</div>
<div>K9o</div>
<div>K8o</div>
<div>K7o</div>
<div>K6o</div>
<div>K5o</div>
<div>K4o</div>
<div>K3o</div>
<div>K2o</div>
<div>AQs</div>
<div>KQs</div>
<div>QQ</div>
<div>QJo</div>
<div>QTo</div>
<div>Q9o</div>
<div>Q8o</div>
<div>Q7o</div>
<div>Q6o</div>
<div>Q5o</div>
<div>Q4o</div>
<div>Q3o</div>
<div>Q2o</div>
<div>AJs</div>
<div>KJs</div>
<div>QJs</div>
<div>JJ</div>
<div>JTo</div>
<div>J9o</div>
<div>J8o</div>
<div>J7o</div>
<div>J6o</div>
<div>J5o</div>
<div>J4o</div>
<div>J3o</div>
<div>J2o</div>
<div>ATs</div>
<div>KTs</div>
<div>QTs</div>
<div>JTs</div>
<div>TT</div>
<div>T9o</div>
<div>T8o</div>
<div>T7o</div>
<div>T6o</div>
<div>T5o</div>
<div>T4o</div>
<div>T3o</div>
<div>T2o</div>
<div>A9s</div>
<div>K9s</div>
<div>Q9s</div>
<div>J9s</div>
<div>T9s</div>
<div>99</div>
<div>98o</div>
<div>97o</div>
<div>96o</div>
<div>95o</div>
<div>94o</div>
<div>93o</div>
<div>92o</div>
<div>A8s</div>
<div>K8s</div>
<div>Q8s</div>
<div>J8s</div>
<div>T8s</div>
<div>98s</div>
<div>88</div>
<div>87o</div>
<div>86o</div>
<div>85o</div>
<div>84o</div>
<div>83o</div>
<div>82o</div>
<div>A7s</div>
<div>K7s</div>
<div>Q7s</div>
<div>J7s</div>
<div>T7s</div>
<div>97s</div>
<div>87s</div>
<div>77</div>
<div>76o</div>
<div>75o</div>
<div>74o</div>
<div>73o</div>
<div>72o</div>
<div>A6s</div>
<div>K6s</div>
<div>Q6s</div>
<div>J6s</div>
<div>T6s</div>
<div>96s</div>
<div>86s</div>
<div>76s</div>
<div>66</div>
<div>65o</div>
<div>64o</div>
<div>63o</div>
<div>62o</div>
<div>A5s</div>
<div>K5s</div>
<div>Q5s</div>
<div>J5s</div>
<div>T5s</div>
<div>95s</div>
<div>85s</div>
<div>75s</div>
<div>65s</div>
<div>55</div>
<div>54o</div>
<div>53o</div>
<div>52o</div>
<div>A4s</div>
<div>K4s</div>
<div>Q4s</div>
<div>J4s</div>
<div>T4s</div>
<div>94s</div>
<div>84s</div>
<div>74s</div>
<div>64s</div>
<div>54s</div>
<div>44</div>
<div>43o</div>
<div>42o</div>
<div>A3s</div>
<div>K3s</div>
<div>Q3s</div>
<div>J3s</div>
<div>T3s</div>
<div>93s</div>
<div>83s</div>
<div>73s</div>
<div>63s</div>
<div>53s</div>
<div>43s</div>
<div>33</div>
<div>32o</div>
<div>A2s</div>
<div>K2s</div>
<div>Q2s</div>
<div>J2s</div>
<div>T2s</div>
<div>92s</div>
<div>82s</div>
<div>72s</div>
<div>62s</div>
<div>52s</div>
<div>42s</div>
<div>32s</div>
<div>22</div>
</div>
<div class="carpetas">
<div class="botones">
<button id="principal_1">Redes Sociales</button>
<div class="resto" hidden>
<button>Facebook</button>
<button>Twitter</button>
<button>LinkedIn</button>
<button>Gooogle</button>
</div>
</div>
</div>
</div>
<div class="anuncios"></div>
<div class="pie"></div>
</div>
Here is what I changed:
.tablas_carpetas {
display: flex;
width: 100%;
height: 600px;
background-color: #DBE9EE;
}
.tablas {
width: 50%;
gap: 1%;
display: flex;
flex-wrap: wrap;
background-color: #dfc0c0;
height: 100%;
}
.tablas > div {
background: #ddd;
display: flex;
justify-content: center;
align-items: center;
line-height: 20px;
height: 35px;
flex: 0 0 6%;
margin: 1px;
text-align: center;
border-radius: 5px;
}
.tablas_carpetas > .carpetas {
width: 50%;
height: 100%;
background-color: green;
}
Here's a complete snippet:
* {
margin: 0px;
padding: 0px;
}
.general {
margin: auto;
display: grid;
margin-top: 0%;
width: 100%;
height: 100%;
background-color: #4f6d7a;
}
.enlaces {
float: center;
display: center;
width: 100%;
height: 100px;
background-color: #166088;
}
.tablas_carpetas {
position:grid;
display: flex;
flex-wrap: wrap;
width: 100%;
height: 300px;
background-color: #DBE9EE;
}
.tablas {
position:left;
grid-template-columns: auto;
display: flex;
flex-wrap: wrap;
flex-direction:column;
order: 1;
background-color: #dfc0c0;
height: 300px;
}
.tablas > div {
display:right;
float:right;
background: #ddd;
line-height: 20px;
height: 20px;
margin: 1px;
text-align: center;
}
.tablas_carpetas > .carpetas {
display:flex;
position:left;
order: 2;
height: 100%;
background-color: green;
}
.anuncios{
float: center;
display: center;
width: 100%;
height: 100px;
background-color: red;
}
.pie{
float: center;
display: center;
width: 100%;
height: 100px;
background-color: black;
}
.tablas_carpetas {
display: flex;
width: 100%;
height: 600px;
background-color: #DBE9EE;
}
.tablas {
width: 50%;
gap: 1%;
display: flex;
flex-wrap: wrap;
background-color: #dfc0c0;
height: 100%;
}
.tablas > div {
background: #ddd;
display: flex;
justify-content: center;
align-items: center;
line-height: 20px;
height: 30px;
flex: 0 0 7%;
margin: 1px;
text-align: center;
border-radius: 5px;
}
.tablas_carpetas > .carpetas {
width: 50%;
height: 100%;
background-color: green;
}
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$(document).ready(function () {
$("#botones").mouseenter(function () {
$("#resto").show();
});
$("#botones").mouseleave(function () {
$("#resto").hide();
});
});
</script>
<div class="general">
<div class="enlaces"></div>
<div class="tablas_carpetas">
<div class="tablas">
<div>AA</div>
<div>AKo</div>
<div>AQo</div>
<div>AJo</div>
<div>ATo</div>
<div>A9o</div>
<div>A8o</div>
<div>A7o</div>
<div>A6o</div>
<div>A5o</div>
<div>A4o</div>
<div>A3o</div>
<div>A2o</div>
<div>AKs</div>
<div>KK</div>
<div>KQo</div>
<div>KJo</div>
<div>KTo</div>
<div>K9o</div>
<div>K8o</div>
<div>K7o</div>
<div>K6o</div>
<div>K5o</div>
<div>K4o</div>
<div>K3o</div>
<div>K2o</div>
<div>AQs</div>
<div>KQs</div>
<div>QQ</div>
<div>QJo</div>
<div>QTo</div>
<div>Q9o</div>
<div>Q8o</div>
<div>Q7o</div>
<div>Q6o</div>
<div>Q5o</div>
<div>Q4o</div>
<div>Q3o</div>
<div>Q2o</div>
<div>AJs</div>
<div>KJs</div>
<div>QJs</div>
<div>JJ</div>
<div>JTo</div>
<div>J9o</div>
<div>J8o</div>
<div>J7o</div>
<div>J6o</div>
<div>J5o</div>
<div>J4o</div>
<div>J3o</div>
<div>J2o</div>
<div>ATs</div>
<div>KTs</div>
<div>QTs</div>
<div>JTs</div>
<div>TT</div>
<div>T9o</div>
<div>T8o</div>
<div>T7o</div>
<div>T6o</div>
<div>T5o</div>
<div>T4o</div>
<div>T3o</div>
<div>T2o</div>
<div>A9s</div>
<div>K9s</div>
<div>Q9s</div>
<div>J9s</div>
<div>T9s</div>
<div>99</div>
<div>98o</div>
<div>97o</div>
<div>96o</div>
<div>95o</div>
<div>94o</div>
<div>93o</div>
<div>92o</div>
<div>A8s</div>
<div>K8s</div>
<div>Q8s</div>
<div>J8s</div>
<div>T8s</div>
<div>98s</div>
<div>88</div>
<div>87o</div>
<div>86o</div>
<div>85o</div>
<div>84o</div>
<div>83o</div>
<div>82o</div>
<div>A7s</div>
<div>K7s</div>
<div>Q7s</div>
<div>J7s</div>
<div>T7s</div>
<div>97s</div>
<div>87s</div>
<div>77</div>
<div>76o</div>
<div>75o</div>
<div>74o</div>
<div>73o</div>
<div>72o</div>
<div>A6s</div>
<div>K6s</div>
<div>Q6s</div>
<div>J6s</div>
<div>T6s</div>
<div>96s</div>
<div>86s</div>
<div>76s</div>
<div>66</div>
<div>65o</div>
<div>64o</div>
<div>63o</div>
<div>62o</div>
<div>A5s</div>
<div>K5s</div>
<div>Q5s</div>
<div>J5s</div>
<div>T5s</div>
<div>95s</div>
<div>85s</div>
<div>75s</div>
<div>65s</div>
<div>55</div>
<div>54o</div>
<div>53o</div>
<div>52o</div>
<div>A4s</div>
<div>K4s</div>
<div>Q4s</div>
<div>J4s</div>
<div>T4s</div>
<div>94s</div>
<div>84s</div>
<div>74s</div>
<div>64s</div>
<div>54s</div>
<div>44</div>
<div>43o</div>
<div>42o</div>
<div>A3s</div>
<div>K3s</div>
<div>Q3s</div>
<div>J3s</div>
<div>T3s</div>
<div>93s</div>
<div>83s</div>
<div>73s</div>
<div>63s</div>
<div>53s</div>
<div>43s</div>
<div>33</div>
<div>32o</div>
<div>A2s</div>
<div>K2s</div>
<div>Q2s</div>
<div>J2s</div>
<div>T2s</div>
<div>92s</div>
<div>82s</div>
<div>72s</div>
<div>62s</div>
<div>52s</div>
<div>42s</div>
<div>32s</div>
<div>22</div>
</div>
<div class="carpetas">
<div class="botones">
<button id="principal_1">Redes Sociales</button>
<div class="resto" hidden>
<button>Facebook</button>
<button>Twitter</button>
<button>LinkedIn</button>
<button>Gooogle</button>
</div>
</div>
</div>
</div>
<div class="anuncios"></div>
<div class="pie"></div>
</div>
I hope this helps, the code for you to review in case you have doubts: https://jsfiddle.net/0kqzL6dn/37/
I need the container #3, to shrink or to move underneath #2. I don't know how to do this, I might need to do flex but don't know. I need the left one(#2) to stay the same size and the right one (#3) to be the one that moves around. I don't know what more to add or change, I've tried with infinite combinations and have not done it correctly.
I want it like this: enter image description here
and when having the nav smaller like this : enter image description here
* {
margin: 0px;
padding: 0px;
}
div#general {
margin: auto;
display: grid;
margin-top: 0%;
width: 100%;
height: 100%;
background-color: #4f6d7a;
}
div#enlaces {
float: center;
display: center;
width: 100%;
height: 100px;
background-color: #166088;
}
div#tablas_carpetas {
position: relative;
display: flex;
flex-wrap: wrap;
width: 100%;
height: 1400px;
background-color: #DBE9EE;
}
div#tablas {
order: 1;
background-color: #dfc0c0;
height: 600px;
width: 40%;
}
div#carpetas {
order: 2;
width: 60%;
height: 600px;
background-color: green;
}
#media all and (max-width: 450px) {
div#tablas_carpetas {
flex-direction: column;
}
div#tablas {
width: 100%;
order: 1;
}
div#carpetas {
width: 100%;
order: 2;
}
}
<div id="general">
<div id="enlaces">1</div>
<div id="tablas_carpetas">
<div id="tablas">2</div>
<div id="carpetas">3</div>
</div>
<div id="anuncios">4</div>
<div id="pie">5</div>
</div>
You can add a display grid instead of flex on it when your reach the media query you want like below. Let me know If this is what you want.
* {
margin: 0px;
padding: 0px;
}
div#general {
margin: auto;
display: grid;
margin-top: 0%;
width: 100%;
height: 100%;
background-color: #4f6d7a;
}
div#enlaces {
float: center;
display: center;
width: 100%;
height: 100px;
background-color: #166088;
}
div#tablas_carpetas {
position: relative;
display: flex;
flex-wrap: wrap;
width: 100%;
height: 1400px;
background-color: #DBE9EE;
}
div#tablas {
order: 1;
background-color: #dfc0c0;
height: 600px;
width: 40%;
}
div#carpetas {
order: 2;
width: 60%;
height: 600px;
background-color: green;
}
#media all and (max-width: 450px) {
div#tablas_carpetas {
display:grid;
}
div#tablas {
width: 40%;
order: 1;
}
div#carpetas {
max-width: 60%;
order: 2;
}
}
<div id="general">
<div id="enlaces">1</div>
<div id="tablas_carpetas">
<div id="tablas">2</div>
<div id="carpetas">3</div>
</div>
<div id="anuncios">4</div>
<div id="pie">5</div>
</div>
I am trying to create a modal that has a footer and an header. The content has two columns: LeftSection and RightSection. I want to have the second column fill the height of the content depending on what the first columns height is (which can differ based on content). From the snippet, this means to have the black div go down as much as the red one does.
.Container {
margin: auto auto;
width: 80vw;
height: 250px;
background-color: #8080801a;
flex: 1;
display: flex;
flex-direction: column;
}
.Header {
height: 50px;
width: 100%;
background-color: #61dafb;
}
.FlexContainer {
flex: 1;
display: flex;
overflow: auto;
}
.LeftSection {
width: 200px;
height: 400px;
background: red;
}
.RightSection {
width: 100%;
background-color: black;
}
.Footer {
height: 50px;
background-color: blue;
width: 100%;
}
<div class="Container">
<div class="Header"></div>
<div class="FlexContainer">
<div class="LeftSection" ></div>
<div class='RightSection' ></div>
</div>
<div class='Footer' />
</div>
Do you want this?
.Container {
margin: auto auto;
width: 80vw;
height: 250px;
background-color: #8080801a;
flex: 1;
display: flex;
flex-direction: column;
}
.Header {
height: 50px;
width: 100%;
background-color: #61dafb;
}
.FlexContainer {
flex: 1;
display: flex;
overflow: auto;
}
.LeftSection {
width: 200px;
height: 400px;
background: red;
position: sticky;
top: 0;
}
.RightSection {
width: 100%;
background-color: black;
position: sticky;
top: 0;
}
.Footer {
height: 50px;
background-color: blue;
width: 100%;
}
<div class="Container">
<div class="Header"></div>
<div class="FlexContainer">
<div class="LeftSection" ></div>
<div class='RightSection' ></div>
</div>
<div class='Footer' />
</div>
I'm trying to create element div that contain 3 part, using 2 row and 2 column.
.flex-row {
flex-direction: row;
display: flex;
width: 310px;
}
.flex-column {
flex-direction: column;
display: flex;
}
.flex-body {
display: flex;
margin: 40px 10px 0px 0px;
}
.flex-body div:not([class*="flex"]) {
border: 1px solid white;
flex: 1 1 260px;
width: 764px;
}
<div class="flex-body">
<div class="flex-row">
<div style="background: #0980cc;"></div>
</div>
<div class="flex-column">
<div style="background: #09cc69;"></div>
<div style="background: #cc092f;"></div>
</div>
</div>
I set the width because if I didn't do it, the width wouldn't fit page.
But the div isn't responsive. I've tried but nothing work. How can I make my div responsive the screen resolution?
I've just created a version that uses percentages:
body,
html {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
border: 0;
}
.flex-body {
display: flex;
width: 100%;
height: 100%;
box-sizing: border-box;
padding: 40px;
}
.flex-body div:not([class*="flex"]) {
border: 1px solid white;
flex: 1 1 50%;
position: relative;
box-sizing: border-box;
}
.flex-row {
flex-direction: row;
display: flex;
width: 35%;
background-color: #0980cc;
}
.flex-column {
flex-direction: column;
display: flex;
width: 65%;
}
.flex-column div:nth-child(1) {
background: #09cc69;
width: 100%;
}
.flex-column div:nth-child(2) {
background: #cc092f;
width: 100%;
}
jsfiddle link
This question already has an answer here:
Using flex order property to re-arrange items for desktop and mobile views
(1 answer)
Closed 6 years ago.
I've learned that display flex help me reduce working hours for publishing.
However I've got a problem that the layout didn't display what I want.
All I want to display like grid layout like below :
But unfortunately I cannot fix this issue by myself.
Could you give me an advice how can I fix this issue with flex tag?
You can see my problem like below too :
Here is my code :
.item_wrap {
display: flex;
justify-content: space-between;
flex-flow: row-wrap;
}
.item_0 {
width: 500px;
height: 500px;
background: #ff0;
}
.item_1 {
width: 490px;
height: 160px;
background: #00f;
}
.item_2 {
width: 240px;
height: 160px;
background: #ff00e4;
}
.item_3 {
width: 240px;
height: 160px;
background: #ff00e4;
}
.item_4 {
width: 240px;
height: 160px;
background: #1cc600;
}
.item_5 {
width: 240px;
height: 160px;
background: #1cc600;
}
You will need to change HTML structure.
All blocks on the right side should be wrapped in a <div>.
HTML:
<div class="item-wrap">
<div class="item_0">0</div>
<div class="inner-wrap">
<div class="item_1">1</div>
<div class="item_2">2</div>
<div class="item_3">3</div>
<div class="item_4">4</div>
<div class="item_5">5</div>
</div>
</div>
CSS:
.item-wrap {
justify-content: space-between;
display: flex;
}
.inner-wrap {
justify-content: space-between;
flex-wrap: wrap;
display: flex;
}
.item_0,
.inner-wrap {
flex-basis: calc(50% - 5px);
}
.inner-wrap > div {
flex-basis: calc(50% - 5px);
}
.inner-wrap > .item_1 {
flex-basis: 100%;
}
* {box-sizing: border-box;}
body {
margin: 0;
}
.item-wrap {
justify-content: space-between;
height: 100vh;
display: flex;
}
.inner-wrap {
justify-content: space-between;
flex-wrap: wrap;
display: flex;
}
.item_0,
.inner-wrap {
flex-basis: calc(50% - 5px);
}
.inner-wrap > div {
flex-basis: calc(50% - 5px);
padding: 10px;
}
.inner-wrap > div + div {
margin-top: 10px;
}
.inner-wrap > .item_1 {
flex-basis: 100%;
}
.item_0{background:#ff0; padding: 10px;}
.item_1{background:#00f;}
.item_2{background:#ff00e4;}
.item_3{background:#ff00e4;}
.item_4{background:#1cc600;}
.item_5{background:#1cc600;}
<div class="item-wrap">
<div class="item_0">0</div>
<div class="inner-wrap">
<div class="item_1">1</div>
<div class="item_2">2</div>
<div class="item_3">3</div>
<div class="item_4">4</div>
<div class="item_5">5</div>
</div>
</div>
Hi! Please checkout this code
HTML5, CSS3
.item_wrap {
width: 800px;
display: flex;
margin: 0 auto;
}
.item_0 {
height: 500px;
background: red;
flex: 1;
margin: 5px;
}
.item_1 {
height: 500px;
background: yellow;
flex: 1;
margin: 5px;
}
.headbar {
}
.head_column {
height: 200px;
background: green;
flex: 1;
}
.headbar2 {
display: flex;
}
.pinkone {
background: #000;
flex: 1;
height: 150px;
}
.pinktwo {
background: pink;
flex: 1;
height: 150px;
}
.headbar3 {
display: flex;
}
.grayone {
background: gray;
flex: 1;
height: 150px;
}
.graytwo {
background: blue;
flex: 1;
height: 150px;
}
<div class="item_wrap">
<div class="item_0"></div>
<div class="item_1">
<div class="headbar">
<div class="head_column"></div>
</div>
<div class="headbar2">
<div class="pinkone"></div>
<div class="pinktwo"></div>
</div>
<div class="headbar3">
<div class="grayone"></div>
<div class="graytwo"></div>
</div>
</div>
</div>
Moreover you can follow YouTube Channel- LearnWebCode