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>
Related
I need .left class to have been fully filled with red colour if the right class has content in it. At the moment it doesn't fully fill in the color to the left div? I believe problem is with height?
How can I achieve it?
.container {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
border: 1px solid #bebebe;
border-radius: 5px;
}
.left {
background-color: red;
padding: 0 8px;
flex-grow: 1;
display: flex;
}
.right {
width: 100%;
background-color: blue;
}
<div class="container">
<div class="left">
<input type="radio" />
</div>
<div class="right">
<p>test2</p>
<p>test2</p>
<p>test2</p>
<p>test2</p>
<p>test2</p>
<p>test2</p>
</div>
</div>
Just change align-items: center; to align-items: stretch; in the .container:
.container {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center; /* <-- Change this */
align-items: stretch;
border: 1px solid #bebebe;
border-radius: 5px;
}
.left {
background-color: red;
padding: 0 8px;
flex-grow: 1;
display: flex;
}
.right {
width: 100%;
background-color: blue;
}
<div class="container">
<div class="left">
<input type="radio" />
</div>
<div class="right">
<p>test2</p>
<p>test2</p>
<p>test2</p>
<p>test2</p>
<p>test2</p>
<p>test2</p>
</div>
</div>
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.
My goal is to create a table with flex-direction: column;.
Ticker Price --.--
-- Volume --
index.html
<div class="d-flex">
<div class="p-1">
Ticker
<div id="stockSymbol" class="font-weight-bold display-4">--</div>
</div>
<div class="d-flex flex-column p-1">
<div class="d-flex">
Price
<div id="stockPrice" class="p-1 font-weight-bold display-4">--.--</div>
</div>
<div class="d-flex">
Volume
<div id="stockVolume" class="p-1">--</div>
</div>
</div>
</div>
styles.css
.p-1 {
padding: 1rem;
}
.d-flex {
display: flex;
}
.flex-column {
flex-direction: column;
}
.font-weight-bold {
font-weight: bold;
}
.display-4 {
font-size: 2rem;
}
My expected result: I can use the text-align: center; to make the stockPrice and stockVolume looks aligned.
My actual result: the text-align: center; does not affect the view.
What I've considered:
Use the HTML tables. Per my knowledge, it's not mobile friendly, especially if the first column direction is to below, and the 2nd and 3rd column direction is to the right.
Here you go! I used flex-direction column
I added quite a bit to the CSS, but that was just to demonstrate what the table is doing, so if you need any of the colors/margins removed; or anything changed let me know.
html, body {
height: 100%;
margin: 0;
}
.grid2x2 {
min-height: 60%;
width: 60%;
display: flex;
flex-wrap: wrap;
flex-direction: row;
}
.grid2x2 > div {
display: flex;
flex-basis: calc(50% - 40px);
justify-content: center;
flex-direction: column;
}
.grid2x2 > div > div {
display: flex;
justify-content: center;
flex-direction: row;
}
.box { margin: 3px; }
.box1 { background-color: red; }
.box2 { background-color: orange; }
.box3 { background-color: purple; }
.box4 { background-color: grey; }
<div class="grid2x2">
<div class="box box1"><div>Price</div></div>
<div class="box box2"><div>--.--</div></div>
<div class="box box3"><div>Volume</div></div>
<div class="box box4"><div>--</div></div>
</div>
Here's my take on your problem of using flex-direction: column to create a table. Through this approach you can use the div class="col" to append data columns to the right of Price-Volume column.
.table {
display: flex;
column-gap: 5px;
margin: 10px;
border: 1px solid black;
width: fit-content;
width: -moz-fit-content;
}
.col {
display: flex;
flex-direction: column;
justify-content: center;
row-gap: 5px;
}
.col div {
background: beige;
}
.align-center {
/* align-self: center; */
text-align: center;
}
.align-right {
/* align-self: flex-end; */
text-align: right;
}
<div class="table">
<div class="col">
<div class="align-center">Ticker</div>
<div class="align-center">--</div>
</div>
<div class="col">
<div class="align-center">Price</div>
<div class="align-center">Volume</div>
</div>
<div class="col">
<div class="align-right">--.--</div>
<div class="align-right">--</div>
</div>
</div>
<div class="table">
<div class="col">
<div class="align-center">Ticker</div>
<div class="align-center">--</div>
</div>
<div class="col">
<div class="align-center">Price</div>
<div class="align-center">Volume</div>
</div>
<div class="col">
<div class="align-right">98.56</div>
<div class="align-right">20</div>
</div>
<div class="col">
<div class="align-right">72.03</div>
<div class="align-right">13</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
How can I make my flexbox with column direction children be same width.
JSFiddle Example:
https://jsfiddle.net/6ynofan5/
<div class="block">
<div class="title">Some dummy text here, huh</div>
<div class="info">
<div class="text">1</div>
<div class="text">2</div>
<div class="text">3</div>
</div>
</div>
.block {
display: flex;
flex-direction: column;
align-items: center;
}
.block .title {
font-size: 30px;
}
.block .info {
display: flex;
justify-content: space-between;
}
Div with class .info should be the same width as .title, there should not be fixed width.
The equalising of widths is managed by align-items where the default is stretch. In this instance you have over-ridden this and so a wrapper is needed.
Then the two inner divs can be their natural 100% width.
.block {
display: flex;
flex-direction: column;
border: 1px solid grey;
justify-content: center;
align-items: center;
}
.title {
font-size: 30px;
background: lightblue;
}
.info {
display: flex;
justify-content: space-between;
background: plum;
}
<div class="block">
<div class="wrap">
<div class="title">Some dummy text here, huh</div>
<div class="info">
<div class="text">1</div>
<div class="text">2</div>
<div class="text">3</div>
</div>
</div>
</div>
.block {
display: table;
flex-direction: column;
align-items: center;
}
https://jsfiddle.net/1mz9f8p0/1/