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>
Related
<td>
<div class="paper" style="display:flex; ">
<div class="row" style="height: 20px; background-color: "></div>
</div>
</td>
In the .paper, justify content works fine but align-items wont work. where as in its child class .row, align-self wont work.
Before this <td> i have set a flex property as well. the code looks like this:
<td>
<div class="wrapper" style="display: flex;">
<div class="close" style="align-self: center;">
<i class="icon fa fa-times"></i>
</div>
<div class="image ml-15">
<img class="width-100" src="commercial/front-end/shop/lauren-winter-studio-top-natural_0190-cropped.jpg" alt="">
</div>
<div class="details pull-right ml-20" style="align-self: center;">
<span>Cream Top</span>
</div>
</div>
</td>
<td>
<div class="paper" style="display:flex; ">
<div class="row" style="height: 20px; background-color: "></div>
</div>
</td>
Make sure you have set the width or height on the right direction of the parent element when you use align-self/align-item.
You have to provide some hardcoded height and width to ".paper" class in order to use align-self/align-item.
https://jsfiddle.net/akash94/thpub2ej/2/
.paper{
display:flex;
height:200px;
width:200px;
border:1px solid lightblue;
align-items:center;
justify-content:center
}
.row{
align-self:flex-end;
}
I'm using bulma.css for a layout, but when I give a border to something I've found its overlapping.
Here is the overlap:
The .shop div seems 'as expected'
But the .basket div seems to be creeping up a bit.
Here is a link to a demo
And Html:
<div id="app">
<div class="container">
<div class="shop">
<div class="columns">
<div class="column is-one-quarter product">
<h3 class="title is-4">Cat</h3>
<p>
£<span>2.99</span></p>
<div><button class="button">Add to basket</button></div>
</div>
<div class="column is-one-quarter product">
<h3 class="title is-4">Dog</h3>
<p>
£<span>4.00</span></p>
<div><button class="button">Add to basket</button></div>
</div>
</div>
</div>
<div class="basket">
<h1>Basket</h1>
<table class="table">
<thead>
<tr>
<td>Item</td>
<td>Quantity</td>
<td>Price</td>
</tr>
</thead>
<tbody>
<tr>
<td colspan="3">No items in the basket</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
CSS:
// All of bulma.css
html,body{
height:100%;
padding:20px;
}
.product{
box-sizing:border-box;
border:2px solid #eaeaea;
padding:20px;
}
I think its something to do with ... flexbox? I'm not sure!
In it's latest version try is-gapless along with columns class
The bottom container is creeping up over the top container because of this rule in the Bulma code:
.columns:last-child {
margin-bottom: -.75rem;
}
Just override it. Add this to your code:
.columns:last-child {
margin-bottom: 0 !important;
}
!important may not be necessary. I just added it to ensure that your rule prevails.
For some reason the cells in my second row in my table are changing the width of the cells in the row above. I have no idea why this is the cause. I don't want the width of the first cell in the first row to be changed. I have reproduced the problem in jsfiddle to make it clear what I mean.
FiddleJS link:
https://jsfiddle.net/bpyrgsvc/1/
HTML:
<div class="table">
<div class="row">
<div class="cell">test</div>
<div class="cell">test</div>
<div class="cell">test</div>
<div class="cell">test</div>
<div class="cell">test</div>
</div>
<div class="row">
<div class="cell">this changes the width of the cell above</div>
</div>
</div>
CSS:
.table {
display:table;
}
.row {
display: table-row;
}
.cell {
display: table-cell;
padding: 5px;
border: 1px solid black;
}
With CSS you can build a table using a table element and then style how you want using display: block and inline-block. Though if your need really is as simple as it appears to be then a simple colspan will do the jobs.
<table>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td colspan="4"></td>
</tr>
</table>
Appending table within the cell should clarify your issue. Refer the snippet below
.table {
display:table;
table-layout: fixed;
width: 100%;
border-collapse:collapse
}
.row {
display: table-row;
}
.cell.p0{
padding:0;
border:none
}
.cell {
display: table-cell;
padding: 5px;
border: 1px solid black;
}
.cell-full {
// full width of table
}
<div class="table">
<div class="row">
<div class="cell p0">
<div class="table">
<div class="row">
<div class="cell">test</div>
<div class="cell">test</div>
<div class="cell">test</div>
<div class="cell">test</div>
<div class="cell">test</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="cell cell-full">this changes the width of the cell above</div>
</div>
</div>
I don't see anything wrong with the results. In a div set to be displayed as table and table-row, it is behaving as tables.
To get the result you want, close the first table and start another.
<div class="table">
<div class="row">
<div class="cell">test</div>
<div class="cell">test</div>
<div class="cell">test</div>
<div class="cell">test</div>
<div class="cell">test</div>
</div>
</div>
<div class="table">
<div class="row">
<div class="cell cell-full">this changes the width of the cell above</div>
</div>
</div>
https://jsfiddle.net/bpyrgsvc/4/
Flexbox can do that:
.row {
display: flex;
}
.cell {
flex: 1;
padding: 5px;
border: 1px solid black;
}
<div class="table">
<div class="row">
<div class="cell">test</div>
<div class="cell">test</div>
<div class="cell">test</div>
<div class="cell">test</div>
<div class="cell">test</div>
</div>
<div class="row">
<div class="cell">this NO LONGER changes the width of the cell above</div>
</div>
</div>
Another way is to set no wrap for whitespaces in css.
<div class="no-wrap-cell">This goes in a single line</div>
.no-wrap-cell{
white-space: nowrap !important;
}
Image of the problem:
How do I go from the one on the left, to the one on the right, using CSS?
You can use a table:
<table>
<tr>
<td>You own</td>
<td>20</td>
</tr>
<tr>
<td>Price</td>
<td>20</td>
</tr>
<tr>
<td>BPS</td>
<td>0.50</td>
</tr>
</table>
or floating divs:
<div style="display:inline-block;">
<div style="float:left; width:150px;">You own</div>
<div style="float:left;">20</div>
</div>
<div style="display:inline-block;">
<div style="float:left; width:150px;">Price</div>
<div style="float:left;">20</div>
</div>
<div style="display:inline-block;">
<div style="float:left; width:150px;">BPS</div>
<div style="float:left;">0.50</div>
</div>
<div>
<div id="left"> <!-- float left -->
<p>You Own></p>
<p>Price</p>
<p>BPS</p>
</div>
<div id="right">
<p>20</p>
<p>20</p>
<p>0.50</p>
</div>
</div>
Two divs
<div class="box">
Your own:<br />
Price:<br />
PBS
</div>
<div class="box">
20<br />
20<br />
50
</div>
CSS
.box {
float:left;
padding-right:40px;
}
While I am in agreement that this can be a table, you can easily do this with floats.
.container {
padding: 0.5em;
width: 200px;
background: #333;
color: #fff;
}
.button {
background: #efefef;
padding: 5px;
color: #000;
margin-bottom: 0.5em;
}
.item-header {
font-weight:bold;
float:left;
width: 45%;
clear:both;
}
<div class="container">
<div class="button">Buy Foreign Worker</div>
<div class="items">
<div class="item-header">You Own:</div>
<div class="item-value">20</div>
<div class="item-header">Price:</div>
<div class="item-value">20</div>
<div class="item-header">BPS:</div>
<div class="item-value">0.5</div>
</div>
</div>
All you are doing is making the header values float to the left, and the clear ensures that it starts on a new row.
The task is pretty strange. I have to create html table BUT I'm not allowed to use traditional <table> tag. My table should look like this:
It would be easy to do it like below:
<table>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td colspan="5"></td>
</tr>
...
but, as I said, I'm not allowed to use traditional table tags (table, tr, td, th). Here is JSFIddle of what I have at the moment. How can I get the same result as with <td colspan="5"></td> but using only divs and CSS.
EDITS:
* Table cell's width in one row must not be fixed, it should be dynamic and it should be possible to make them (cells) different width (in one row).
* Table cell's width in different rows of the same column must be equal. Like in traditional table. Only "colspanned" cell's width must be different.
As stated in CSS 2.1 specification in part "17.5 Visual layout of table contents"
Cells may span several rows or columns. (Although CSS 2.1 does not define how the number of spanned rows or columns is determined ...
So the answer is easy! Don't think of CSS tables exactly the same as HTML tables. As there are some differences like what mentioned in "17.2.1 Anonymous table objects":
... the "missing" elements must be assumed in order for the table model to work. Any table element will automatically generate necessary anonymous table objects around itself, consisting of at least three nested objects corresponding to a 'table'/'inline-table' element, a 'table-row' element, and a 'table-cell' element. ...
So you can do it this way (each row as a table and dropped table-row for avoiding unnecessary div block) until they specify a way for defining number of spanned rows or columns:
CSS
.row {
display: table;
width: 100%;
}
.cell {
display: table-cell;
width: 16.67%;
}
.wideCell {
display: table-cell;
}
HTML
<div class="row">
<div class="cell">One</div>
<div class="cell">Two</div>
<div class="cell">Three</div>
<div class="cell">Four</div>
<div class="cell">Five</div>
<div class="wideCell">Six</div>
</div>
<div>One Two Three Four Five Six</div>
<div class="row">
<div class="cell">One</div>
<div class="cell">Two</div>
<div class="cell">Three</div>
<div class="cell">Four</div>
<div class="cell">Five</div>
<div class="wideCell">Six</div>
</div>
You need to use CSS float and width to get the table-like effect you're looking for. What I'm basically doing is I'm placing 5 divs all with a fixed width and class name, and floating them to the left. The wideCell has the same width the .wrapper which just holds them all together in a nice block.
HTML
<div class="wrapper">
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="wideCell"></div>
</div>
CSS
.wrapper {
width:510px;
}
.cell {
width:100px;
height:50px;
background-color:#ff0000;
float:left;
border:1px #000 solid;
}
.wideCell {
width:508px;
height:50px;
background-color:#ff0000;
float:left;
border:1px #000 solid;
}
DEMO
EDIT
CSS
.table{
width: 100%;
}
.table .row{
width: 100%;
height: 25px;
margin: 0px;
padding: 0px;
}
.table .row .cell{
width: 150px;
float: left;
border: solid 1px #CCC;
height: 25px;
}
.table .clear_float{
clear: both;
}
.table .row .cell.rowspan{
width: 759px;
border: solid 1px #CCC;
}
html
<div class="table">
<div class="row">
<div class="cell">One</div>
<div class="cell">Two</div>
<div class="cell">Three</div>
<div class="cell">Four</div>
<div class="cell">Five</div>
</div>
<div class="clear_float" />
<div class="row">
<div class="cell rowspan">
One Two Three Four Five
</div>
</div>
<div class="clear_float" />
<div class="row">
<div class="cell">One</div>
<div class="cell">Two</div>
<div class="cell">Three</div>
<div class="cell">Four</div>
<div class="cell">Five</div>
</div>
<div class="clear_float" />
<div class="row">
<div class="cell rowspan">
One Two Three Four Five
</div>
</div>
<div class="clear_float" />
<div class="row">
<div class="cell">One</div>
<div class="cell">Two</div>
<div class="cell">Three</div>
<div class="cell">Four</div>
<div class="cell">Five</div>
</div>
<div class="clear_float" />
<div class="row">
<div class="cell rowspan">
One Two Three Four Five
</div>
</div>
</div>
I have searched a lot there is nothing like colspan in display:table CSS.
You can try this: CSS display:table
<div style="display:table;">
<div style="display:table-row;">
<span style="display:table-cell;">Name</span>
<span style="display:table-cell;"><input type="text"/></span>
</div>
<div style="display:table-row;">
<span style="display:table-cell;">E-Mail</span>
<span style="display:table-cell;"><input type="text"/></span>
</div>
<div style="display:table-row;">
<span style="display:table-cell;">Password</span>
<span style="display:table-cell;"><input type="text"/></span>
</div>
</div>
<div style="display:table;">
<div style="display:table-row; " >
<span style="display:table-cell;">
<button>Send Message</button>
</span>
</div>
</div>
You can do this ( where data-x has the appropriate display:xxxx set ):
<!-- TH -->
<div data-tr>
<div data-th style="width:25%">TH</div>
<div data-th style="width:50%">
<div data-table style="width:100%">
<div data-tr>
<div data-th style="width:25%">TH</div>
<div data-th style="width:25%">TH</div>
<div data-th style="width:25%">TH</div>
<div data-th style="width:25%">TH</div>
</div>
</div>
</div>
<div data-th style="width:25%">TH</div>
</div>
<!-- TD -->
<div data-tr>
<div data-td style="width:25%">TD</div>
<div data-th style="width:50%">
<div data-table style="width:100%">
<div data-tr>
<div data-td style="width:25%">TD</div>
<div data-td style="width:25%">TD</div>
<div data-td style="width:25%">TD</div>
<div data-td style="width:25%">TD</div>
</div>
<div data-tr>
...
</div>
</div>
</div>
<div data-td style="width:25%">TD</div>
</div>
Check this fiddle out i hope that would suffice what you need
html tables
CSS
div.table {border: 1px solid black; display: table; }
div.tr {border: 1px solid black; display: table-row; }
div.td {border: 1px solid black; display: table-cell; }
Html
<div class="table">
<div class="tr">
<div class="td">Row 1, Cell 1</div>
<div class="td">Row 1, Cell 2</div>
<div class="td">Row 1, Cell 3</div>
</div>
<div class="tr">
<div class="td">Row 2, Cell 1</div>
<div class="td">Row 2, Cell 2</div>
<div class="td">Row 2, Cell 3</div>
</div>