Is there a way to do the elements in this flexbox grid / tabs without putting them in a wrapper?
http://jsfiddle.net/mu98yotk/
.test {
border: 1px solid #ccc;
}
.test, .test .wrapper {
display: flex;
}
.test .wrapper {
flex: 1;
}
.test .wrapper * {
margin: 0 auto;
padding: 0 15px;
}
<div class="test">
<div class="wrapper">
<p>Lorem</p>
</div>
<div class="wrapper">
Ipsum
</div>
</div>
.test {
border: 1px solid #ccc;
display: flex;
}
.test > * {
margin: 0 auto;
padding: 0 15px;
}
.test > p {
border-bottom: 2px solid blue;
}
<div class="test">
<p>Lorem</p>
Ipsum
</div>
Related
I have such code:
https://plnkr.co/edit/ZAEzfAOCO0ZcSq2OR4Lp?p=preview
but this isn't working in ie, until I add height:0 (it's a very bad idea on parent element)
<body>
<div class="container">
<div class="container-item container-item-1"></div>
<div class="container-item container-item-2"></div>
<div class="container-item container-item-3"></div>
</div>
</body>
body, html {
min-height: 100%;
height: 100%;
}
.container {
width: 100%;
min-height: calc(100% - 80px);
margin: 30px;
padding: 20px;
border: 1px solid gray;
border-radius: 16px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
}
.container-item {
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
content: "someText";
border-bottom: 1px solid #cecece;
}
.container-item-1 {
background-color: red;
}
.container-item-2 {
background-color: orange;
}
.container-item-3 {
background-color: green;
}
everything works fine in chrome and ff
(my parents should expand to fit parent)
Important!
I need a flexible solution, my code can have a lot of nested div's (not a constant value) between body and content divs.
for example:
<body>
<div>
<div>
<div class="container">
<div class="container-item container-item-1"></div>
<div class="container-item container-item-2"></div>
<div class="container-item container-item-3"></div>
</div>
</div>
</div>
</body>
or
<body>
<div>
<h3>text</h3>
<div class="container">
<div class="container-item container-item-1"></div>
<div class="container-item container-item-2"></div>
<div class="container-item container-item-3"></div>
</div>
</div>
</body>
If you have an unknown or nested markup before the container, you could add an extra wrapper within it (here inner), to overcome IE's min-height bug.
Fiddle sample 1 -- Fiddle sample 2
Stack snippet sample 1
html, body {
margin: 0;
}
.container {
display: flex;
}
.container .inner {
width: 100%;
min-height: calc(100vh - 100px);
margin: 30px;
padding: 20px;
border: 1px solid gray;
border-radius: 16px;
display: flex;
flex-direction: column;
}
.container-item {
flex-grow: 1;
border: 1px solid #cecece;
}
.container-item-1 {
background-color: red;
}
.container-item-2 {
background-color: orange;
}
.container-item-3 {
background-color: green;
}
<div>
<h3>text</h3>
<div class="container">
<div class="inner">
<div class="container-item container-item-1">
</div>
<div class="container-item container-item-2">
</div>
<div class="container-item container-item-3">
</div>
</div>
</div>
</div>
Stack snippet sample 2
html, body {
margin: 0;
}
.container {
display: flex;
}
.container .inner {
width: 100%;
min-height: calc(100vh - 100px);
margin: 30px;
padding: 20px;
border: 1px solid gray;
border-radius: 16px;
display: flex;
flex-direction: column;
}
.container-item {
flex-grow: 1;
border: 1px solid #cecece;
}
.container-item-1 {
background-color: red;
}
.container-item-2 {
background-color: orange;
}
.container-item-3 {
background-color: green;
}
<div>
<div>
<div class="container">
<div class="inner">
<div class="container-item container-item-1">
</div>
<div class="container-item container-item-2">
</div>
<div class="container-item container-item-3">
</div>
</div>
</div>
</div>
</div>
I have a two column flexbox layout. However, sometimes there is only one column, in which case the column should be aligned to the right. Currently the column is aligned to the left.
https://codepen.io/sleepydada/pen/rzVRxL
HTML:
<div class="answers">
<div class="answer">first answer</div>
<div class="answer">second answer</div>
</div>
<div class="answers">
<div class="answer">first answer</div>
</div>
SCSS:
* {
box-sizing: border-box;
}
.answers {
border: 2px solid black;
margin-bottom: 20px;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
&:first-of-type {
background: #ccc;
}
.answer {
background: crimson;
margin: 20px 0;
border: 1px solid blue;
flex: 0 0 33.3333%;
}
}
You can add this CSS:
.answer:only-of-type {
margin-left: auto;
}
From MDN
The :only-of-type CSS pseudo-class represents an element that has no
siblings of the same type.
codepen
* {
box-sizing: border-box;
}
.answers {
border: 2px solid black;
margin-bottom: 20px;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.answers:first-of-type {
background: #ccc;
}
.answers .answer {
background: crimson;
margin: 20px 0;
border: 1px solid blue;
flex: 0 0 33.3333%;
}
.answers .answer:only-of-type {
margin-left: auto;
}
<div class="answers">
<div class="answer">first answer</div>
<div class="answer">second answer</div>
</div>
<div class="answers">
<div class="answer">first answer</div>
</div>
You can add an invisible div with height set to 0
* {
box-sizing: border-box;
}
.invisible {
height: 0;
border: none !important;
}
.answers {
border: 2px solid black;
margin-bottom: 20px;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.answers:first-of-type {
background: #ccc;
}
.answers .answer {
background: crimson;
margin: 20px 0;
border: 1px solid blue;
flex: 0 0 33.3333%;
}
<div class="answers">
<div class="answer">first answer</div>
<div class="answer invisible"><!--invisible div--></div>
<div class="answer">second answer</div>
</div>
<div class="answers">
<div class="answer invisible"><!--invisible div--></div>
<div class="answer">first answer</div>
</div>
I have a simple layout with varying size elements that I am trying to put together for a dashboard.
div {
padding: 5px 5px 5px 5px;
margin: 1px 1px 1px 1px;
display: flex;
}
div.first {
border: 1px dotted lightpink;
}
div.second {
border: 1px dotted orange;
}
div.third {
border: 1px dotted green;
}
div.fourth {
border: 1px dotted fuchsia;
}
<div style="display: flex; height: 500px">
<div class="first" style="flex: 0 60%;flex-wrap: wrap;align-items;stretch;align-content:stretch">
<div class="first" style="flex: 1 100%; align-self: flex-start">
Title text
</div>
<div class="second" style="flex: 2 auto">
Content A
</div>
<div class="third" style="flex: 1 auto">
Content B
</div>
<div class="fourth" style="flex: 1 auto">
<div style="height: 66px; align-self:flex-end">
<div style="align-self: flex-end">
Content C
</div>
</div>
</div>
</div>
<div class="second" style="flex: 1 auto; align-items: flex-end">
Content D
</div>
</div>
Codepen link:
http://codepen.io/korgmatose/pen/qqKzry?editors=1100
I want to fill the second row (Content A,B,C) so that it starts just beneath Title Text.
But making align-items flex-start will not allow the second row to fill the remaining space, and setting a height to 100% on one of the items in that row only sets the height to the parent container, thus rendering the div's outside the bottom border.
Like #kukkuz said I would also recommend doing it this way. Just put the content A, B, C in a separate container, in this case #content and add display: flex, flex-direction: column and flex: 1 to it and please do not use inline styling for styling your HTML since it makes your code muss less readable. Most recommended way is to put your CSS code into a separate file and link it to your HTML.
The following code is an example of how you could do the markup of your desired layout without any inline styles.
HTML
<div id="wrapper">
<div class="left">
<div class="title">Title text</div>
<div id="content">
<div class="second">Content A</div>
<div class="third">Content B</div>
<div class="fourth">Content C</div>
</div>
</div>
<div class="right">Content D</div>
</div>
CSS
div {
padding: 5px 5px 5px 5px;
margin: 1px 1px 1px 1px;
}
#wrapper {
display: flex;
height: 500px;
}
.left {
flex: 3;
display: flex;
flex-direction: column;
}
#content{
flex: 1;
display: flex;
padding: 0;
}
.second,
.third,
.fourth {
flex: 1;
}
.third {
border: 1px dotted green;
}
.fourth {
display: flex;
align-items: flex-end;
border: 1px dotted fuchsia;
}
.right {
flex: 2;
}
.left,
.title {
border: 1px dotted lightpink;
}
.right,
.second {
border: 1px dotted orange;
}
div {
padding: 5px 5px 5px 5px;
margin: 1px 1px 1px 1px;
}
#wrapper {
display: flex;
height: 500px;
}
.left {
flex: 3;
display: flex;
flex-direction: column;
}
#content {
flex: 1;
display: flex;
padding: 0;
}
.second,
.third,
.fourth {
flex: 1;
}
.third {
border: 1px dotted green;
}
.fourth {
display: flex;
align-items: flex-end;
border: 1px dotted fuchsia;
}
.right {
flex: 2;
}
.left,
.title {
border: 1px dotted lightpink;
}
.right,
.second {
border: 1px dotted orange;
}
<div id="wrapper">
<div class="left">
<div class="title">Title text</div>
<div id="content">
<div class="second">Content A</div>
<div class="third">Content B</div>
<div class="fourth">Content C</div>
</div>
</div>
<div class="right">Content D</div>
</div>
div {
padding: 5px 5px 5px 5px;
margin: 1px 1px 1px 1px;
display: flex;
}
div.first {
border: 1px dotted lightpink;
}
div.second {
border: 1px dotted orange;
}
div.third {
border: 1px dotted green;
}
div.fourth {
border: 1px dotted fuchsia;
}
<div style="display: flex;">
<div class="first" style="flex: 0 60%;flex-wrap: wrap;align-items;stretch;align-content:stretch">
<div class="first" style="flex: 1 100%; align-self: flex-start">
Title text
</div>
<div class="second" style="flex: 2 auto">
Content A
</div>
<div class="third" style="flex: 1 auto">
Content B
</div>
<div class="fourth" style="flex: 1 auto">
<div style="height: 66px; align-self:flex-end">
<div style="align-self: flex-end">
Content C
</div>
</div>
</div>
</div>
<div class="second" style="flex: 1 auto; align-items: flex-end">
Content D
</div>
</div>
Something like this?
http://codepen.io/anon/pen/OMLLwB
#news {
width: 85%;
margin: 0 auto;
}
#news ul {
list-style: none;
margin: 0;
padding: 0;
}
#worldMap img {
width: 100%;
}
.newspiece {
margin-bottom: 2.5%;
padding: 20px;
background-color: #90C3D4;
height: 130px;
}
.newspiece h3 {
border-bottom: 3px solid black;
margin-bottom: 10px;
}
#media(min-width: 600px) {
.newspiece {
width: 25%;
margin-left: 5%;
display: inline-block;
vertical-align: top;
overflow: hidden;
}
.newspiece:first-child {
margin-left:0;
}
}
Am i missing something here? the width the total container (#news) is 85%, the width of each item is 25%, and two of them have a 5% left margin, total sums to 85%, then why do i resize it, the rightmost column goes down?
i have changed your html/css. this is a cleaner solution and is suported among all browsers
html:
<div class="flex">
<div class="box">
<h3>Title</h3>
<p>Content</p>
</div>
<div class="box">
<h3>Title</h3>
<img src="http://www.placecage.com/400/300" alt="">
</div>
<div class="box">
<h3>Title</h3>
<p>Content</p>
</div>
</div>
css:
.flex {
display: flex;
justify-content: space-around;
flex-wrap: wrap;
}
.box {
width: 300px;
margin: 10px;
padding: 20px;
background: #90C3D4;
}
.box h3 {
padding-bottom: 5px;
border-bottom: 3px solid black;
}
.box img {
max-width: 100%;
}
* { box-sizing: border-box; }
The padding adds to the total width of the element if box-sizing: border-box is not used.
Suppose I have markup like: http://jsfiddle.net/R8eCr/1/
<div class="container">
<div class="column">
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
</div>
<div class="column">
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
</div>
<div class="column">
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
</div>
...
</div>
Then CSS
.container {
display: table;
border-collapse: collapse;
}
.column {
float: left;
overflow: hidden;
width: 120px;
}
.cell {
display: table-cell;
border: 1px solid red;
width: 120px;
height: 20px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
I have the outer div with display: table; border-collapse: collapse; and cells with display: table-cell why do they still not collapse? What am I missing here?
By the way there maybe variable number of cells in a column so I can't only have borders on one side.
Use a simple negative margin rather than using display: table.
Updated in fiddle
JS Fiddle
.container {
border-style: solid;
border-color: red;
border-width: 1px 0 0 1px;
display: inline-block;
}
.column {
float: left;
overflow: hidden;
}
.cell {
border: 1px solid red;
width: 120px;
height: 20px;
margin: -1px 0 0 -1px;
}
.clearfix {
clear:both;
}
Instead using border use box-shadow:
box-shadow:
2px 0 0 0 #888,
0 2px 0 0 #888,
2px 2px 0 0 #888, /* Just to fix the corner */
2px 0 0 0 #888 inset,
0 2px 0 0 #888 inset;
Demo: http://codepen.io/Hawkun/pen/rsIEp
here is a demo
first you need to correct your syntax error its
display: table-cell;
not diaplay: table-cell;
.container {
display: table;
border-collapse:collapse
}
.column {
display:table-row;
}
.cell {
display: table-cell;
border: 1px solid red;
width: 120px;
height: 20px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
Why not use outline? It is what you want:
outline: 1px solid red;
You could also use negative margins:
.column {
float: left;
overflow: hidden;
width: 120px;
}
.cell {
border: 1px solid red;
width: 120px;
height: 20px;
box-sizing: border-box;
}
.cell:not(:first-child) {
margin-top: -1px;
}
.column:not(:first-child) > .cell {
margin-left: -1px;
}
<div class="container">
<div class="column">
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
</div>
<div class="column">
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
</div>
<div class="column">
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
</div>
<div class="column">
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
</div>
<div class="column">
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
</div>
</div>
You need to use display: table-row instead of float: left; to your column and obviously as #Hushme correct your diaplay: table-cell to display: table-cell;
.container {
display: table;
border-collapse: collapse;
}
.column {
display: table-row;
overflow: hidden;
width: 120px;
}
.cell {
display: table-cell;
border: 1px solid red;
width: 120px;
height: 20px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
demo
Example of using border-collapse: separate; as container displayed as table:
ol[type="I"]>li{
display: table;
border-collapse: separate;
border-spacing: 1rem;
}
You can use borders in pseudo-elements with margins & paddings.
It works with flex-wrap in multiple rows / cols.
.parent {
display: flex; /* your container */
flex-flow: column;
position: relative;
::before{
content:'';
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
pointer-events: none;
border: 1px solid #424041; /* your border */
}
padding: 1px 0 0 1px; /* <border-width> 0 0 <border-width> */
}
.child{
position: relative;
::before{
content:'';
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
pointer-events: none;
border: 1px solid #424041; /* your border */
}
margin: -1px 0 0 -1px; /* -<border-width> 0 0 -<border-width> */
}
.parentAndChild{
display: flex; /* your container */
flex-flow: row wrap;
position: relative;
::before{
content:'';
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
pointer-events: none;
border: 1px solid #424041; /* your border */
}
margin: -1px 0 0 -1px; /* -<border-width> 0 0 -<border-width> */
padding: 1px 0 0 1px; /* <border-width> 0 0 <border-width> */
}