I wanted to make a parent div with child div's scrollable. I've set fixed width for the child div's but they are shrinking. Therefore the div can't be scrollable.
<!DOCTYPE html>
<html>
<head>
<style>
#main {
width: 200px;
height: 200px;
border: 1px solid #c3c3c3;
display: flex;
flex-wrap: nowrap;
}
#main div {
width: 50px;
height: 50px;
}
</style>
</head>
<body>
<h1>The flex-wrap Property</h1>
<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>
<p><b>Note:</b> Internet Explorer 10 and earlier versions do not support the flex-wrap property.</p>
</body>
</html>
This will make the child divs scrollable (Vertically).
CSS
#main {
width: 200px;
height: 200px;
border: 1px solid #c3c3c3;
display: flex;
flex-wrap: nowrap;
flex-direction: column;
overflow-y: scroll;
}
#main div {
width: 100%;
height: 100%;
line-height: 47px;
}
Html
<h1>The flex-wrap Property</h1>
<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>
This will make the child divs scrollable (Horizontally)
CSS
#main {
width: 200px;
height: 200px;
border: 1px solid #c3c3c3;
display: flex;
flex-wrap: nowrap;
flex-direction: row;
overflow-x: scroll;
}
#main div {
width: 100%;
padding: 43px;
}
Html
<h1>The flex-wrap Property</h1>
<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>
#main {
width: 200px;
height: 200px;
border: 1px solid #c3c3c3;
display: flex;
flex-wrap: nowrap;
flex-direction: row;
overflow-x: scroll;
}
#main div {
width: 100%;
padding: 43px;
}
<h1>The flex-wrap Property</h1>
<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>
Related
I wonder if there is a flex-way to create fluid like behaviour of the parent container: by moving red boxes n1 and n2 to the left of the blue box n3 and as a result moving the red box n3 to the left side of the container
.parent {
display: flex;
width: 525px;
flex-wrap: wrap;
background-color: green;
}
.child {
flex-wrap: wrap;
display: flex;
}
.box {
width: 100px;
height: 100px;
margin: 5px;
}
.blue .box {
background-color: blue;
}
.red .box {
background-color: red;
}
<div class='parent'>
<div class='child blue'>
<div class='box'>1</div>
<div class='box'>2</div>
<div class='box'>3</div>
</div>
<div class='child red'>
<div class='box'>1</div>
<div class='box'>2</div>
<div class='box'>3</div>
</div>
</div>
You can use display:contents (https://caniuse.com/#feat=css-display-contents) on .child elements making the boxes behaving as they was child of the .parent element.
.parent {
display: flex;
width: 555px;
flex-wrap: wrap;
background-color: green;
}
.child {
flex-wrap: wrap;
display: flex;
display:contents
}
.box {
width: 100px;
height: 100px;
margin: 5px;
}
.blue .box {
background-color: blue;
}
.red .box {
background-color: red;
}
<div class='parent'>
<div class='child blue'>
<div class='box'>1</div>
<div class='box'>2</div>
<div class='box'>3</div>
</div>
<div class='child red'>
<div class='box'>1</div>
<div class='box'>2</div>
<div class='box'>3</div>
</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>
Instead of having my columns from stacking when the browser viewport shrinks, I want the columns to remain as they are but have a horizontal scroll bar to appear so people on smaller devices can just swipe right to scroll.
Is this possible since I am using flex?
body {
color: #333;
font-family: Helvetica Neue,Arial,Helvetica,sans-serif;
font-size: 14px;
line-height: 20px;
font-weight: 400;
}
.board-container {
background-color: rgb(0, 121, 191);
height: 100%;
position: relative;
background-size: cover;
overflow: hidden;
}
#board-surface {
display: flex;
flex-direction: column;
}
#board-surface, body, html {
height: 100%;
}
#content {
flex-grow: 1;
overflow-y: auto;
outline: none;
}
.board-wrapper {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
.board-main-content {
height: 100%;
display: flex;
flex-direction: column;
margin-right: 0;
transition: margin .1s ease-in;
}
.board-canvas {
position: relative;
flex-grow: 1;
}
/*#board {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
white-space: nowrap;
margin-bottom: 8px;
overflow-x: auto;
overflow-y: hidden;
padding-bottom: 8px;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}*/
.list-wrapper {
width: 272px;
margin: 0 4px;
height: 100%;
box-sizing: border-box;
display: inline-block;
vertical-align: top;
white-space: nowrap;
background-color: #cccccc;
}
.list {
background: #e2e4e6;
border-radius: 3px;
box-sizing: border-box;
display: flex;
flex-direction: column;
max-height: 100%;
position: relative;
white-space: normal;
}
.list-card {
background-color: #fff;
border-radius: 3px;
box-shadow: 0 1px 0 #ccc;
cursor: pointer;
display: block;
margin-bottom: 8px;
max-width: 300px;
min-height: 20px;
position: relative;
text-decoration: none;
z-index: 0;
}
<html>
<head>
<title></title>
</head>
<body>
<div class="board-container">
<div class="board-inner">
<div id="board-surface">
<div id="header">
main header goes here
</div>
<div id="content">
<div class="board-wrapper">
<div class="board-main-content">
<div class="board-header">board header</div>
<div class="board-canvas">
<div id="board">
<div class="list-wrapper">
<div class="list">
<div class="list-header">list header</div>
<div class="list-cards">
<div class="list-card">
this is a list card
</div>
<div class="list-card">
this is a list card
</div>
<div class="list-card">
this is a list card
</div>
<div class="list-card">
this is a list card
</div>
</div>
</div>
</div> <!-- /list-wrapper -->
<div class="list-wrapper">
<div class="list">
<div class="list-header">list header</div>
<div class="list-cards">
<div class="list-card">
this is a list card
</div>
<div class="list-card">
this is a list card
</div>
<div class="list-card">
this is a list card
</div>
<div class="list-card">
this is a list card
</div>
</div>
</div>
</div> <!-- /list-wrapper -->
<div class="list-wrapper">
<div class="list">
<div class="list-header">list header</div>
<div class="list-cards">
<div class="list-card">
this is a list card
</div>
<div class="list-card">
this is a list card
</div>
<div class="list-card">
this is a list card
</div>
<div class="list-card">
this is a list card
</div>
</div>
</div>
</div> <!-- /list-wrapper -->
<div class="list-wrapper">
<div class="list">
<div class="list-header">list header</div>
<div class="list-cards">
<div class="list-card">
this is a list card
</div>
<div class="list-card">
this is a list card
</div>
<div class="list-card">
this is a list card
</div>
<div class="list-card">
this is a list card
</div>
</div>
</div>
</div> <!-- /list-wrapper -->
</div> <!-- /board-->
</div>
</div>
</div>
</div>
<div id="footer">
</div>
</div>
</div>
</div>
</body>
</html>
DEMO: https://codepen.io/anon/pen/wxJGMx?editors=0110
I was able to achieve a horizontal scroll on flex container. I've given min-width to .list-wrapper and have added the below styles to #board item:
.list-wrapper {
min-width: 272px;
width: 272px;
margin: 0 4px;
height: 100%;
box-sizing: border-box;
display: inline-block;
vertical-align: top;
white-space: nowrap;
background-color: #cccccc;
}
#board {
display: flex;
overflow: scroll;
}
I would like to have the parent (orange border) only grow to the size of the first child (grey background) and have the second child overflow vertically.
This is what I have:
This is what I want:
Codepen: https://codepen.io/gbucher/pen/wPGBpN
HTML:
<div class='parent'>
<div class='child1'>
</div>
<div class='child2'>
<div class='elem'>
A
</div>
<div class='elem'>
B
</div>
<div class='elem'>
C
</div>
<div class='elem'>
D
</div>
<div class='elem'>
E
</div>
</div>
</div>
CSS:
.parent {
border: 2px solid orange;
display: flex;
/* How to make it work without a fixed
height ?
height:60px;
*/
}
.child1 {
height: 60px;
width: 300px;
background: #888;
}
.child2 {
display: flex;
flex-direction: column;
overflow-y: auto;
}
.elem {
border: 1px solid black;
margin-top: -1px;
padding: 3px;
width: 10rem;
}
When computing the size of a parent, absolute positioned children are ignored.
The solution is thus to use a scroll wrapper around the second child. The wrapper should have position: relative and the scrolling child should have position: absolute.
.parent {
border: 2px solid orange;
display: flex;
}
.child1 {
height: 70px;
flex-grow: 1;
background: #888;
}
.child2 {
display: flex;
flex-direction: column;
position: absolute;
background: orange;
}
.scroll {
position: relative;
overflow-y: scroll;
overflow-x: hidden;
width: 323px;
background: green;
}
.elem {
border: 1px solid black;
margin-top: -1px;
padding: 3px;
width: 300px;
}
<div class='parent'>
<div class='child1'>
one
</div>
<div class='scroll'>
<div class='child2'>
<div class='elem'>
A
</div>
<div class='elem'>
B
</div>
<div class='elem'>
C
</div>
<div class='elem'>
D
</div>
<div class='elem'>
E
</div>
</div>
</div>
</div>
I have container with div elemenents
.container {
display: flex;
justify-content: space-between;
}
How to make one element positioned at the center on this block, and others to be space-between.
.container {
display: flex;
justify-content: space-between;
}
.container div {
height: 50px;
}
.one,
.four,
.seven {
background-color: red;
width: 200px;
}
.two,
.six {
background-color: green;
width: 100px;
}
.three,
.five {
background-color: yellow;
width: 150px;
}
.center {
width: 300px;
background-color: black;
}
<div class="container">
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
<div class="center"></div>
<div class="four"></div>
<div class="five"></div>
<div class="six"></div>
<div class="seven"></div>
</div>
jsFiddle
Based on how dynamic you want this to be, here is a suggestion where the items on the left and on the right side of the center element are wrapped.
The left and right get 50% each minus the width of the center (150px for each side), which will put the center in the middle.
Updated fiddle
Stack snippet
.container {
display: flex;
justify-content: space-between;
}
.container div {
height: 50px;
}
.left, .right {
display: flex;
justify-content: space-between;
flex-basis: calc(50% - 150px);
}
.one,
.four,
.seven {
background-color: red;
flex-basis: 200px;
}
.two,
.six {
background-color: green;
flex-basis: 100px;
}
.three,
.five {
background-color: yellow;
flex-basis: 150px;
}
.center {
flex-basis: 300px;
background-color: black;
}
<div class="container">
<div class="left">
<div class="one">
</div>
<div class="two">
</div>
<div class="three">
</div>
</div>
<div class="center">
</div>
<div class="right">
<div class="four">
</div>
<div class="five">
</div>
<div class="six">
</div>
<div class="seven">
</div>
</div>
</div>
By adding a pseudo to each side wrapper, we can also make it behave similar to how space-between work without the wrappers (though still with center centered).
In this fiddle demo (and below Stack snippet) I changed the width's so one easier can see how it behaves in full screen.
.container {
display: flex;
justify-content: space-between;
}
.container div {
height: 50px;
}
.left, .right {
display: flex;
justify-content: space-between;
flex-basis: calc(50% - 100px);
}
.left::after,
.right::before {
content: '';
}
.one,
.four,
.seven {
background-color: red;
flex-basis: 125px;
}
.two,
.six {
background-color: green;
flex-basis: 25px;
}
.three,
.five {
background-color: yellow;
flex-basis: 75px;
}
.center {
flex-basis: 200px;
background-color: black;
}
<div class="container">
<div class="left">
<div class="one">
</div>
<div class="two">
</div>
<div class="three">
</div>
</div>
<div class="center">
</div>
<div class="right">
<div class="four">
</div>
<div class="five">
</div>
<div class="six">
</div>
<div class="seven">
</div>
</div>
</div>