I want to center align content inside a grid item, it's centered horizontally but not vertically. see on JSfiddle: http://jsfiddle.net/6zs8ydhf/
.container {
display: grid;
grid-template-columns: 200px auto;
grid-template-rows: 400px 200px;
}
.item {
border: 1px solid #111;
}
.item2 h1 {
display: flex;
align-items: center;
justify-content: center;
}
<div class="container">
<div class="item item1">
<h1>1</h1>
</div>
<div class="item item2">
<h1>2 Should be at center</h1>
</div>
<div class="item item3">
<h1>3</h1>
</div>
</div>
here what you need, to do:
.item {
border: 1px solid #111;
display: flex;
align-items: center;
justify-content: center;
}
Related
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>
This question already has answers here:
Targeting flex items on the last or specific row
(10 answers)
Closed 3 years ago.
I am trying to create a Bootstrap-like grid of cards using CSS flex properties. I have 10 cards (4 each row). However, when using justify-content: space-around (this is what I need), the last row is not aligning with the others (naturally). What is the workaround?
.card-gallery {
width: 100%;
height: auto;
display: flex;
justify-content: space-around;
flex-wrap: wrap;
align-items: center;
flex-direction: row;
}
.card-box {
width: 270px;
height: 400px;
background: red;
}
<div class="container">
<div class="card-gallery">
<div class="card-box"></div>
<div class="card-box"></div>
<div class="card-box"></div>
<div class="card-box"></div>
<div class="card-box"></div>
<div class="card-box"></div>
<div class="card-box"></div>
</div>
</div>
You could try CSS :last-child as in the example below to use different style in your last div.
.flexbox {
display: flex;
flex-flow: column;
}
.flex-child {
background: red;
align-content: center;
align-self: center;
}
.flex-child:last-child {
align-content: space-around;
align-self: flex-start;
}
<div class="flexbox">
<div class="flex-child">
one
</div>
<div class="flex-child">
two
</div>
<div class="flex-child">
three
</div>
</div>
By the way space-between and applying relative width to your card div works better.
.card-gallery {
width: calc(100% -2rem);
height: auto;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
flex-direction: row;
padding: 1rem;
}
.card-box {
width: 45%;
height: 40px;
background: #ff0;
align-self: center;
}
div.card-box:last-child {
align-self: flex-start;
}
<div class="container">
<div class="card-gallery">
<div class="card-box">1</div>
<div class="card-box">2</div>
<div class="card-box">3</div>
<div class="card-box">4</div>
<div class="card-box">5</div>
<div class="card-box">6</div>
<div class="card-box">7</div>
</div>
</div>
You can't achieve this easily with flexbox.
Instead, set .card-gallery to display:grid to make sure the cards always line up in a grid formation when multiple rows exist. Then give it this style rule:
grid-template-columns: repeat(auto-fill, 120px)
The auto-fill keyword will make sure the items will wrap when the viewport shrinks:
.container{max-width:479px;background:lightblue}
.card-gallery {
width: 100%;
height: auto;
display: grid;
grid-template-columns: repeat(auto-fill, 120px);
justify-content: space-around;
}
.card-box {
height: 100px;
background: #fff;
margin-bottom:30px;
border:solid 2px dodgerblue
}
<div class="container">
<div class="card-gallery">
<div class="card-box">cb</div>
<div class="card-box">cb</div>
<div class="card-box">cb</div>
<div class="card-box">cb</div>
<div class="card-box">cb</div>
<div class="card-box">cb</div>
<div class="card-box">cb</div>
</div>
</div>
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 am using flexbox to center content with justify-content: center which works as intended but flexbox also moves divs to be side by side which I don't want.
Here is an example
.flex {
display: flex;
justify-content: center;
}
.content {
width: 100px;
height: 100px;
background-color: #000;
margin: 10px;
}
<div class="flex">
<div class="content">
</div>
<div class="content">
</div>
</div>
How can I use flexbox while retaining the default one div on top of the other positioning.
You can set flex-direction: column and then you have to use align-items: center. Default flex-direction is row.
.flex {
display: flex;
align-items: center;
flex-direction: column;
}
.content {
width: 100px;
height 100px;
color: #000;
border: 1px solid black;
padding: 5px;
margin: 5px;
}
<div class="flex">
<div class="content"></div>
<div class="content"></div>
</div>
Try following code,
.flex {
display: flex;
justify-content: center;
flex-direction: column;
align-items: center;
}
.content {
width: 100px;
height: 100px;
background-color: #000;
margin: 10px;
}
<div class="flex">
<div class="content">
</div>
<div class="content">
</div>
</div>
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/