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>
Related
It doesn't work when I set justify-content: space-between on rightContainer, I want Apple on the top and Sony on the bottom.
<div className={styles.mainContainer}>
<div className={styles.leftContainer}>
<div className={styles.profilePicture} />
<p className={styles.profileUsername}>Test Name</p>
</div>
<div className={styles.rightContainer}>
<p>Apple</p>
<p>Sony</p>
</div>
</div>
css
.mainContainer {
display: flex;
width: 100%;
background-color: cadetblue;
}
.leftContainer {
width: 100%;
background-color: red;
text-align: left;
}
.rightContainer {
width: 100%;
background-color: blue;
text-align: right;
justify-content: space-between;
}
justify-content: space-evenly is only applicable to a flexbox. You can use a vertical flexbox to apply space-evenly.
.mainContainer {
display: flex;
width: 100%;
background-color: cadetblue;
}
.leftContainer {
width: 100%;
background-color: red;
text-align: left;
}
.rightContainer {
width: 100%;
background-color: blue;
text-align: right;
justify-content: space-evenly;
display: flex; /*Create a flexbox*/
flex-direction: column; /*Vertical flexbox*/
}
<div class="mainContainer">
<div class="leftContainer">
<div class="profilePicture" />
<p class="profileUsername">Test Name</p>
</div>
<div class="rightContainer">
<p>Apple</p>
<p>Sony</p>
</div>
</div>
I am trying to order a series of graphics that I have (from the chart.js library) and there is one that is impossible for me to handle. Then I show a screenshot of how it looks,
As you can see, the one on the left and the one on the lower right are in place, but the pie type (circular) does what it wants.
Code:
#graficos_container {
height: 100%;
width: 100%;
background-color: #e0e0e0;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
#one_graph {
height: 500px;
width: 55%;
background-color: #FFF;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
margin: 0 5px;
border: 1px solid #a8a7a7;
border-radius: 5px;
}
#prueba {
width: 90%;
}
#paquetes_graf {
height: auto;
width: 90%;
background-color: tomato;
}
#two_graph {
height: 500px;
width: 35%;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
margin: 0 5px;
}
.single_two_graph {
height: 50%;
width: 100%;
background-color: #FFF;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
margin: 5px 0;
border: 1px solid #a8a7a7;
border-radius: 5px;
}
<div id="graficos_container">
<div id='one_graph'>
<div id="prueba">
<canvas class="grafico" id="bateria_graf"></canvas>
</div>
<input type="button" value="Graficar" class="boton btn_graf" id="bat_graf_btn">
</div>
<div id='two_graph'>
<div class="single_two_graph">
<div id="prueba">
<canvas class="grafico" id="paquetes_graf"></canvas>
</div>
<input type="button" value="Graficar" class="boton btn_graf" id="paq_graf_btn">
</div>
<div class="single_two_graph">
<div id="prueba">
<canvas class="grafico" id="paquetes_full_graf"></canvas>
</div>
<input type="button" value="Graficar" class="boton btn_graf" id="paq_full_graf_btn">
</div>
</div>
This kind of charts are responsive, for this reason I thought that putting it inside a container it will adapts, but the pie no... How can i do it?
Thank you very much.
Have you tried to add display: flex to .prueba class, it seems responsive now in your example.
#graficos_container {
height: 100%;
width: 100%;
background-color: #e0e0e0;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
#one_graph {
height: 500px;
width: 55%;
background-color: #FFF;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
margin: 0 5px;
border: 1px solid #a8a7a7;
border-radius: 5px;
}
#prueba {
width: 90%;
display:flex;
}
#paquetes_graf {
height: auto;
width: 90%;
background-color: tomato;
}
#two_graph {
height: 500px;
width: 35%;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
margin: 0 5px;
}
.single_two_graph {
height: 50%;
width: 100%;
background-color: #FFF;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
margin: 5px 0;
border: 1px solid #a8a7a7;
border-radius: 5px;
}
<div id="graficos_container">
<div id='one_graph'>
<div id="prueba">
<canvas class="grafico" id="bateria_graf"></canvas>
</div>
<input type="button" value="Graficar" class="boton btn_graf" id="bat_graf_btn">
</div>
<div id='two_graph'>
<div class="single_two_graph">
<div id="prueba">
<canvas class="grafico" id="paquetes_graf"></canvas>
</div>
<input type="button" value="Graficar" class="boton btn_graf" id="paq_graf_btn">
</div>
<div class="single_two_graph">
<div id="prueba">
<canvas class="grafico" id="paquetes_full_graf"></canvas>
</div>
<input type="button" value="Graficar" class="boton btn_graf" id="paq_full_graf_btn">
</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>
I have a flexbox parent setted with flex-direction: row.
Inside this parent, I have two children. I would like them to have the same height!
Inside this children I have dynamic content (with variable height).
The way I'm doing, if I add text on the right child, the left one will grow.
But If the left child grows, the right one stays small.
Should not they behave in the same way?
Here is a fiddle: https://jsfiddle.net/4g6uevok/8/
HTML:
<div id="main">
<div class="left">
<div class="title">MY TITLE:</div>
<div class="left-area">
<div class="left-area-row">
<div class="left-area-row-titulo">#1</div>
<div class="left-area-row-info">A</div>
</div>
<div class="left-area-row">
<div class="left-area-row-titulo">#2</div>
<div class="left-area-row-info">B</div>
</div>
<div class="left-area-row">
<div class="left-area-row-titulo">#3</div>
<div class="left-area-row-info">AC</div>
</div>
</div>
</div>
<div class="right">
<div class="title">SECOND TITLE:</div>
</div>
</div>
CSS:
#main {
width: 100%;
height:auto;
margin-top: 30px;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: stretch;
background-color: red;
}
.left{
width: 400px;
display: flex;
flex-direction: column;
background:lime;
align-items: stretch;
}
.title {
width: 100%;
font-size: 1.5em;
color:#525252;
display: flex;
justify-content: center;
margin-bottom: 20px;
font-weight: bold;
font-family: "emir-bold";
}
.left-area {
width: 100%;
display: flex;
flex-direction: column;
}
.left-area-row {
width: 100%;
display: flex;
flex-direction: row;
justify-content: space-between;
}
.left-area-row-titulo {
width: 49.5%;
display: flex;
align-items: center;
justify-content: flex-start;
background-color: #819196;
color: white;
padding: 6px;
margin:0 2px 4px 0;
}
.left-area-row-info {
width: 49.5%;
display: flex;
align-items: center;
justify-content: center;
background: #CCCCCC;
padding: 6px;
margin:0 0 4px 2px;
}
.right {
width: calc(100% - 430px);
height: 100%;
display: flex;
flex-direction: column;
background:orange;
align-items: stretch;
}
Flex items are aligned to strech by default. Your height:100% value in .right class preventing it to take whole height so try to remove height:100% to the .right element
#main {
width: 100%;
height: auto;
margin-top: 30px;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: stretch;
background-color: red;
}
.left {
width: 400px;
display: flex;
flex-direction: column;
background: lime;
align-items: stretch;
}
.title {
width: 100%;
font-size: 1.5em;
color: #525252;
display: flex;
justify-content: center;
margin-bottom: 20px;
font-weight: bold;
font-family: "emir-bold";
}
.left-area {
width: 100%;
display: flex;
flex-direction: column;
}
.left-area-row {
width: 100%;
display: flex;
flex-direction: row;
justify-content: space-between;
}
.left-area-row-titulo {
width: 49.5%;
display: flex;
align-items: center;
justify-content: flex-start;
background-color: #819196;
color: white;
padding: 6px;
margin: 0 2px 4px 0;
}
.left-area-row-info {
width: 49.5%;
display: flex;
align-items: center;
justify-content: center;
background: #CCCCCC;
padding: 6px;
margin: 0 0 4px 2px;
}
.right {
width: calc(100% - 430px);
display: flex;
flex-direction: column;
background: orange;
align-items: stretch;
}
<div id="main">
<div class="left">
<div class="title">MY TITLE:</div>
<div class="left-area">
<div class="left-area-row">
<div class="left-area-row-titulo">
#1
</div>
<div class="left-area-row-info">A</div>
</div>
<div class="left-area-row">
<div class="left-area-row-titulo">
#2
</div>
<div class="left-area-row-info">BA</div>
</div>
<div class="left-area-row">
<div class="left-area-row-titulo">
#3
</div>
<div class="left-area-row-info">C</div>
</div>
<div class="left-area-row">
<div class="left-area-row-titulo">
#4
</div>
<div class="left-area-row-info">D</div>
</div>
</div>
</div>
<div class="right">
<div class="title">SECOND TITLE:</div>
</div>
</div>
In the example I have a block div containing div items, the div items are styled to be circles.
I would like to use flex to display them in two rows of three.
I have them displaying in two rows of three but the items are stretched out of shape.
How can I keep the items as circles and display them as two rows of three
body{
background: grey;
}
.block{
background: white;
display: flex;
height: 400px;
flex-flow: row wrap;
justify-content: space-around;
padding: 20px;
position: absolute;
right: 40px;
top: 80px;
width: 540px;
z-index: 1000;
}
.block__item{
background: red;
border-radius: 80px;
color: white;
flex-basis: 33%;
height: 80px;
text-align: center;
width: 80px;
}
<div class="block">
<div class="block__item">1</div>
<div class="block__item">2</div>
<div class="block__item">3</div>
<div class="block__item">4</div>
<div class="block__item">5</div>
<div class="block__item">6</div>
</div>
If you nest the circles inside the block--item class you can centre them inside without distorting their shape:
body {
background: grey;
}
.block {
background: white;
display: flex;
height: 400px;
flex-flow: row wrap;
justify-content: space-around;
padding: 20px;
position: absolute;
right: 40px;
top: 80px;
width: 540px;
z-index: 1000;
}
.block__item {
display: flex;
justify-content: center;
align-items: center;
width: 33%;
}
.block__item_circle {
display: flex;
background: red;
justify-content: center;
align-items: center;
border-radius: 80px;
color: white;
height: 80px;
text-align: center;
width: 80px;
}
<div class="block">
<div class="block__item">
<div class="block__item_circle">1</div>
</div>
<div class="block__item">
<div class="block__item_circle">2</div>
</div>
<div class="block__item">
<div class="block__item_circle">3</div>
</div>
<div class="block__item">
<div class="block__item_circle">4</div>
</div>
<div class="block__item">
<div class="block__item_circle">5</div>
</div>
<div class="block__item">
<div class="block__item_circle">6</div>
</div>
</div>