My goal is to place 5 boxes on the corner and in the center.
like this
These are my codes:
.container {
width: 240px;
height: 200px;
border: 1px solid gray;
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-between;
align-content: space-between;
}
.container > div {
width: 80px;
height: 50px;
border: 1px solid red;
display: flex;
justify-content: center;
align-items: center;
}
<body>
<div class="container">
<div id="one"> 1</div>
<div id="two"> 2</div>
<div id="three">3</div>
<div id="four"> 4</div>
<div id="five"> 5</div>
</div>
</body>
How can I change the code so that the fifth block is in the center and the others are orderly on the corner?
Since you're using flex, you might set order property of the flex-items:
.container {
width: 240px;
height: 200px;
border: 1px solid gray;
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-between;
align-content: space-between;
}
.container>div {
width: 80px;
height: 50px;
border: 1px solid red;
display: flex;
justify-content: center;
align-items: center;
}
#one,
#two {
order: 1;
}
#three,
#four {
order: 3
}
#five {
order: 2;
margin: 0 78px;
}
<div class="container">
<div id="one"> 1</div>
<div id="two"> 2</div>
<div id="three">3</div>
<div id="four"> 4</div>
<div id="five"> 5</div>
</div>
.container {
width: 240px;
height: 200px;
border: 1px solid gray;
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-between;
align-content: space-between;
position: relative;
}
.container > div {
width: 80px;
height: 50px;
border: 1px solid red;
display: flex;
justify-content: center;
align-items: center;
}
#five {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
<body>
<div class="container">
<div id="one"> 1</div>
<div id="two"> 2</div>
<div id="three">3</div>
<div id="four"> 4</div>
<div id="five"> 5</div>
</div>
</body>
Add position: relative; to the container so that div#5 is placed relative to it.
left: 50%; top: 50%; transform: translate(-50%, -50%); is a classic method to center a div.
Related
So I have 2 <div> tags in my body, and I want them both to be in one line. However, it automatically makes a line break. Is there a way to fix this?
.firstDiv {
display: flex;
justify-content: center;
align-items: center;
width: 100px;
height: 150px;
border-radius: 30%;
background-color: grey;
}
.secondDiv {
display: flex;
justify-content: center;
align-items: center;
width: 100px;
height: 150px;
border-radius: 30%;
background-color: grey;
margin-left: 10px;
}
.mainDiv {
display:flex;
flex-direction: row;
}
<div class="mainDiv">
<div class="firstDiv">
First Div
</div>
<div class="secondDiv">
Second Div
</div>
</div>
Use display inline block
.content {
width: 100px;
height: 100px;
display: inline-block;
background-color: black;
}
<div class="content">Content</div>
<div class="content">Content</div>
I'm building a list of boxes that can be scrolled by the user. Each item can be deleted if the user clicks on the buttons:
Here is my current code:
body {
margin: 0;
padding: 0;
}
.Container {
display: flex;
flex-direction: column;
width: 400px;
padding: 10px;
border: 1px solid #cdcdcd;
}
.ItemsContainer {
flex-direction: column;
width: 100%;
overflow-y: scroll;
}
.ItemContainer {
display: flex;
flex-direction: row;
padding: 4px;
margin-bottom: 4px;
border: 1px solid #202020;
width: 100%;
}
.ItemContent {
display: flex;
flex-direction: column;
width: 100%;
border: 1px solid blue;
}
.ItemHeader {
display: flex;
flex-direction: row;
justify-content: space-between;
width: 100%;
font-size: 14px;
color: #202020;
}
.ItemValue {
display: flex;
flex-direction: row;
justify-content: space-between;
width: 100%;
font-size: 14px;
font-weight: bold;
min-height: 20px;
}
.ItemButton {
display: flex;
align-items: center;
justify-content: center;
align-self: flex-end;
background-color: red;
}
<div class="Container">
<div>HEADER</div>
<div class="ItemsContainer">
<div class="ItemContainer">
<div class="ItemContent">
<div class="ItemHeader">
<div>LINE 1</div>
<div>Line 1 comment</div>
</div>
<div class="ItemValue">Value 1</div>
</div>
<div class="ItemButton">X</div>
</div>
<div class="ItemContainer">
<div class="ItemContent">
<div class="ItemHeader">
<div>LINE 2</div>
<div>Line 2 comment</div>
</div>
<div class="ItemValue">Value 2</div>
</div>
<div class="ItemButton">X</div>
</div>
<div class="ItemContainer">
<div class="ItemContent">
<div class="ItemHeader">
<div>LINE 3</div>
<div>Line 3 comment</div>
</div>
<div class="ItemValue">Value 3</div>
</div>
<div class="ItemButton">X</div>
</div>
</div>
</div>
I'm getting a strange behaviour, as the rightmost div that contains the "X" button (red div) is not going full height (the height of the main div - blue bordered).
I'm using flex as the main strategy to build this and wanna keep it if possible.
Delete align-self: flex-end; from the button.
body {
margin: 0;
padding: 0;
}
.Container {
display: flex;
flex-direction: column;
width: 400px;
padding: 10px;
border: 1px solid #cdcdcd;
}
.ItemsContainer {
flex-direction: column;
width: 100%;
overflow-y: scroll;
}
.ItemContainer {
display: flex;
flex-direction: row;
padding: 4px;
margin-bottom: 4px;
border: 1px solid #202020;
width: 100%;
}
.ItemContent {
display: flex;
flex-direction: column;
width: 100%;
border: 1px solid blue;
}
.ItemHeader {
display: flex;
flex-direction: row;
justify-content: space-between;
width: 100%;
font-size: 14px;
color: #202020;
}
.ItemValue {
display: flex;
flex-direction: row;
justify-content: space-between;
width: 100%;
font-size: 14px;
font-weight: bold;
min-height: 20px;
}
.ItemButton {
display: flex;
align-items: center;
justify-content: center;
background-color: red;
}
<div class="Container">
<div>HEADER</div>
<div class="ItemsContainer">
<div class="ItemContainer">
<div class="ItemContent">
<div class="ItemHeader">
<div>LINE 1</div>
<div>Line 1 comment</div>
</div>
<div class="ItemValue">Value 1</div>
</div>
<div class="ItemButton">X</div>
</div>
<div class="ItemContainer">
<div class="ItemContent">
<div class="ItemHeader">
<div>LINE 2</div>
<div>Line 2 comment</div>
</div>
<div class="ItemValue">Value 2</div>
</div>
<div class="ItemButton">X</div>
</div>
<div class="ItemContainer">
<div class="ItemContent">
<div class="ItemHeader">
<div>LINE 3</div>
<div>Line 3 comment</div>
</div>
<div class="ItemValue">Value 3</div>
</div>
<div class="ItemButton">X</div>
</div>
</div>
</div>
I'm trying to create a flex row with a growth of 2 and then a wrap but can't understand why it is not working properly.
Here is the CSS and HTML.
.flex {
height: 50px;
width: 50px;
background-color: black;
}
.flex1 {
height: 50px;
width: 50px;
background-color: yellow;
margin-left: 50px;
}
.flex2 {
height: 50px;
width: 50px;
background-color: green;
margin-left: 50px;
}
.flexcontainer {
display: flex;
flex-wrap: wrap;
flex-grow: 2;
flex-direction: row;
}
<div class="flexcontainer">
<div class="flex">
<div class="flex1">
<div class="flex2">
</div>
</div>
</div>
</div>
The way you implement the flex-grow is totally wrong because the flex-grow have to be applied to child elements as shown in below code snippet as a example.
#content {
display: flex;
justify-content: space-around;
flex-flow: row wrap;
align-items: stretch;
}
.box {
flex-grow: 1;
border: 3px solid rgba(0,0,0,.2);
}
.box1 {
flex-grow: 2;
border: 3px solid rgba(0,0,0,.2);
}
<h4>This is a Flex-Grow</h4>
<div id="content">
<div class="box" style="background-color:red;">A</div>
<div class="box" style="background-color:lightblue;">B</div>
<div class="box" style="background-color:yellow;">C</div>
<div class="box1" style="background-color:brown;">D</div>
<div class="box1" style="background-color:lightgreen;">E</div>
<div class="box" style="background-color:brown;">F</div>
</div>
To read more about flex-grow, you should learn from there : https://developer.mozilla.org/en-US/docs/Web/CSS/flex-grow
I'm trying to create a Slider Layout with flex boxes, like this photo :
Here I've big photo at right side and thumbnail items on the left. I want to align left side and thumbnails wrapper with big photo height. But unfortunately It's not possible only with flex boxes and I should check big photo height with JavaScript and align left side with that.
For example check this code:
main{
position: absolute;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
display: flex;
align-items: center;
justify-content: center;
}
.wrapper{
width: 500px;
overflow: hidden;
background: gray;
display: flex;
align-items: flex-start;
justify-content: center;
}
.right{
width: calc(100% - 150px);
height: 450px;
background: red;
}
.left{
width: 150px;
display: flex;
align-items: center;
justify-content: space-between;
flex-direction: column;
}
.item{
width: 100%;
height: 50px;
color: white;
background: green;
display: flex;
align-items: center;
justify-content: center;
}
<main>
<div class="wrapper">
<div class="left">
<div class="item">
<strong>Item</strong>
</div>
<div class="item">
<strong>Item</strong>
</div>
<div class="item">
<strong>Item</strong>
</div>
<div class="item">
<strong>Item</strong>
</div>
<div class="item">
<strong>Item</strong>
</div>
</div>
<div class="right"></div>
</div>
</main>
In sample code I've not image and I handled this issue with 450px height in CSS.
So how can I align the left side with out JS and only with CSS? I want to use space-between mode to show all items in this height. Consider it, height:100% didn't work for this issue.
As per my comment, in order for your left column to extend to the height of your right column, all you need to do is remove the align items from your wrapper:
main{
position: absolute;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
display: flex;
align-items: center;
justify-content: center;
}
.wrapper{
width: 500px;
overflow: hidden;
background: gray;
display: flex;
/* align-items: flex-start; -- remove this */
justify-content: center;
}
.right{
/* width: calc(100% - 150px); I would swap this for flex grow, then you don't need hard values */
flex-grow: 1;
height: 450px;
background: red;
}
.left{
width: 150px;
display: flex;
align-items: center;
justify-content: space-between;
flex-direction: column;
}
.item{
width: 100%;
height: 50px;
color: white;
background: green;
display: flex;
align-items: center;
justify-content: center;
}
<main>
<div class="wrapper">
<div class="left">
<div class="item">
<strong>Item</strong>
</div>
<div class="item">
<strong>Item</strong>
</div>
<div class="item">
<strong>Item</strong>
</div>
<div class="item">
<strong>Item</strong>
</div>
<div class="item">
<strong>Item</strong>
</div>
</div>
<div class="right"></div>
</div>
</main>
This solution uses CSS Grid layouts - use display: grid on your wrapper that lays out your left and right sections using grid-template-columns: 150px 1fr (remove the width definitions in right and left elements.).
Now add height: 100% to left and then for the items flex: 1 for the flexbox items to occupy the dynamic height coming from the right section - see demo below:
main {
position: absolute;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
display: flex;
align-items: center;
justify-content: center;
}
.wrapper {
width: 500px;
overflow: hidden;
background: gray;
display: grid; /* make this a grid container */
grid-template-columns: 150px 1fr; /* 150px for left and rest for right*/
align-items: flex-start;
justify-content: center;
}
.right {
/* width: calc(100% - 150px);*/
height: 450px;
background: red;
}
.left {
/*width: 150px;*/
display: flex;
align-items: center;
justify-content: space-between;
flex-direction: column;
height: 100%; /* ADDED */
}
.item {
width: 100%;
height: 50px;
color: white;
background: green;
display: flex;
align-items: center;
justify-content: center;
flex: 1; /* ADDED */
}
<main>
<div class="wrapper">
<div class="left">
<div class="item">
<strong>Item</strong>
</div>
<div class="item">
<strong>Item</strong>
</div>
<div class="item">
<strong>Item</strong>
</div>
<div class="item">
<strong>Item</strong>
</div>
<div class="item">
<strong>Item</strong>
</div>
</div>
<div class="right"></div>
</div>
</main>
Something like this can be done with flexbox, if you set the height of the container to be the height you want all your sliders to be:
.container {
display: flex;
flex-flow: column wrap;
height: 250px;
width: 250px;
}
.container > * {
display: flex;
flex-flow: row wrap;
flex: 1 100%;
}
.thumbs {
flex-direction: row;
margin-right: 5px;
}
.thumb {
background: red;
flex: 1 100%;
margin: 5px 0;
}
.large {
background: blue;
margin: 5px;
}
<div class="container">
<div class="thumbs">
<div class="thumb"></div>
<div class="thumb"></div>
<div class="thumb"></div>
<div class="thumb"></div>
<div class="thumb"></div>
</div>
<div class="large"></div>
</div>
I need to place the orange button align at the bottom of the blue one.
With my current flex code I cannot get the result wanted. Any ideas how to fix it? Thanks
.content {
width: 350px;
height: 150px;
background-color: yellow;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.row1 {
background-color: red;
}
.row2 {
background-color: blue;
height: 100px
}
.icon {
width: 50px;
height: 50px;
background-color: orange;
align-items: center;
justify-content: center;
}
<div class="content">
<div class="row1">
</div>
<div class="row2">
<div class="icon">
</div>
</div>
</div>
You also need to set display: flex on row2 and then you can use align-self: flex-end on orange element.
.content {
width: 350px;
height: 150px;
background-color: yellow;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.row1 {
background-color: red;
}
.row2 {
background-color: blue;
display: flex;
height: 100px
}
.icon {
width: 50px;
height: 50px;
background-color: orange;
align-self: flex-end;
}
<div class="content">
<div class="row1"></div>
<div class="row2">
<div class="icon"></div>
</div>
</div>
Here we add this css in "row 2",
display: flex;
flex-direction: column;
its means if any object put at bottom then just parent block set above css and element we need to set as bottom add css "margin-top:auto;"
.content {
width: 350px;
height: 150px;
background-color: yellow;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.row1 {
background-color: red;
}
.row2 {
background-color: blue;
height: 100px;
display: flex;
flex-direction: column;
}
.icon {
width: 50px;
height: 50px;
background-color: orange;
align-items: center;
justify-content: center;
margin-top: auto;
}
<div class="content">
<div class="row1">
</div>
<div class="row2">
<div class="icon">
</div>
</div>
</div>
There is lot of stylings that can be removed from your code if it is not required, please find it here, I have changed .content and .row2 stylings
.content {
width: 350px;
height: 150px;
background-color: yellow;
display: flex;
}
.row1 {
background-color: red;
}
.row2 {
background-color: blue;
height: 100px;
flex: 1;
align-self: flex-end;
display: flex;
align-items: flex-end;
}
.icon {
width: 50px;
height: 50px;
background-color: orange;
align-items: center;
justify-content: center;
}
<div class="content">
<div class="row1">
</div>
<div class="row2">
<div class="icon">
</div>
</div>
</div>