<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.wrapper {
display: flex;
flex-direction: column;
}
.name {
border: 1px dotted;
width: 8.3vw;
display: flex;
align-items: center;
justify-content: center;
}
.number {
border: 1px dashed;
width: 8.3vw;
display: flex;
align-items: center;
justify-content: center;
}
.oben {
display: flex;
align-items: center;
justify-content: center;
}
.unten {
display: flex;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="oben">
<div class="number">
<p>1</p>
</div>
<div class="number">
<p>2</p>
</div>
<div class="number">
<p>3</p>
</div>
<div class="number">
<p>4</p>
</div>
<div class="number">
<p>5</p>
</div>
<div class="number">
<p>6</p>
</div>
<div class="number">
<p>7</p>
</div>
<div class="number">
<p>8</p>
</div>
<div class="number">
<p>9</p>
</div>
<div class="number">
<p>10</p>
</div>
<div class="number">
<p>11</p>
</div>
<div class="number">
<p>12</p>
</div>
</div>
<div class="unten">
<div class="name">
<p>one</p>
</div>
<div class="name">
<p>two</p>
</div>
<div class="name">
<p>three</p>
</div>
<div class="name">
<p>four</p>
</div>
<div class="name">
<p>12</p>
</div>
<div class="name">
<p>12</p>
</div>
<div class="name">
<p>12</p>
</div>
<div class="name">
<p>12</p>
</div>
<div class="name">
<p>12</p>
</div>
<div class="name">
<p>12</p>
</div>
<div class="name">
<p>12</p>
</div>
<div class="name">
<p>12</p>
</div>
</div>
</div>
</body>
</html>
This should now be responsive
You can use flexbox yes, but simplify your HTML and CSS like this:
HTML
<div class="container"> <!-- this is the master container -->
<div class="sub-container">
<span>one</span>
<span>1</span>
</div>
<div class="sub-container">
<span>one</span>
<span>1</span>
</div>
<div class="sub-container">
<span>one</span>
<span>1</span>
</div>
<div class="sub-container">
<span>one</span>
<span>1</span>
</div>
<div class="sub-container">
<span>one</span>
<span>1</span>
</div>
<div class="sub-container">
<span>one</span>
<span>1</span>
</div>
<div class="sub-container">
<span>one</span>
<span>1</span>
</div>
<div class="sub-container">
<span>one</span>
<span>1</span>
</div>
<div class="sub-container">
<span>one</span>
<span>1</span>
</div> <div class="sub-container">
<span>one</span>
<span>1</span>
</div>
</div>
CSS
.container { /* seting ths master container to flex display creates a flexbox display with these DEFAULT values already built-in : flex-direction:row; */
display:flex;
}
.sub-container { /* same here flexbox, but we change to vertical flexbox with flex-direction:column; and we add align and justify to center to it aligns nicely centered in both axis X and Y */
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
border:1px solid black; /* this is your external border */
}
span {
margin:2px; /*this spaces things out a bit more nicely */
}
span:nth-child(2) { /* the nth-child() selector with (2) will select every SECOND 'span' element and give it a border-top */
border-top:1px solid black;width:100%;text-align:center; /* also we align the content of the second span and give it a full-width so that t he border-top is the full width of the sub-container */
}
I know you are asking about flexbox, but if you want to explore a different approach you can try using a table instead. That’s exactly what they are made for. You could do something like this:
.table {
border-collapse: collapse;
}
table,
th,
td {
border: 1px solid black;
padding: 5px;
}
<table class="table">
<tr>
<th>one</th>
<th>two</th>
<th>three</th>
<th>four</th>
<th>five</th>
<th>six</th>
<th>seven</th>
<th>eight</th>
<th>nine</th>
<th>ten</th>
<th>eleven</th>
<th>twelve</th>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
<td>10</td>
<td>11</td>
<td>12</td>
</tr>
</table>
I am trying to achieve the following design in my code. I want to make the whole page responsive and put break points whenever necessary. So, I thought, It would be nice to implement this using CSS flexbox.I am kind of newbie with flexbox, so any helps would be highly appreciated. So, In my “section-two__main” div I have the items number and name. I want to display those items just like a table( as like the picture below). I could use css order property but then again I lost the responsiveness directly when shrinking the page. Can anybody guide me through this, if possible? How, can I achieve the design and maintain the responsiveness? At least before putting the breakpoints, Is it possible to adjust design so that when the page shrinks the items stay as like the actual design? I would like to use css flex box if possible. Thanks in Advance.
The design I would like to achieve:
And here is the code, that I have tried so far:
.wrapper{
display:flex;
flex-direction:column;
}
.section-one{
background-color:gray;
width:95%;
margin:0 auto;
}
.section-two{
background-color:white;
width:95%;
margin:0 auto;
margin-top:10px;
}
.section-two__header{
background-color:darkgray;
}
.section-two__footer{
background-color:darkgray;
}
.section-two__main{
background-color:white;
width:70%;
display:flex;
flex-direction:column;
margin:0 auto;
}
.name{
border:1px dotted;
}
.number{
border:1px dashed;
}
<div class="wrapper">
<div class="section-one">
First section
</div>
<div class="section-two">
<div class="section-two__header">
second section header
</div>
<div class="section-two__main">
<div class="number">1</div>
<div class="name">One</div>
<div class="number">2</div>
<div class="name">Two</div>
<div class="number">3</div>
<div class="name">Three</div>
<div class="number">4</div>
<div class="name">Four</div>
<div class="number">5</div>
<div class="name">Five</div>
<div class="number">6</div>
<div class="name">Six</div>
<div class="number">7</div>
<div class="name">Seven</div>
<div class="number">8</div>
<div class="name">Eight</div>
<div class="number">9</div>
<div class="name">Nine</div>
<div class="number">10</div>
<div class="name">Ten</div>
<div class="number">11</div>
<div class="name">Eleven</div>
<div class="number">12</div>
<div class="name">Twelve</div>
</div>
<div class="section-two__footer">
second section footer
</div>
</div>
</div>
Link to Fiddle: Demo
BreakPoint styles:
Hey, I have been following your solution and now when I try to put breakpoint. let’s say when max width is 1000px, I am still bit confused, how to proceed. Any helps with this? i have updated my question with the picture under “breakpoint styles”…
thanks for the answers but don’t like to use table….
@ninja No problem, the beauty of programming is that there are millions of ways to achieve results, and you are free to choose whatever tool or method that suits your needs. While you are looking at flexbox, also take a look at css grid, it’s just another tool that perhaps will help you achieve you goal
