I'm trying to get my content to display like this
picture
But mine shows up like this picture
How do I make it so one row has 3 columns, the second one has 4 and the last has 3? with flexbox? Thank you
.flex-container {
display: flex;
flex-flow: row wrap;
justify-content: center;
background-color: white;
align-items:baseline;
width: 60em;
margin: auto;
padding: .5em;
justify-content: space-between;
}
.flex-container div {
flex: 1 0 30%;
margin: .5em 0;
text-align: center;
line-height: 1.5em;
font-size: 1em;
border: 0.1em solid black;
padding: 5px;
box-sizing: border-box;
justify-content: space-between;
}
You can accomplish this by placing the cells into rows which themselves are stacked using flex-direction: column.
The styling is crude, but try something like this:
.outer {
display: flex;
flex-direction: column;
}
.row {
display: flex;
flex-direction: row;
}
.cell {
margin: 1.0em;
padding: 1.0em;
border: 1px solid black;
flex-grow: 1;
}
<div class="outer">
<div class="row">
<div class="cell">Cell 1</div>
<div class="cell">Cell 2</div>
<div class="cell">Cell 3</div>
</div>
<div class="row">
<div class="cell">Cell 3</div>
<div class="cell">Cell 4</div>
<div class="cell">Cell 5</div>
<div class="cell">Cell 6</div>
</div>
<div class="row">
<div class="cell">Cell 7</div>
<div class="cell">Cell 8</div>
<div class="cell">Cell 9</div>
</div>
</div>
Related
How do I expand the div#wrapper outside its parent by its child item's width.item like the image below?
I have tried translate but the result is not ideal. The hardest part is that I cannot programmatically expand it with the item's width, but hard code it with translate like 90px which causes a problem when the screen is resized (please use the developer tool to resize and you will get my point).
I cannot use position: absolute; because there are some elements before the #wrapper.
Below is my try:
#main {
background-color: gray;
display: flex;
height: 600px;
justify-content: stretch;
}
#first,
#second {
width: 50%;
}
#first {
align-items: center;
background-color: blue;
display: flex;
flex-direction: column;
padding: 30px 0 30px 30px;
}
#wrapper {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
transform: translateX(90px);
width: 100%;
}
.item {
background-color: orange;
border: 3px solid #000;
height: 50px;
width: 100%;
}
<div id="main">
<div id="first">
<p>Some text...</p>
<p>Some text...</p>
<p>Some text...</p>
<div id="wrapper">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
</div>
<div id="second">
</div>
</div>
Do you mean something like this?
#main {
background-color: gray;
display: flex;
height: 600px;
justify-content: stretch;
}
#first,
#second {
width: 50%;
}
#first {
align-items: center;
background-color: blue;
display: flex;
flex-direction: column;
padding: 30px 0 30px 30px;
}
#wrapper {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
width: 100%;
position:relative;
margin-right:-66%;
}
.item {
background-color: orange;
border: 3px solid #000;
height: 50px;
width: 100%;
}
<div id="main">
<div id="first">
<p>Some text...</p>
<p>Some text...</p>
<p>Some text...</p>
<div id="wrapper">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
</div>
<div id="second">
</div>
</div>
I have a grid that uses display: contents. Unfortunately, this declaration still isn't widely supported. I'm trying to substitute it with something that's more widely supported and that wouldn't break my current grid design. Any help would be greatly appreciated.
Here's the code:
.grid-row {
display: contents;
}
.grid-row:hover > div {
background-color: #262626;
color: #fff;
}
.grid-cell {
background-color: #000;
color: #808080;
padding: .5rem;
min-height: 4rem;
display: flex;
align-items: center;
justify-content: flex-start;
position: relative;
}
.grid {
margin: 0 auto;
display: grid;
grid-gap: 1px;
background-color: #808080 !important;
border: 1px solid #808080 !important;
grid-template-columns: repeat(3, 1fr);
grid-template-columns: auto min-content min-content;
white-space: pre-wrap !important;
}
<div class="grid">
<div class="grid-cell"></div>
<div class="grid-cell">Price</div>
<div class="grid-cell">Quantity</div>
<div class="grid-row">
<div class="grid-cell">Item 1</div>
<div class="grid-cell">10.00</div>
<div class="grid-cell">1</div>
</div>
<div class="grid-row">
<div class="grid-cell">Item 2</div>
<div class="grid-cell">20.00</div>
<div class="grid-cell">2</div>
</div>
<div class="grid-row">
<div class="grid-cell">Item 3</div>
<div class="grid-cell">30.00</div>
<div class="grid-cell">3</div>
</div>
</div>
You could convert it into table:
.grid-row {
display: table-row;
}
.grid-row:hover > div {
background-color: #262626;
color: #fff;
}
.grid-cell {
background-color: #000;
color: #808080;
padding: .5rem;
line-height: 4rem;
display: table-cell;
position: relative;
}
.grid {
margin: 0 auto;
display: table;
background-color: #808080 !important;
white-space: pre-wrap !important;
border-spacing: 1px;
}
.grid > :first-of-type
{
width: 100%;
}
<div class="grid">
<div class="grid-cell"></div>
<div class="grid-cell">Price</div>
<div class="grid-cell">Quantity</div>
<div class="grid-row">
<div class="grid-cell">Item 1</div>
<div class="grid-cell">10.00</div>
<div class="grid-cell">1</div>
</div>
<div class="grid-row">
<div class="grid-cell">Item 2</div>
<div class="grid-cell">20.00</div>
<div class="grid-cell">2</div>
</div>
<div class="grid-row">
<div class="grid-cell">Item 3</div>
<div class="grid-cell">30.00</div>
<div class="grid-cell">3</div>
</div>
</div>
I want to have columns in which X amount of items can be placed and i want them to start from position 0 and stack up with auto height:
<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
display: grid;
grid-template-columns: auto auto auto;
background-color: #2196F3;
padding: 10px;
align-items:start;
}
.grid-item {
background-color: rgba(255, 255, 255, 0.8);
border: 1px solid rgba(0, 0, 0, 0.8);
padding: 20px;
font-size: 30px;
text-align: center;
}
.item-1{grid-column-start:1; grid-column-end:1; grid-auto-rows: auto;}
.item-2{grid-column-start:1; grid-column-end:1; grid-auto-rows: auto;}
.item-3{grid-column-start:2; grid-column-end:2; grid-auto-rows: auto;}
.item-4{grid-column-start:3; grid-column-end:3; grid-auto-rows: auto;}
</style>
</head>
<body>
<div class="grid-container">
<div class="grid-item item-1">1</div>
<div class="grid-item item-1">2</div>
<div class="grid-item item-3">3</div>
<div class="grid-item item-4">4</div>
</div>
</body>
</html>
JSfiddle
This is a drawing what i want to achieve:
Wanted result image
Using flex box you can do something like this :
.style {
border: 5px solid black;
}
.grid-container {
display: flex;
flex-direction: row;
justify-content: space-between;
}
.grid-item {
height: 200px;
width: 20%;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.item {
width: 100%;
height: 50px;
}
.item-spe {
height: 50px
}
<div class="grid-container">
<div class="grid-item">
<div class="item style"></div>
<div class="item style"></div>
<div class="item style"></div>
</div>
<div class="grid-item style"></div>
<div class="grid-item style item-spe"></div>
<div class="grid-item style"></div>
</div>
I want to display items in reverse order horizontally with left alignment
here is my working fiddle, but items are aligned to right.
#main {
width: 400px;
height: 400px;
border: 1px solid #c3c3c3;
display: flex;
flex-direction: row-reverse;
align-items: flex-start;
}
#main div {
width: 50px;
height: 50px;
}
<div id="main">
<div style="background-color:coral;">A</div>
<div style="background-color:lightblue;">B</div>
<div style="background-color:khaki;">C</div>
<div style="background-color:pink;">D</div>
<div style="background-color:lightgrey;">E</div>
<div style="background-color:lightgreen;">F</div>
</div>
can someone help me, thanks in advance.
You need to specify justify-content: flex-end;
#main {
width: 400px;
height: 400px;
border: 1px solid #c3c3c3;
display: flex;
flex-direction: row-reverse;
align-items: flex-start;
justify-content: flex-end;
}
#main div {
width: 50px;
height: 50px;
}
<div id="main">
<div style="background-color:coral;">A</div>
<div style="background-color:lightblue;">B</div>
<div style="background-color:khaki;">C</div>
<div style="background-color:pink;">D</div>
<div style="background-color:lightgrey;">E</div>
<div style="background-color:lightgreen;">F</div>
</div>
I'm trying to create this: http://imgur.com/G2TpjDR
What I have: https://jsfiddle.net/tzayffsv/
I use flexbox with params: flex-direction: column, flex-wrap: wrap. The Problem is that items going outside the screen when wrapping... Any ideas how to do this using flexbox (or mbe other ideas)? I don't look for solutions with javascript and positioning items as absolute..
<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
</div>
This works. flex-flow: column wrap-reverse;
.box {
height:200px;
width:300px;
background:grey;
display: flex;
flex-flow: column wrap-reverse;
justify-content: center;
align-content: flex-start;
align-items: flex-end;
}
.item {
flex: 0 1 auto;
align-self: auto;
min-width: 0;
min-height: 40%;
border:1px solid black;
}
<div class="box">
<div class="item">A</div>
<div class="item">B</div>
<div class="item">C</div>
</div>
This is not directly related to flexbox, you only need to set the direction of the text to be right-to-left. This can be easily achieved with
.container {
direction: rtl;
}
.container {
direction: rtl;
display: flex;
flex-direction: column;
flex-wrap: wrap;
position: absolute;
top: 0;
right: 50px;
height: 600px;
}
.item {
width: 200px;
height: 140px;
line-height: 60px;
background-color: #618ae4;
margin-top: 10px;
margin-left: 10px;
text-align: center;
font-weight: bold;
font-size: 30px;
color: #fff;
}
<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
</div>