I have a flexbox container with 4 flex items. I need output like the image below
I have done the coding part but I am stuck with adding the text below the flexbox
My Code:
.flex-container {
margin: 40px auto 0 auto;
margin-top: 0;
display: flex;
justify-content: center;
background-color: white;
}
.flex-container > div {
margin: 40px auto 0 auto;
color: white;
background-color:lightgray;
width: 140px;
margin: 20px;
text-align: center;
line-height: 140px;
font-size: 20px;
}
<body>
<div class="flex-container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
This is how I would do it.
.flex-container {
margin: 40px auto 0 auto;
margin-top: 0;
display: flex;
justify-content: center;
background-color: white;
}
.box {
margin: 40px auto 0 auto;
color: white;
background-color:lightgray;
width: 140px;
margin: 20px;
text-align: center;
line-height: 140px;
font-size: 20px;
}
.text{
text-align:center;
}
<div class="flex-container">
<div class="container">
<div class="box">1</div>
<div class="text">BOX1</div>
</div>
<div class="container">
<div class="box">2</div>
<div class="text">BOX2</div>
</div>
<div class="container">
<div class="box">3</div>
<div class="text">BOX3</div>
</div>
<div class="container">
<div class="box">4</div>
<div class="text">BOX4</div>
</div>
</div>
Simply do this:
(The more appropriate way to do it with table)
.box{
background-color: #7c7cab;
height: 80px;
display: flex;
margin: 10px;
color: white;
}
.box,.textbox{
width: 20%;
float: left;
}
.textbox{
color: black;
margin-left: 10px;
margin-right: 10px;
text-align: center;
}
<div class="boxes">
<div class="box">box 1</div>
<div class="box">box 2</div>
<div class="box">box 3</div>
<div class="box">box 4</div>
</div>
<div class="text-box">
<div class="textbox">text 1</div>
<div class="textbox">text 2</div>
<div class="textbox">text 3</div>
<div class="textbox">text 4</div>
</div>
Hopefully this works for you.
.flex-container {
margin: 40px auto 0 auto;
margin-top: 0;
display: flex;
justify-content: center;
background-color: white;
text-align: center;
}
.container {
margin: 40px auto 0 auto;
color: white;
background-color:lightgray;
width: 140px;
margin: 20px;
text-align: center;
line-height: 140px;
font-size: 20px;
}
<div class="flex-container">
<div>
<div class='container'>1</div>
<span>Box 1</span>
</div>
<div>
<div class='container'>1</div>
<span>Box 2</span>
</div>
<div>
<div class='container'>1</div>
<span>Box 3</span>
</div>
<div>
<div class='container'>1</div>
<span>Box 4</span>
</div>
</div>
Related
I am making a "timeline" component and I am wondering how I can make the vertical lines all line up with each other, displaced by the same amount above/below the horizontal line.
The vertical lines may have different number of lines of text above them, so my current solution of using align-self:center isn't working here.
.container {
width: 30vw;
height: 100vh;
background-color: aquamarine;
margin: 0 auto;
display: flex;
align-items: center;
justify-content: center;
}
.timeline-box {
width: 90%;
position: relative;
}
.timeline-strip {
background-color: yellow;
height: 200px;
display: flex;
overflow-x: scroll;
}
.timeline-box:before {
content: '';
position: absolute;
top: 50%;
border-top: 2px solid black;
width: 100%;
height: 0px;
}
.point {
margin: 0 7px;
align-self:center;
}
.timeline-point {
width: 90px;
position: relative;
}
.timeline-point:before {
content: '';
position: relative;
left: 50%;
border-left: 2px solid black;
}
<div class="container">
<div class="timeline-box">
<div class="timeline-strip">
<div class="point">
<div>Text 1</div>
<div>Text 2</div>
<div class="timeline-point"></div>
<div class="date">2020-10-05</div>
</div>
<div class="point">
<div class="timeline-point"></div>
<div class="date">2020-10-06</div>
</div>
<div class="point">
<div>Text 1</div>
<div class="timeline-point"></div>
<div class="date">2020-10-07</div>
</div>
<div class="point">
<div>Text 1</div>
<div>Text 2</div>
<div class="timeline-point"></div>
<div class="date">2020-10-08</div>
</div>
<div class="point">
<div class="timeline-point"></div>
<div class="date">2020-10-09</div>
</div>
</div>
</div>
</div>
Do you want like this?
.container {
width: 30vw;
height: 100vh;
background-color: aquamarine;
margin: 0 auto;
display: flex;
align-items: center;
justify-content: center;
}
.timeline-box {
width: 90%;
position: relative;
}
.timeline-strip {
background-color: yellow;
height: 200px;
display: flex;
overflow-x: scroll;
}
.timeline-box:before {
content: '';
position: absolute;
top: 50%;
border-top: 2px solid black;
width: 100%;
height: 0px;
}
.point {
position: relative;
height: 150px;
bottom: 25px;
margin: 0 7px;
display: flex;
flex-direction: column;
justify-content: flex-end;
align-items: center;
}
.timeline-point {
width: 90px;
position: relative;
}
.timeline-point:before {
content: '';
position: relative;
left: 50%;
border-left: 2px solid black;
}
<div class="container">
<div class="timeline-box">
<div class="timeline-strip">
<div class="point">
<div class="events">
<div>Text 1</div>
<div>Text 2</div>
<div>Text 1</div>
<div>Text 2</div>
</div>
<div class="timeline-point"></div>
<div class="date">2020-10-05</div>
</div>
<div class="point">
<div class="events"></div>
<div class="timeline-point"></div>
<div class="date">2020-10-06</div>
</div>
<div class="point">
<div class="events">
<div>Text 1</div>
</div>
<div class="timeline-point"></div>
<div class="date">2020-10-07</div>
</div>
<div class="point">
<div class="events">
<div>Text 1</div>
<div>Text 2</div>
</div>
<div class="timeline-point"></div>
<div class="date">2020-10-08</div>
</div>
<div class="point">
<div class="events"></div>
<div class="timeline-point"></div>
<div class="date">2020-10-09</div>
</div>
</div>
</div>
</div>
I'm trying to align some flex items with different widths. I can not hit some elements.
https://jsfiddle.net/sistel/m1vu9exf/2/
I cannot align the texts and colored squares as shown in this figure http://www.farmacom.it/baseball.jpg
.flex-container-4 {
display: flex;
height: 70px;
align-items: center;
background-color: Black;
justify-content: space-around;
position:relative;
}
.flex-container-4 > div {
background-color: BLACK;
width: 500px;
margin: 5px;
text-align: center;
line-height: 50px;
font-size: 40px;
color: white;
}
I have re-written your code using flex css and removed some unwanted styles. Hope this helps your problem
HTML
<div class="flex-container">
<div class="flex-column">
<div class="flex-row">
<div class="number">18</div>
<div class="number">18</div>
<div class="number">18</div>
</div>
<div class="flex-row">
<div class="roman-numeric">I</div>
<div class="roman-numeric">II</div>
<div class="roman-numeric">III</div>
</div>
<div class="flex-row">
<div class="number">18</div>
<div class="number">18</div>
<div class="number">18</div>
</div>
<div class="flex-row">
<div class="text">BALL</div>
</div>
<div class="flex-row">
<div class="green"></div>
<div class="green"></div>
<div class="green"></div>
</div>
</div>
<div class="seperator"></div>
<div class="flex-column">
<div class="flex-row">
<div class="number">18</div>
<div class="number">18</div>
<div class="number">18</div>
</div>
<div class="flex-row">
<div class="roman-numeric">IV</div>
<div class="roman-numeric">V</div>
<div class="roman-numeric">VI</div>
</div>
<div class="flex-row">
<div class="number">18</div>
<div class="number">18</div>
<div class="number">18</div>
</div>
<div class="flex-row">
<div class="text">STRIKE</div>
</div>
<div class="flex-row">
<div class="red"></div>
<div class="red"></div>
</div>
</div>
<div class="seperator"></div>
<div class="flex-column">
<div class="flex-row">
<div class="number">18</div>
<div class="number">18</div>
<div class="number">18</div>
</div>
<div class="flex-row">
<div class="roman-numeric">VII</div>
<div class="roman-numeric">VIII</div>
<div class="roman-numeric">IX</div>
</div>
<div class="flex-row">
<div class="number">18</div>
<div class="number">18</div>
<div class="number">18</div>
</div>
<div class="flex-row">
<div class="text">OUT</div>
</div>
<div class="flex-row">
<div class="orange"></div>
<div class="orange"></div>
</div>
</div>
</div>
CSS
.flex-container {
display: flex;
background-color: Black;
justify-content: start;
padding: 10px 10px;
width: fit-content;
}
.flex-column {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.flex-row {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
}
.flex-row>.number {
background-color: #444;
width: 100px;
margin: 5px;
text-align: center;
line-height: 75px;
font-size: 60px;
color: yellow;
}
.flex-row>.roman-numeric {
width: 100px;
margin: 5px;
text-align: center;
line-height: 45px;
font-size: 50px;
color: white;
}
.flex-row>.text {
background-color: BLACK;
margin: 5px;
text-align: center;
line-height: 50px;
font-size: 40px;
color: white;
}
.green {
background-color: green;
width: 40px;
height: 40px;
margin: 25px;
}
.red {
background-color: red;
width: 40px;
height: 40px;
margin: 25px;
}
.orange {
background-color: orange;
width: 40px;
height: 40px;
margin: 25px;
}
.seperator {
background: #a5a2a2;
width: 10px;
margin: 0px 15px;
}
JS Fiddle Link : https://jsfiddle.net/SJ_KIllshot/2ymefx81/
This is because you created rows and cells from these rows doesn't know about other rows' dimensions - this is why in the last part, "VIII" takes more width than other elements.
One solution is to create columns instead of rows, because in this way, flex container will be of the width of the widest element.
To get exact result you need to change your bit of html structure. If not i have created similar pattern using your current code. please check this:
Baseball Flex
I am trying to achieve the following:
The text inside the square (example text: "1/4") should be centered horizontally
and vertically.
The four squares should be spread with the same
distance over the main container (red).
The text (example text: "Name", "Longer Name" etc.) should be centered over the squares, and not affect the spreading of the squares (point 2)
What I got this far is the code below. I would greatly appreciate if somebody could point me in the correct direction!
.container {
background-color: red;
width: 320px;
height: 320px;
margin: 30px auto 30px auto;
}
.inner {
display: flex;
}
.inner-content {
display: block;
/* width: 25%;*/
margin-left: auto;
margin-right: auto;
background-color: green;
}
.text {
width: 25%;
text-align: center;
}
.square {
margin-top: 5px;
height: 25px;
width: 25px;
vertical-align: top;
text-align: center;
color: #fff;
font-size: 14px;
font-weight: bold;
text-align: center;
background-color: black;
box-shadow: 0 0 0 2px red, 0 0 0 5px black;
}
<div class="container">
<div class="inner">
<div class="inner-content">
<span class="text">Name</span>
<div class="square">
1/4
</div>
</div>
<div class="inner-content">
<span class="text">Longer Name</span>
<div class="square">
1/4
</div>
</div>
<div class="inner-content">
<span class="text">Name</span>
<div class="square">
1/4
</div>
</div>
<div class="inner-content">
<span class="text">Yo</span>
<div class="square">
1/4
</div>
</div>
</div>
Take a look at the following example:
* {
box-sizing: border-box;
}
.container {
background-color: red;
width: 320px;
height: 320px;
margin: 30px auto 30px auto;
padding: 5px;
}
.inner {
display: grid;
grid-template-columns: repeat(4, 1fr); /* fix spreading */
grid-column-gap: 5px;
}
.inner-content {
background-color: green;
text-align: center;
}
.text {
width: 100%;
}
.square {
margin: 5px auto; /* fix box centering */
height: 25px;
width: 25px;
vertical-align: top;
text-align: center;
color: #fff;
font-size: 14px;
font-weight: bold;
background-color: black;
box-shadow: 0 0 0 2px red, 0 0 0 5px black;
line-height: 25px; /* fix vertical center */
}
<div class="container">
<div class="inner">
<div class="inner-content">
<span class="text">Name</span>
<div class="square">
1/4
</div>
</div>
<div class="inner-content">
<span class="text">Longer Name</span>
<div class="square">
1/4
</div>
</div>
<div class="inner-content">
<span class="text">Name</span>
<div class="square">
1/4
</div>
</div>
<div class="inner-content">
<span class="text">Yo</span>
<div class="square">
1/4
</div>
</div>
</div>
I am trying to create inner borders with gaps. I tried to create borders by using :after pseudo elements, but :after elements are not visible.
.view {
display: flex;
flex-direction: column;
border: none;
overflow: hidden;
}
.container {
display: flex;
flex-wrap: wrap;
margin: 0 -5px -5px 0;
}
.content {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
flex: 1;
background: yellow;
padding: 20px;
border-right: 1px solid black;
border-bottom: 1px solid black;
}
.content:after{
content: '';
background: black;
position: absolute;
bottom: 5px;
width: 2px;
height: 20px;
right: -10px;
}
.head {
text-align: center;
}
<div class="view">
<div class="container">
<div class="content">
<div class="val">0</div>
<div class="head">Total balance</div>
</div>
<div class="content">
<div class="val">0</div>
<div class="head">Available balance</div>
</div>
<div class="content">
<div class="val">0</div>
<div class="head">Orders</div>
</div>
<div class="content">
<div class="val">500</div>
<div class="head">Wallet balance</div>
</div>
<div class="content">
<button class="val" type="button">Send</button>
</div>
</div>
</div>
I am trying to achieve this result:
There are possibly better ways of doing this. But this is done without changing your HTML layout.
.view {
display: flex;
flex-direction: column;
border: none;
overflow: hidden;
}
.container {
display: flex;
flex-wrap: wrap;
margin: 0 -5px 0 0;
}
.content {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
flex: 1;
background: yellow;
padding: 20px;
border-right: 1px solid black;
border-bottom: 1px solid black;
position: relative;
}
.content:before {
content: "";
position: absolute;
bottom: 0;
left: -5px;
right: -5px;
background: yellow;
z-index: 1111;
border: 4px solid yellow;
}
.content:after {
content: "";
position: absolute;
top: 0;
left: -5px;
right: -5px;
background: yellow;
z-index: 1111;
border: 4px solid yellow;
}
.head {
text-align: center;
}
<div class="view">
<div class="container">
<div class="content">
<div class="val">0</div>
<div class="head">Total balance</div>
</div>
<div class="content">
<div class="val">0</div>
<div class="head">Available balance</div>
</div>
<div class="content">
<div class="val">0</div>
<div class="head">Orders</div>
</div>
<div class="content">
<div class="val">500</div>
<div class="head">Wallet balance</div>
</div>
<div class="content">
<button class="val" type="button">Send</button>
</div>
</div>
</div>
I hope this helps
<!DOCTYPE html>
<html>
<head>
<style>
.center {
display: flex;
justify-content: center;
align-items: center;
}
.view {
background-color: yellow;
}
.topContainer {
display: grid;
grid-template-columns: repeat(3, 3fr);
border-bottom: 1px solid #000;
}
.bottomContainer {
display: grid;
grid-template-columns: repeat(2, 3fr);
}
.content {
padding: 25px;
text-align: center;
border-left: 1px solid #000;
}
.topContainer .content:first-child {
border: none;
}
.bottomContainer .content:first-child {
border: none;
}
</style>
</head>
<body>
<div class="view">
<div class="topContainer">
<div class="content center">
<div>
<div class="val">0</div>
<div class="head">Total balance</div>
</div>
</div>
<div class="content center">
<div>
<div class="val">0</div>
<div class="head">Available balance</div>
</div>
</div>
<div class="content center">
<div>
<div class="val">0</div>
<div class="head">Orders</div>
</div>
</div>
</div>
<div class="bottomContainer">
<div class="content center">
<div>
<div class="val">500</div>
<div class="head">Wallet balance</div>
</div>
</div>
<div class="content center">
<button class="val" type="button">Send</button>
</div>
</div>
</div>
</body>
</html>
Result
I am trying to vertically align a div in my code but with no success. This div contains sub divs. The first one
I want this to look like this :
but at the moment it is not aligned. This is my HTML code :
body {
display: block;
margin-left: auto;
margin-right: auto;
background: #f1f1f1;
}
.content {
float: left;
margin: 20px auto;
text-align: center;
width: 300px;
}
.content h1 {
text-transform: uppercase;
font-weight: 700;
margin: 0 0 40px 0;
font-size: 25px;
line-height: 30px;
}
.circle {
width: 100px;
height: 100px;
line-height: 100px;
border-radius: 50%;
/* the magic */
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
text-align: center;
color: white;
font-size: 16px;
text-transform: uppercase;
font-weight: 700;
margin: 0 auto 20px;
}
.blue {
background-color: #052D72;
}
.green {
background-color: #16a085;
}
.red {
background-color: #e74c3c;
}
<div class="content">
<div class="circle blue"></div>
</div>
<div class="content">
<div class="circle blue">Blue</div>
<div class="circle blue"></div>
<div class="circle blue"></div>
<div class="circle blue"></div>
</div>
<div class="content">
<div class="circle blue"></div>
<div class="circle blue"></div>
</div>
So, in the .content I tried adding this :
vertical-align:baseline;
but I saw no difference.
Add display:inline-block & Remove float for #content
.content {
display: inline-block;
margin: 20px auto;
text-align: center;
vertical-align: middle;
width: 200px;
}
https://jsfiddle.net/k0fx384a/1/
EDIT with class: https://jsfiddle.net/k0fx384a/2/
You have used same #id with multiple elements. That is not allowed in HTML across all browsers(seems like IE and FF allow multiple #ids).
So just change all the occurances of id="content" to class="content" and the CSS should start working.
DEMO
change <div id="content"> to <div class="content"> so the styles will be applied.
If you want them both vertically and horizontally aligned, I would recommend using flex. This offers more flexibility and is more forward-facing.
Mozilla Docs on Flex
If you use the rules align-items and justify-content, you'll get magic workings. Check out an example: https://jsfiddle.net/vrad7yuj/
.container {
display: flex;
flex-direction: row;
height: 100%;
width: 100%;
border: 2px solid #f00;
}
.col {
border: 2px solid #00f;
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.ball {
border-radius: 50%;
border: 1px solid #0f0;
height: 60px;
width: 60px;
}
<div class="container">
<div class="col">
<div class="ball"></div>
</div>
<div class="col">
<div class="ball"></div>
<div class="ball"></div>
<div class="ball"></div>
<div class="ball"></div>
</div>
<div class="col">
<div class="ball"></div>
<div class="ball"></div>
</div>
</div>
Alternative, if you want to do this with a little count of codelines, you can use flexbox:
body {
display: flex;
margin-left: auto;
margin-right: auto;
background: #f1f1f1;
}
.content {
display: flex;
flex-direction: column;
margin: 20px auto;
text-align: center;
width: 300px;
}
.content h1 {
text-transform: uppercase;
font-weight: 700;
margin: 0 0 40px 0;
font-size: 25px;
line-height: 30px;
}
.circle {
width: 100px;
height: 100px;
line-height: 100px;
border-radius: 50%;
/* the magic */
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
text-align: center;
color: white;
font-size: 16px;
text-transform: uppercase;
font-weight: 700;
margin: 0 auto 20px;
}
.blue {
background-color: #052D72;
}
.green {
background-color: #16a085;
}
.red {
background-color: #e74c3c;
}
<div class="content">
<div class="circle blue"></div>
</div>
<div class="content">
<div class="circle blue">Blue</div>
<div class="circle blue"></div>
<div class="circle blue"></div>
<div class="circle blue"></div>
</div>
<div class="content">
<div class="circle blue"></div>
<div class="circle blue"></div>
</div>
Take a look on flexbox: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
Should just be an alternative solution and new knowledge for you. ;-) Cheers.