How do I align part of child divs inline if I use display: flex; flex-direction: column; for the paternal div?
I tried to use display: inline-block for the child divs, also float:left, but no one of this work.
#container {
display: flex;
flex-direction: column;
}
.item
{
border: 1px dotted;
width: 100px;
height: 100px;
}
.item1 {
order: 2;
}
.item2 {
order: 1;
}
.item3 {
order: 3;
}
<div id="container">
<div class="item1 item" >2</div>
<div class="item2 item" >1</div>
<div class="item3 item" >3</div>
</div>
.item
{
border: 1px dotted;
width: 100px;
height: 100px;
display: inline-block;
}
.item1 {
order: 2;
display: block;
}
.item2 {
order: 1;
float: left;
}
.item3 {
order: 3;
}
<div id="container">
<div class="item1 item" >2</div>
<div class="item2 item" >1</div>
<div class="item3 item" >3</div>
</div>
#container {
display: flex;
flex-wrap: wrap;
}
.item { display: flex; }
.item1 { flex: 1 0 45%; order: 2; }
.item2 { flex: 1 0 60%; order: 1; }
.item3 { flex: 1 0 45%; order: 3; }
.item > span {
border: 1px dotted;
width: 100px;
height: 100px;
margin: 5px;
display: flex;
align-items: center;
justify-content: center;
}
.item2 > span { margin: 0 auto; }
.item1 > span { margin-left: auto; }
.item3 > span { margin-right: auto;}
<div id="container">
<div class="item1 item"><span>2</span></div>
<div class="item2 item"><span>1</span></div>
<div class="item3 item"><span>3</span></div>
</div>
Related
I am trying to place 6 boxes, as a small exercise to understand how to do it. I want these 6 boxes to be divided in 4 boxes on a row and then 2 on the second one, and I want to do it with the display feature in CSS so that is not applicable only for this case. This is what I have been trying.
https://gyazo.com/f64788cdf85d263e56452c1412fdcfb0?token=f6c45c6813c3fc47addb63483cee3f6a
.parent{
display: flex;
flex-wrap: wrap;
}
.parent-wrapper {
height:100%;
width:100%;
border: 1px solid black;}
.child {
width: 300px;
height: 200px;
background-color: green;
border: 1px solid red;
margin: 5px;
flex: 1 0 21%;
}
You could use display: flex.
HTML:
<div class="flex">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
CSS (EDITED):
.flex {
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
.flex div {
height: 200px;
background-color: green;
border: 1px solid red;
box-sizing: border-box;
/*flex: 1 0 23%;*/
width: 24.1%;
margin: 5px;
/*margin-bottom: 5px;*/
}
The output is the following:
Not sure if you mean this but what I understood from your question:
HTML:
<div class="divTable">
<div class="divTableBody">
<div class="divTableRow">
<div class="divTableCell"></div>
<div class="divTableCell"></div>
</div>
<div class="divTableRow">
<div class="divTableCell"></div>
<div class="divTableCell"></div>
</div>
<div class="divTableRow">
<div class="divTableCell"></div>
</div>
<div class="divTableRow">
<div class="divTableCell"></div>
</div>
</div>
</div>
CSS:
.divTable{
display: table;
width: 100%;
}
.divTableRow {
display: table-row;
}
.divTableHeading {
background-color: #EEE;
display: table-header-group;
}
.divTableCell, .divTableHead {
border: 1px solid #999999;
display: table-cell;
padding: 3px 10px;
}
.divTableHeading {
background-color: #EEE;
display: table-header-group;
font-weight: bold;
}
.divTableFoot {
background-color: #EEE;
display: table-footer-group;
font-weight: bold;
}
.divTableBody {
display: table-row-group;
}
If you want to use the display: grid the solution could look like this:
https://jsfiddle.net/uvrjs7op/
<div class='Wrapper'>
<div class='Item-A'></div>
<div class='Item-B'></div>
<div class='Item-C'></div>
<div class='Item-D'></div>
<div class='Item-E'></div>
<div class='Item-F'></div>
</div>
.Wrapper {
Display: grid;
grid-template-columns: 25% 25% 25% 25%;
grid-template-rows: 50px 50px;
Background: orange;
}
.Item-A{
grid-column-start: 1;
grid-column-end: 2;
Background: Green;
}
.Item-B{
grid-column-start: 2;
grid-column-end: 3;
Background: blue;
}
.Item-C{
grid-column-start: 3;
grid-column-end: 4;
Background: red;
}
.Item-D{
grid-column-start: 4;
grid-column-end: 5;
Background: brown;
}
.Item-E{
grid-column-start: 1;
grid-column-end: 3;
grid-row-start: 2;
Background: yellow;
}
.Item-F{
grid-column-start: 3;
grid-column-end: 5;
grid-row-start: 2;
Background: purple;
}
An easy solution will be
Solution
#wrapper {
display:grid;
grid-template-columns: repeat(4, 1fr);
grid-auto-rows: 1fr;
grid-column-gap: 5px;
width:100%;
}
#wrapper > div {
margin:10px;
background-color:#bada55;
}
<div id="wrapper">
<div id="first">first</div>
<div id="second">second</div>
<div id="third">third</div>
<div id="fourth">fourth</div>
<div id="fifth">fifth</div>
<div id="sixth">sixth</div>
</div>
I am a backend programmer by profession. But I have just started to learn flexbox and I want to hit the sky with flexbox.
So, I created a simplest design but which looks most complicated to me when creating it using flexbox.
Here is the design:
Guys, I am not able to figure out, how to use flexbox in such a case as there is no row or column. I don't know but is there anything like rowspan or colspan in flexbox that I can use to arrange these divs as shown in image above?
Here is my code:
HTML:
<div class="wrapper">
<div class="div-wrapper1">
<div class="inner-wrapper1">
<div class="div1"></div>
<div class="fake1"></div>
</div>
<div class="div2"></div>
</div>
<div class="div-wrapper2">
<div class="div3"></div>
<div class="inner-wrapper2">
<div class="fake2"></div>
<div class="div4"></div>
</div>
</div>
<div class="div-center"></div>
</div>
CSS:
.wrapper {
height: 200px;
width: 200px;
border: 1px solid black;
display: flex;
flex-direction: column;
}
.div-wrapper1 {
display: flex;
flex: 1;
}
.div-wrapper2 {
display: flex;
flex: 1
}
.inner-wrapper1 {
display: flex;
flex: 3;
flex-direction: column;
}
.div1 {
background-color: red;
display: flex;
flex: 3
}
.fake1 {
display: flex;
flex: 1
}
.div2 {
background-color: green;
display: flex;
flex: 2
}
.div3 {
background-color: blue;
display: flex;
flex: 2
}
.inner-wrapper2 {
display: flex;
flex: 3;
flex-direction: column;
}
.div4 {
background-color: yellow;
display: flex;
flex: 3
}
.fake2 {
display: flex;
flex: 1
}
.div-center {
background-color: black;
}
This is my output:
Here is the codepen
Maybe a solution is to simply add a negative margin to .div-wrapper1 and you will get the exact layout :
.wrapper {
height: 200px;
width: 200px;
border: 1px solid black;
display: flex;
flex-direction: column;
}
.div-wrapper1 {
display: flex;
flex: 1;
}
.div-wrapper2 {
display: flex;
flex: 1;
margin-top: -30px;
}
.div-wrapper3 {
display: flex;
flex: 1
}
.inner-wrapper1 {
display: flex;
flex: 3;
flex-direction: column;
}
.div1 {
background-color: red;
display: flex;
flex: 3
}
.fake1 {
display: flex;
flex: 1
}
.div2 {
background-color: green;
display: flex;
flex: 2
}
.div3 {
background-color: blue;
display: flex;
flex: 2
}
.inner-wrapper2 {
display: flex;
flex: 3;
flex-direction: column;
}
.div4 {
background-color: yellow;
display: flex;
flex: 3
}
.fake2 {
display: flex;
flex: 1
}
.div-center {
background-color: black;
}
<div class="wrapper">
<div class="div-wrapper1">
<div class="inner-wrapper1">
<div class="div1"></div>
<div class="fake1"></div>
</div>
<div class="div2"></div>
</div>
<div class="div-wrapper2">
<div class="div3"></div>
<div class="inner-wrapper2">
<div class="fake2"></div>
<div class="div4"></div>
</div>
</div>
<div class="div-center"></div>
</div>
And if you want here is another solution without any negative values and a content inside the white part (simply adjust height/width as you need) :
.first,
.second {
display: flex;
height: 100px;
width: 200px;
}
.first:before {
content: "";
background: red;
flex: 3;
}
.first:after {
content: "";
background: green;
flex: 2;
}
.second:before {
content: "";
background: blue;
flex: 2;
}
.second:after {
content: "";
background: yellow;
flex: 3;
}
.fake {
display: flex;
height: 20px;
width: 200px;
}
.fake a {
flex: 1;
text-align: center;
}
.fake:before {
content: "";
background: blue;
flex: 2;
}
.fake:after {
content: "";
background: green;
flex: 2;
}
<div class="first">
</div>
<div class="fake">
link
</div>
<div class="second">
</div>
Here is another solution by simply using multiple linear-gradient:
.box {
display: flex;
height: 220px;
width: 200px;
justify-content: center;
align-items: center;
background-image:linear-gradient(to right,red 66%,green 0%),
linear-gradient(to right,blue 33%,white 0%,white 66%,green 66%),
linear-gradient(to right,blue 33%,yellow 0%);
background-size:100% 100px,100% 20px,100% 100px;
background-position:top,center,bottom;
background-repeat:no-repeat;
}
<div class="box">
link
</div>
Can I accomplish this grid layout with flexbox? To have the first element take up 2 rows height and then continue after it?
Check image.
You can achive it by dividing this layout in 2 columns while the 2nd column will have a nested flexbox layout as well.
HTML Structure:
<div class="container">
<div class="col box1">1</div>
<div class="col col2">
<div class="box2">2</div>
<div class="box3">3</div>
<div class="box4">4</div>
<div class="box5">5</div>
</div>
</div>
Necessary Styles:
.container {
min-height: 100vh;
display: flex;
}
.col {
flex-grow: 1;
color: #fff;
}
.col2 {
flex-wrap: wrap;
display: flex;
}
.col2 > div {
flex-basis: 50%;
flex-grow: 1;
}
.box1 {
display: flex;
}
* {box-sizing: border-box;}
body {
margin: 0;
}
.container {
min-height: 100vh;
display: flex;
}
.col {
flex-grow: 1;
color: #fff;
}
.col2 {
flex-wrap: wrap;
display: flex;
}
.col2 > div {
flex-basis: 50%;
padding: 10px;
flex-grow: 1;
}
.box1 {
background: brown;
padding: 10px;
display: flex;
}
.box2 {
background: pink;
}
.box3 {
background: black;
}
.box4 {
background: yellow;
}
.box5 {
background: royalblue;
}
<div class="container">
<div class="col box1">1</div>
<div class="col col2">
<div class="box2">2</div>
<div class="box3">3</div>
<div class="box4">4</div>
<div class="box5">5</div>
</div>
</div>
You can use this HTML structure but you need to set fixed height on parent div. Then you just use flex-direction: column and flex-wrap: wrap.
* {
box-sizing: border-box;
}
.content {
height: 100vh;
display: flex;
flex-direction: column;
flex-wrap: wrap;
}
div div:first-child {
flex: 0 0 100%;
width: 50%;
background: #880015;
}
div div:not(:first-child) {
width: 25%;
flex: 0 0 50%;
border: 1px solid black;
}
<div class="content">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>
<div class="box">5</div>
</div>
I am new to flex box. I thought of creating a structure like this
I tried to create this but the last <div> d is always coming in a different row
http://codepen.io/srajagop/pen/wzyNVL
body {
margin: 0;
}
.foo {
display: flex;
flex-wrap: wrap;
flex-direction: row;
display: -webkit-flex;
-webkit-flex-wrap: wrap;
-webkit-flex-direction: row;
height: 400px;
}
.a, .d {
flex: 0 0 50%;
background: green;
height: 200px;
}
.b,.c {
flex: 0 0 25%;
height: 400px;
background: blue;}
.c {
background: red;}
.d {
background: grey;
}
How to solve this?
I wouldn't add a margin top property like the above answer. What you really need is a nested flex container, where you have a row flex container surrounding all items, then a column flex container surrounding a and b. Here is a snippet that generally outlines the idea:
.row,
.col {
display: flex;
}
.row {
flex-direction: row;
height: 400px;
}
.col {
flex: 0 0 50%;
flex-direction: column;
}
.a,
.b {
flex: 0 0 50%;
}
.a {
background-color: green;
}
.b {
background-color: red;
}
.c,
.d {
flex: 0 0 25%;
}
.c {
background-color: blue;
}
.d {
background-color: yellow;
}
<div class="row">
<div class="col">
<div class="a"></div>
<div class="b"></div>
</div>
<div class="c"></div>
<div class="d"></div>
</div>
Used the margin-top property. Seems working.
body {
margin: 0;
}
.foo {
display: flex;
flex-wrap: wrap;
flex-direction: row;
display: -webkit-flex;
-webkit-flex-wrap: wrap;
-webkit-flex-direction: row;
height: 400px;
}
.a,
.d {
flex: 0 0 50%;
background: green;
height: 200px;
}
.b,
.c {
flex: 0 0 25%;
height: 400px;
background: blue;
}
.c {
background: red;
}
.d {
background: grey;
margin-top: -200px;
}
<div class="foo">
<div class="a"></div>
<div class="b"></div>
<div class="c"></div>
<div class="d"></div>
</div>
I'm trying to make the layout below using flex:
Can I make this layout with flex?
.objectref-use .page-header {
display: flex;
flex-direction: row;
}
.objectref-use .page-header .header-col {
flex: 1;
display: flex;
}
.objectref-use .page-header .header-content {
display: flex;
flex-wrap: wrap;
flex-direction: column;
}
.objectref-use .page-header .header-content .together-content {
flex-wrap: nowrap;
}
.objectref-use .page-header .objectref-title {
margin-right: 8px;
}
.objectref-use .page-header .objectref-title.header-col {
justify-content: flex-start;
}
.objectref-use .page-header .objectref-title .header-content {
flex: 0 1 auto;
background: blue;
}
.objectref-use .page-header .objectref-timeline {
flex: 0 0 35px;
display: flex;
}
.objectref-use .page-header .objectref-timeline .header-content {
background: pink;
flex: 1 1 100%;
}
.objectref-use .page-header .objectref-menu.header-col {
justify-content: flex-end;
}
.objectref-use .page-header .objectref-menu .header-content {
flex: 0 1 auto;
background: green;
}
#media screen and (max-width: 768px) {
.page-header {
flex-direction: column;
}
.page-header .header-row {
flex-direction: row;
}
}
#media screen and (max-width: 480px) {
.page-header {
flex-direction: column;
}
.page-header .header-col {
flex: 1;
}
.page-header .objectef-timeline {
margin: 0;
}
}
<div class="objectref-use">
<div class="page-header">
<div class="header-col objectref-title">
<div class="header-content">
<h1>title here (can be loooong) [block 1]</h1>
<h6>text on next line</h6>
</div>
</div>
<div class="header-col objectref-timeline">
<div class="header-content">timeline [block 3]</div>
</div>
<div class="header-col objectref-menu">
<div class="header-content">
<div class="together-content">
few button groups here [block 2]
</div>
<h6>text on next line</h6>
</div>
</div>
</div>
</div>
This is the current CSS on Codepen. Thanks.
Yes, you can change the order of flex elements with the css order property.
Fiddle
Further you can change the width of flex elements, stack certain ones on top of each other, etc... by adjusting the flex values.
Check out this guide for more information.
Fiddle
ul {
display: -webkit-flex;
display: flex;
flex-wrap: wrap;
padding: 0;
margin: 0;
margin-bottom: 25px;
}
li {
background: lightblue;
text-align: center;
flex: 0 1 50%;
list-style: none;
}
.one {
background: green;
-webkit-order: 2;
order: 2;
}
.two {
background: olive;
-webkit-order: 3;
order: 3;
}
.three {
-webkit-order: 1;
order: 1;
flex: 1 0 100%;
}
.four, .five, .six {
border: 1px solid red;
flex: 1;
}
.seven, .eight, .nine {
border-bottom: 1px solid white;
flex: none;
display: block;
width: 100%;
}
<ul>
<li class="one">1</li>
<li class="two">2</li>
<li class="three">3</li>
</ul>
<ul>
<li class="four">1</li>
<li class="five">2</li>
<li class="six">3</li>
</ul>
<ul>
<li class="seven">1</li>
<li class="eight">2</li>
<li class="nine">3</li>
</ul>