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>
Related
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>
How to reduce the vertical spacing between text and make the text center aligned?
.item{
border: 1px solid;
display: flex;
align-items: center;
flex-wrap: wrap;
height: 200px;
margin: 4px;
float: left;
text-align: center;
width: 200px;
}
h3, h4{
margin: 0;
width: 100%;
}
<div class="item">
<h3>Title1</h3>
<h4>Title2</h4>
</div>
<div class="item">
<h3>Title1</h3>
<h4>Title2</h4>
</div>
<div class="item">
<h3>Title1</h3>
<h4>Title2</h4>
</div>
Remove flex-wrap: wrap; and add justify-content: center; flex-direction: column;
.item{
border: 1px solid;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
height: 200px;
margin: 4px;
float: left;
text-align: center;
width: 200px;
}
h3, h4{
margin: 0;
width: 100%;
}
<div class="item">
<h3>Title1</h3>
<h4>Title2</h4>
</div>
<div class="item">
<h3>Title1</h3>
<h4>Title2</h4>
</div>
<div class="item">
<h3>Title1</h3>
<h4>Title2</h4>
</div>
I wan't to center an image in my flex navbar but i can't, i already tried this: How to center an image within a flex item (cell), but doesn't work.
nav {
width: 100%;
display: flex;
justify-content: space-between;
border-radius: 1.5em;
}
nav #this img {
height: 5em;
width: 5em;
}
.item {
width: 45%;
display: flex;
justify-content: space-around;
line-height: 3.2em;
font-size: 1.75em;
}
.login {
width: 20%;
display: flex;
justify-content: space-around;
align-self: center;
}
<nav>
<div class="item">
<div> Content </div>
<div> Content </div>
</div>
<div id="myimage">
<img src="https://via.placeholder.com/150x50">
</div>
<div class="login">
<div> Content </div>
<div> Content </div>
<div> Content </div>
<div> Content </div>
<div> Content </div>
</div>
</nav>
I just update your CSS with few updates. Try this I hope it'll help you out. Thanks
nav {
width: 100%;
display: flex;
justify-content: space-between;
border-radius: 1.5em;
}
nav #this img {
height: 5em;
width: 5em;
}
.item {
width: 45%;
display: flex;
justify-content: space-around;
font-size: 1.75em;
}
.login {
width: 20%;
display: flex;
justify-content: space-around;
align-self: center;
}
.flexItem {
flex: 1;
flex-wrap: wrap;
align-items: center;
}
<nav>
<div class="item flexItem">
<div> Content </div>
<div> Content </div>
</div>
<div id="myimage">
<img src="https://via.placeholder.com/150x50">
</div>
<div class="login flexItem">
<div> Content </div>
<div> Content </div>
<div> Content </div>
<div> Content </div>
<div> Content </div>
</div>
</nav>
I dont know exactly what are you doing with this:
nav #this img {
height: 5em;
width: 5em;
}
i think you wanted something like this:
nav #myimage img {
height: 5em;
width: 5em;
}
To center in flexbox, use the justify-content to the primary axis and align-items to the secondary in the flexbox parent element.
in this case you can do it at nav and align the 3 directly children divs at center.
nav {
width: 100%;
display: flex;
justify-content: space-between;
border-radius: 1.5em;
align-items: center;
}
instead if you want to positionate the image in its parent div, its the same, set display: flex and align items to the parent element (#myimage):
#myimage{
display:flex;
align-items:center;
}
nav {
width: 100%;
display: flex;
justify-content: space-between;
border-radius: 1.5em;
}
nav #this img {
height: 5em;
width: 5em;
}
.item {
width: 45%;
display: flex;
justify-content: space-around;
line-height: 3.2em;
font-size: 1.75em;
}
.login {
width: 20%;
display: flex;
justify-content: space-around;
align-self: center;
}
#myimage {
display: flex;
justify-content: center;
align-items: center;
}
<nav>
<div class="item">
<div> Content </div>
<div> Content </div>
</div>
<div id="myimage">
<img src="https://via.placeholder.com/150x50">
</div>
<div class="login">
<div> Content </div>
<div> Content </div>
<div> Content </div>
<div> Content </div>
<div> Content </div>
</div>
</nav>
I want to achieve the following scenario with flexbox
the green element is a text element and the width is flexible. The blue elements should have 100% of the remaining width beside the green element.
My current solution looks like this:
<div class="container">
<span class="title">title</span>
<div class="fullwidth"></div>
<div class="fullwidth"></div>
<div class="fullwidth"></div>
</div>
and the css:
.container {
display: flex;
align-items: center;
flex-wrap: wrap;
background-color: #EAEBEF;
.title {
padding: 20px;
background-color: #48CFAE;
}
.fullwidth {
background-color: #87BDFF;
flex: 0 0 100%;
height: 60px;
margin: 10px 0;
}
}
But it looks currently like this
here is a codepen example
Without changing the HTML this can be managed with CSS-Grid as an alternative to flexbox.
.container {
display: grid;
grid-template-columns: max-content 1fr;
grid-gap: 1em;
background-color: #EAEBEF;
margin-bottom: 1em;
}
.title {
padding: 10px;
grid-row: 2;
background-color: #48CFAE;
}
.fullwidth {
grid-column: 2;
background-color: #87BDFF;
height: 40px;
}
<div class="container">
<div class="title">title</div>
<div class="fullwidth"></div>
<div class="fullwidth"></div>
<div class="fullwidth"></div>
</div>
<div class="container">
<div class="title">Longer title</div>
<div class="fullwidth"></div>
<div class="fullwidth"></div>
<div class="fullwidth"></div>
</div>
Try this HTML and CSS markup. Basically You need to keep the left side in one div and the right side elements in another div.
.container {
display: flex;
align-items: center;
flex-wrap: nowrap;
background-color: #eaebef;
}
.container .title {
padding: 20px;
background-color: #48cfae;
}
.container .div1 {
width: 20%;
}
.container .div2 {
width: 80%;
}
.container .fullwidth {
background-color: #87bdff;
height: 60px;
margin: 10px 0;
}
<div class="container">
<div class="div1">
<span class="title">title</span>
</div>
<div class="div2">
<div class="fullwidth"></div>
<div class="fullwidth"></div>
<div class="fullwidth"></div>
</div>
</div>
See code below:
You have to warp fullwidth in div and set width to this div
also set width and margin to title
.container {
display: flex;
align-items: center;
flex-wrap: wrap;
background-color: #EAEBEF;
}
.title {
width: 20%;
padding: 20px;
background-color: #48CFAE;
margin-left: 15px;
}
.fullwidth {
background-color: #87BDFF;
flex: 0 0 100%;
height: 60px;
margin: 10px 0;
}
.a{
margin: 50px;
width: 50%;
}
<div class="container">
<span class="title">title</span>
<div class="a">
<div class="fullwidth"></div>
<div class="fullwidth"></div>
<div class="fullwidth"></div>
</div>
</div>
If you want to achive this without change your html but only your less, try this:
.container {
display: flex;
flex-direction: row;
align-items: center;
flex-wrap: wrap;
background-color: #EAEBEF;
justify-content: flex-end;
.title {
padding: 20px;
background-color: #48CFAE;
margin-right: 20px;
flex-grow: 1
}
.fullwidth {
background-color: #87BDFF;
height: 60px;
margin: 10px 0;
width: 80%;
}
}
your codepen edited
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>