I'm trying to display some boxes as a grid in order from box 1 to box 10. So it would look like:
[Box1] [Box2] [Box3] [Box4] [Box5]
[Box6] [Box7] [Box8] [Box9] [Box10]
Currently, my boxes look like this:
[Box1] [Box2] [Box3] [Box4] [Box5] [Box6] [Box7]
[Box8] [Box9] [Box10]
.boxes {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
margin: 4% 0;
color: white;
}
<div class="boxes">
<div class="box-one">Box 1</div>
<div class="box-two">Box 2</div>
<div class="box-three">Box 3</div>
<div class="box-four">Box 4</div>
<div class="box-five">Box 5</div>
<div class="box-six">Box 6</div>
<div class="box-seven">Box 7</div>
<div class="box-eight">Box 8</div>
<div class="box-nine">Box 9</div>
<div class="box-ten">Box 10</div>
</div>
Any idea what I'm doing wrong?
Using CSS Grid will make it as simple as this:
.boxes {
display: grid;
grid-template-columns : repeat(5,1fr);
gap : 2rem;
}
/* for having some visuals */
.boxes > div{
border:1px solid red;
min-height : 100px
}
<div class="boxes">
<div class="box-one">Box 1</div>
<div class="box-two">Box 2</div>
<div class="box-three">Box 3</div>
<div class="box-four">Box 4</div>
<div class="box-five">Box 5</div>
<div class="box-six">Box 6</div>
<div class="box-seven">Box 7</div>
<div class="box-eight">Box 8</div>
<div class="box-nine">Box 9</div>
<div class="box-ten">Box 10</div>
</div>
You could also use Flexbox, but you have to do some calculations :
.boxes {
display: flex;
gap : 2rem;
flex-wrap:wrap;
}
.boxes > div{
border:1px solid red;
min-height : 100px;
flex:none;
width:calc(20% - 1.75rem);
}
<div class="boxes">
<div class="box-one">Box 1</div>
<div class="box-two">Box 2</div>
<div class="box-three">Box 3</div>
<div class="box-four">Box 4</div>
<div class="box-five">Box 5</div>
<div class="box-six">Box 6</div>
<div class="box-seven">Box 7</div>
<div class="box-eight">Box 8</div>
<div class="box-nine">Box 9</div>
<div class="box-ten">Box 10</div>
</div>
easy way to accomplish that is with css grid not flex
.boxes {
display: grid;
grid-template: "1 2 3 4 5"
"6 7 8 9 10";
grid-gap: 6px; /*gap between child*/
}
.boxes > div {
/*set child's background color*/
background-color: darkcyan;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Boxes</title>
</head>
<body>
<table border="2px" style="width:100%">
<tbody>
<tr>
<td><br /></td>
<td><br /></td>
<td><br /></td>
<td><br /></td>
<td><br /></td>
</tr>
</tbody>
<tbody>
<tr>
<td><br /></td>
<td><br /></td>
<td><br /></td>
<td><br /></td>
<td><br /></td>
</tr>
</tbody>
</table>
</body>
</html>
Related
How to make the box size to be evenly as perfect square and make the words inside of it to shrink. I want to make it square and the inside word to shrink to small size based on the square, but they just flexing because of the contents.
This is my code, what should I change/remove/add?
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.mainbox {
background: grey;
display: flex;
margin: 5px;
}
.mainbox div {
flex: 1;
border: 2px solid black;
}
#row {
display: flex;
flex-direction: row;
}
#column {
display: flex;
}
<!DOCTYPE html>
<html>
<head>
<title>FlexSpiral</title>
</head>
<body>
<div class="mainbox">
<div>box 1</div>
<div>
box 2
<div id="row">
<div id="column">
<div id="row">
<div>box 5</div>
<div>
<div>box 6</div>
<div id="row">
<div>
<div id="row">
<div>box 9</div>
<div>box 10</div>
</div>
<div>box 8</div>
</div>
<div>box 7</div>
</div>
</div>
</div>
<div>box 4</div>
</div>
<div>box 3</div>
</div>
</div>
</div>
</body>
</html>
I didn't quite understand the question, but here goes
You can take the margin from the ".mainbox" that it is giving margin on all sides of the mainbox class.
To leave the div box occupying its own content you can use in the styling: display:inline-block
Note: a good practice is to use class instead of id to identify the styling, and id more for future interaction when using script and interactions.
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:
<!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 have a row of fixed width flex items, and a footer element that should span the width of the combined elements above. How can I go about doing this?
Here is what I have so far, however, the bottom row is wider than the width of the first row.
<div class="container">
<div class="container" style="flex-basis: 100%">
<div style="width: 50px;">Div 1</div>
<div style="width: 50px;">Div 2</div>
<div style="width: 50px;">Div 3</div>
</div>
<div style="width: 100%">Div 4</div>
</div>
.container {
display : inline-flex;
flex-flow: row wrap;
}
.container > div {
border: 1px solid black;
background: #ececec;
}
https://jsfiddle.net/y1kham4u/1/
you better reset flex-direction than flex-wrap:
.container {
display: inline-flex;
flex-flow: column;/* no wrapping needed */
}
.container .container {
flex-direction: row;/* reset */
}
.container>div {
border: 1px solid black;
background: #ececec;
}
* {
box-sizing: border-box;
}
<div class="container">
<div class="container" style="flex-basis: 100% /* not really needed , but does not hurt */">
<div style="width: 50px;">Div 1</div>
<div style="width: 50px;">Div 2</div>
<div style="width: 50px;">Div 3</div>
</div>
<div style="width: 100%">Div 4</div>
</div>
https://jsfiddle.net/qm9o27ed/ (with also an inline-grid)
OKay first of all
https://flexboxfroggy.com/
play this game this game will help you to learn flex-box its pretty funnier way to learn flex-box properties
and for your problem and Use following jsfiddle
https://jsfiddle.net/dupinderdhiman/4d58c2nh/2/
.container {
display: inline-flex;
flex-flow: column;
border: 1px solid black;
background: #ececec;
}
.innerContainer{
display: flex;
flex-grow: 1;
}
.innerContainer > div {
border: 1px solid black;
background: #ececec;
}
<div class="container">
<div class="innerContainer" style="">
<div style="width: 50px;">Div 1</div>
<div style="width: 50px;">Div 2</div>
<div style="width: 50px;">Div 3</div>
</div>
<div style="width: 100%">Div 4</div>
</div>
https://jarodpeachey.github.io/breeze_css/layout.css
If you use this framework, you can easily create rows. The col-4 means it's 4 out of 12 grid spaces. If we set the width of the row to 150, each div will take up 50 pixels. (*Note: I would recommend using the framework to understand how it works, and then copy the code onto your local machine, as this framework is for my personal use, and the code may change)
<div class="container">
<div class="row m-auto" style="width: 150px">
<div class="col col-4">Div 1</div>
<div class="col col-4">Div 2</div>
<div class="col col-4">Div 3</div>
<div class="col col-12">Div 4</div>
</div>
</div>
Hope this helps!!
My data is like this
<div class="fl1">floor 1</div>
<div class="fl2">floor 2</div>
<div class="fl2">floor 2</div>
<div class="fl2">floor 2</div>
<div class="fl3">floor 3</div>
Is it possible to display it like this
Mainly you have to use colspan
<table >
<tr>
<td colspan="3" style="width:100%">TEXT</td>
</tr>
<tr>
<td >TEXT</td><td >TEXT</td><td >TEXT</td>
</tr>
<tr>
<td colspan="3" style="width:100%">TEXT</td>
</tr>
</table>
table, th, td {
border: 1px solid black;
}
Try this, Using div and flex.
.cont{
width:200px;
height:100%;
border-style: solid;
}
.f1{
border-style:solid;
margin: 2px;
}
.fl2{
border-style:solid;
width:100%;
margin:2px;
}
.cont2{
display:flex;
}
<div class="cont">
<div class="f1">floor1</div>
<div class="cont2">
<div class="fl2">floor2</div>
<div class="fl2">floor3</div>
<div class="fl2">floor4</div>
</div>
<div class="f1">floor5</div>
</div>
This way basically:
<div style="width:500px;border-style:double">
<div style="border-style:solid;border-width: 1px;">
<div>floor 1</div>
</div>
<div style="display:inline-block; padding-top:2px;padding-left:1px">
<div style="float:left;width:100px;border-width:1px;border-style:solid">floor 2</div>
<div style="float:left;width:100px;border-width:1px;border-style:solid; margin-left:1px">
floor 2</div>
<div style="float:left;width:100px;border-width:1px;border-style:solid; margin-left:1px">floor 2</div>
</div>
<div style="border-style:solid;border-width: 1px;">
<div>floor 1</div>
</div>
</div>
How can I place 4 divs next to each other which width's will be calculated automatically (since every resolution of a monitor is different).
So whenever I have 16 divs, the amount shown div's still has to be 4.
I thought of giving a percentage, for each div. But that doesn't seem to be working (which is pretty obvious since every monitor has a different resolution of their screen displaying)
Just add a width using a percentage value (25%) which will put 4 boxes next to each other on each line.
.box {
float: left;
width: 25%;
}
I suggest you use a framework like bootstrap.
But this is the basic requirement you need to show 4 divs in a row...
just ignore the background and the div:nth-child(even) - I added that just so you could see the div areas clearly.
section {
max-width: 960px;
margin: auto;
}
div {
width: 25%;
float: left;
background: cornsilk;
}
div:nth-child(even) {
background: lightgreen;
}
<section>
<div>number 1</div>
<div>number 2</div>
<div>number 3</div>
<div>number 4</div>
<div>number 5</div>
<div>number 6</div>
<div>number 7</div>
<div>number 8</div>
<div>number 9</div>
<div>number 10</div>
<div>number 11</div>
<div>number 12</div>
<div>number 13</div>
<div>number 14</div>
<div>number 15</div>
<div>number 16</div>
</section>
You can better use Bootstrap framework.
for example,
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
</head>
<body>
<div class="searcharea col-md-12">
<div class="col-md-12">
<div class="col-md-3">1</div>
<div class="col-md-3">2</div>
<div class="col-md-3">3</div>
<div class="col-md-3">4</div>
</div>
</body>
</html>