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
Related
hey I'm new in Flexbox and I'm trying to get it as best as I can. However i faces a problem with some heights and orders, maybe some here could help out.
Note: Don't suggest using Grid/tables please.
this is what I have right now:
this is what I want to get:
html:
<div class="movie-container">
<div class="upper-container">
<div class="image">Image</div>
<div class="title">Title</div>
<div class="more">More</div>
</div>
<div class="lower-container">
<div class="runtime">Runtime</div>
<div class="description">Description</div>
<div class="director">Director</div>
</div>
</div>
css:
.movie-container{
display:flex;
flex-flow: column wrap;
}
.upper-container {
display: flex;
width:80%;
margin:0 auto;
flex-flow: raw wrap;
}
.upper-container div {
border: 1px solid black;
padding: 10px;
}
.lower-container {
display: flex;
width:80%;
margin:0 auto;
flex-flow: column wrap;
}
.lower-container div {
border: 1px solid black;
padding: 10px;
}
.image {
flex: 1;
}
.title {
flex: 3;
}
.more {
flex: 0.1;
}
.runtime{
}
.description{
}
.director{
}
Maybe other stuff need to be added beside flexbox I'm not sure, that's why I ask here. Any solution will be helpful!
If you change your HTML structure slightly you can accomplish this fairly easily:
<div class="movie-container">
<div class="upper-container">
<div class="image">Image</div>
<div class="side-container">
<div class="title">Title</div>
<div class="more">More</div>
<div class="runtime">Runtime</div>
<div class="description">Description</div>
</div>
</div>
<div class="lower-container">
<div class="director">Director</div>
</div>
</div>
JSFiddle
Flex isn't very good at stretching across multiple rows / columns like tables or Grid is, while you state you don't want that solution it is typically a better option in cases like this.
I find it easiest to work with flexbox on a row-by-row basis instead of using wrapping (although you can certainly do that too).
As a starting point, I think this snippet is what you're going for?
div {
flex: 1 1 auto;
}
.box {
border: 1px solid black;
}
.flex {
display: flex;
}
.image {
width: 120px;
flex: 0 0 auto;
}
.more {
flex: 0 0 auto;
}
<div class="flex upper">
<div class="box flex image">Image</div>
<div class="upper-detail">
<div class="flex title-container">
<div class="box title">Title</div>
<div class="box more">More</div>
</div>
<div class="box runetime">Runtime</div>
<div class="box director">Director</div>
</div>
</div>
<div class="box description">Description</div>
<div class="box other">Other stuff...</div>
Hope this helps.
.upper-container{
display: flex;
height: 200px;
}
.upper-left{
background: #ddd;
flex: 1;
display: flex;
align-items: center;
justify-content: center;
}
.upper-right{
flex: 3;
display: flex;
flex-direction: column;
height: 100%;
}
.title-more, .runtime, .director{
flex: 1;
border: 1px solid #222;
display: flex;
align-items: center;
}
.lower-container{
border: 1px solid #222;
padding: 10px;
}
.title-more{
justify-content: space-between;
}
.more-button{
height: 30px;
width: 100px;
border: 1px solid #333;
margin-right: 5px;
display: flex;
align-items: center;
justify-content: center;
}
<div class="movie-container">
<div class="upper-container">
<div class="upper-left">
Image
</div>
<div class="upper-right">
<div class="title-more">
<div class="title-container">
Title
</div>
<div class="more-button">
More
</div>
</div>
<div class="runtime">Runtime</div>
<div class="director">Director</div>
</div>
</div>
<div class="lower-container">
Description
</div>
</div>
The key is to add some divs and remove some others:
.movie-container *{padding:.5em;}
.upper-container {
display: flex;
padding:0;
}
.image {
border: 1px solid;
flex: 1 1 25%;
}
.tmrd{flex: 1 1 75%;padding:0}
.title-more {
display: flex;
padding:0;
}
.title{flex: 1 1 75%;border: 1px solid;}
.more{flex: 1 1 25%;border: 1px solid;}
.runtime,.description,.director{border: 1px solid;}
<div class="movie-container">
<div class="upper-container">
<div class="image">Image</div>
<div class="tmrd">
<div class="title-more">
<div class="title">Title</div>
<div class="more">More</div>
</div>
<div class="runtime">Runtime</div>
<div class="description">Description</div>
</div>
</div>
<div class="director">Director</div>
</div>
I know that this question has already been asked several times but none of them seem to work for me or they're "too complicated" for my example.
I have three divs. Two of them are aligned vertically. The other one should be next to them and should have the same hight as the other two together.
It should look like this:
This is what I have so far:
.wrapper{
border: 1px solid red;
background-color: #fffdea;
width: 100%;
display: inline-block;
}
.icon{
border: 1px solid lightgreen;
width: 130px;
float: left;
height: 100%;
}
.info{
border: 1px solid aqua;
display: flex;
justify-content: space-between;
}
<div class="wrapper">
<div class="icon">
<p>Icon</p>
</div>
<div class="info">
<p>Text</p>
<p>Number</p>
</div>
<div class="info">
<p>Text</p>
<p>Number</p>
</div>
</div>
Have a look at my fiddle
It's better to wrap your right side div(.info) with a parent div.
Try this one , it could help
.wrapper{
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
flex-direction: row;
justify-content: center;
border: 1px solid red;
background-color: #fffdea;
width: 100%;
padding: 10px;
}
.icon {
border: 1px solid lightgreen;
width: 30%;
}
.right-set {
width: 75%;
}
.info {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
flex-direction: row;
border: 1px solid aqua;
}
<div class="wrapper">
<div class="icon">
<p>Icon</p>
</div>
<div class="right-set">
<div class="info">
<p>Text</p>
<p>Number</p>
</div>
<div class="info">
<p>Text</p>
<p>Number</p>
</div>
</div>
</div>
try this
<div class="wrapper">
<div class="icon">
<p>Icon</p>
</div>
<div class="info-set">
<div class="info">
<p>Text</p>
<p>Number</p>
</div>
<div class="info">
<p>Text</p>
<p>Number</p>
</div>
</div>
</div>
.wrapper {
border: 1px solid red;
background-color: #fffdea;
width: 100%;
display: flex;
}
.icon {
border: 1px solid lightgreen;
width: 130px;
margin: 5px;
}
.info-set {
width: 100%;
}
.info {
border: 1px solid aqua;
display: flex;
justify-content: space-between;
margin: 5px 5px 5px 0;
}
Something needs to have a height set, either the wrapper or the icon. I also set height 50% of the info divs and changed box-sizing to border box for the contained elements.
.wrapper{
border: 1px solid red;
background-color: #fffdea;
width: 100%;
display: inline-block;
height: 130px;
}
.icon{
border: 1px solid lightgreen;
width: 130px;
float: left;
height: 100%;
box-sizing: border-box;
}
.info{
border: 1px solid aqua;
display: flex;
justify-content: space-between;
height: 50%;
box-sizing: border-box;
}
<div class="wrapper">
<div class="icon">
<p>Icon</p>
</div>
<div class="info">
<p>Text</p>
<p>Number</p>
</div>
<div class="info">
<p>Text</p>
<p>Number</p>
</div>
</div>
Can be achieved using Flexbox and wrapping the info divs in a container.
<div class="wrapper">
<div class="icon">
<p>Icon</p>
</div>
<div class="info-container">
<div class="info">
<p>Text</p>
<p>Number</p>
</div>
<div class="info">
<p>Text</p>
<p>Number</p>
</div>
</div>
</div>
CSS :
.wrapper{
border: 1px solid red;
background-color: #fffdea;
width: 100%;
display: flex;
}
.icon{
border: 1px solid lightgreen;
width: 30%;
min-height: 100%;
box-sizing: border-box;
background: rgba(0, 0, 0, 0.2);
}
.info-container{
display: flex;
width: 70%;
box-sizing: border-box;
flex-direction: column;
}
.info{
border: 1px solid aqua;
}
You could also attempt to use css Grid.
.wrapper {
display: grid;
/*1fr unit is one fraction of the remaining space available. So I have divided the space into two tracks. One longer than the other*/
grid-template-columns: 1fr 5fr;
}
.icon {
background: #a03;
/*Run the icon div in two rows height but take one track width as the rest*/
grid-row: span 2;
}
.info {
background: #bccd03;
}
<div class="wrapper">
<div class="icon">
<p>Icon</p>
</div>
<div class="info">
<p>Text</p>
<p>Number</p>
</div>
<div class="info">
<p>Text</p>
<p>Number</p>
</div>
</div>
I would like to add flight duration in the middle-left of each blue line. I was trying to do following tricks, but unfortunately doesn't work.
This is how to looks like at the moment:
CodePen example
HTML:
<span class="col-md-12 roundtrip">
<div class="col-md-6 trip">Outbound
<div class="flight">Los Angeles</div>
<div class="flight-path">
<div class="flight-duration">1-30h</div>
</div>
<div class="flight">Chicago</div>
<div class="connection">5hr wait</div>
<div class="flight">Chicago</div>
<div class="flight-path">
<div class="flight-duration">1-30h</div>
</div>
<div class="flight">New York</div>
<div class="connection">2hr wait</div>
<div class="flight">New York</div>
<div class="flight-path">
<div class="flight-duration">1-30h</div>
</div>
<div class="flight">Amsterdam</div>
</div>
<div class="col-md-6 trip">Inbound
<div class="flight">Amsterdam</div>
<div class="flight-path">
<div class="flight-duration">1-30h</div>
</div>
<div class="flight">Los Angeles</div>
</div>
</span>
LESS:
.roundtrip {
display: inline-flex;
flex-direction: row;
align-items: stretch;
}
.trip {
width: 100px;
text-align: center;
border: 1px solid black;
margin: 0px 3px;
display: flex;
flex-direction: column;
margin-right: 50%;
}
.flight {
white-space: nowrap;
}
.flight-path {
width: 6px;
min-height: 85px;
flex-grow: 1;
align-self: center;
background-color: #6090FF;
}
.connection {
height: 40px;
color: red;
border: 1px solid red;
display: flex;
flex-direction: column;
justify-content: center;
}
.flight-duration{
margin:auto auto auto 0;
}
This is one of my favorite tricks:
.element {
position: absolute;
top: 50%;
transform: translateY(-50%);
}
Applied to your specific example:
.roundtrip {
display: inline-flex;
flex-direction: row;
align-items: stretch;
}
.trip {
width: 100px;
text-align: center;
border: 1px solid black;
margin: 0px 3px;
display: flex;
flex-direction: column;
margin-right: 50%;
}
.flight {
white-space: nowrap;
}
.flight-path {
width: 6px;
min-height: 85px;
flex-grow: 1;
align-self: center;
background-color: #6090FF;
position: relative;
}
.connection {
height: 40px;
color: red;
border: 1px solid red;
display: flex;
flex-direction: column;
justify-content: center;
}
.flight-duration {
position: absolute;
top: 50%;
transform: translateY(-50%);
/* Just messing around, centering the text horizontally too */
white-space: nowrap;
background: rgba(255, 255, 255, .75);
width: 81px;
left: -38px;
text-align: center;
}
<span class="col-md-12 roundtrip">
<div class="col-md-6 trip">Outbound
<div class="flight">Los Angeles</div>
<div class="flight-path">
<div class="flight-duration">1-30h</div>
</div>
<div class="flight">Chicago</div>
<div class="connection">5hr wait</div>
<div class="flight">Chicago</div>
<div class="flight-path">
<div class="flight-duration">1-30h</div>
</div>
<div class="flight">New York</div>
<div class="connection">2hr wait</div>
<div class="flight">New York</div>
<div class="flight-path">
<div class="flight-duration">1-30h</div>
</div>
<div class="flight">Amsterdam</div>
</div>
<div class="col-md-6 trip">Inbound
<div class="flight">Amsterdam</div>
<div class="flight-path">
<div class="flight-duration">1-30h</div>
</div>
<div class="flight">Los Angeles</div>
</div>
</span>
Source
Assuimg it's the '1-30h' text you're wanting to move:
Try positioning your .flight-duration class with this:
.flight-duration {
position: absolute;
top: 50%;
transform: translateY(-50%);
margin:20px 0px 0px -40px;
}
The -40px is affecting the left-hand margin, the lower the number the further left your text will sit. Higher numbers will cause the text to sit on the right of the blue line.
Here you go, add this to your code :)
.flight-path {
position: relative;
}
.flight-duration{
display: block;
position: absolute;
right: 6px;
width: 46px;
text-align: center;
top: 50%;
transform: translateY(-50%)
}
I forked your codepen, to show a new demo
http://codepen.io/antraxis/pen/jbPpQY?editors=110
I am trying to align flight duration time just in the middle of each flight path (blue line). But it doesn't work, duration (1:30) is not exactly in the middle of the line and text is not centred. How can I fix that?
CodePen code example
HTML:
<span class="col-md-12 roundtrip">
<div class="col-md-6 trip">Outbound
<div class="flight">Los Angeles</div>
<div class="flight-path">
<div class="flight-duration">1-30h</div>
</div>
<div class="flight">Chicago</div>
<div class="connection">5hr wait</div>
<div class="flight">Chicago</div>
<div class="flight-path">
<div class="flight-duration">1-30h</div>
</div>
<div class="flight">New York</div>
<div class="connection">2hr wait</div>
<div class="flight">New York</div>
<div class="flight-path">
<div class="flight-duration">1-30h</div>
</div>
<div class="flight">Amsterdam</div>
</div>
<div class="col-md-6 trip">Inbound
<div class="flight">Amsterdam</div>
<div class="flight-path">
<div class="flight-duration">1-30h</div>
</div>
<div class="flight">Los Angeles</div>
<div class="flight">Los Angeles</div>
<div class="flight-path">
<div class="flight-duration">1-30h</div>
</div>
<div class="flight">Amsterdam</div>
</div>
</span>
LESS:
.roundtrip {
display: inline-flex;
flex-direction: row;
align-items: stretch;
}
.trip {
width: 100px;
text-align: center;
border: 1px solid black;
margin: 0px 3px;
display: flex;
flex-direction: column;
margin-right: 50%;
}
.flight {
white-space: nowrap;
}
.flight-path {
width: 6px;
min-height: 85px;
flex-grow: 1;
align-self: center;
background-color: #6090FF;
position: relative;
}
.connection {
height: 40px;
color: red;
border: 1px solid red;
display: flex;
flex-direction: column;
justify-content: center;
}
.flight-duration {
position: absolute;
top: 50%;
transform: translateY(-50%);
white-space: nowrap;
background: rgba(255, 255, 255, .75);
width: 81px;
left: -38px;
text-align: center;
}
It seems like every time I want to align something vertically I go back to this link:
https://css-tricks.com/centering-css-complete-guide/
I like the way the use cases are organized.
You could try a table layout. Does this help?
.line {
width: 5px;
height: 200px;
display: table;
table-layout: fixed;
text-align: center;
}
.time {
display: table-cell;
vertical-align: middle;
background: #777;
height: 10px;
text-align: center;
}
span {
background: #ccc;
padding: 10px 0px;
}
<div class="line">
<div class="time">
<span>12:34pm</span>
</div>
</div>
I am trying to adjust date and time to be on the same level as city name. Please, see the picture below. Blue path line doesn't start from the beginning of city name because .flight-date element moved to next line. How can I make date-time element to grow to top instead of bottom or propose any other solutions how can I achieve the similar result?
CodePen example
HTML:
<div class="container-fluid">
<div class="roundtrip">
<div class="trip col-xs-5">Outbound
<div class="flight">
<div class="date-time col-xs-offset-4 col-xs-1">
<div class="flight-time pull-right">12:40</div>
<div class="flight-date pull-right">Friday 11 Sep</div>
</div>
<div class="col-xs-offset-0 col-xs-2">
Los Angeles
</div>
</div>
<div class="flight-path"></div>
<div class="flight">Chicago</div>
<div class="connection">5hr wait</div>
<div class="flight">Chicago</div>
<div class="flight-path"></div>
<div class="flight">New York</div>
<div class="connection">2hr wait</div>
<div class="flight">New York</div>
<div class="flight-path"></div>
<div class="flight">Amsterdam</div>
</div>
<!-- just padding: --><div class="col-xs-2"></div>
<div class="trip col-xs-5">Inbound
<div class="flight">Amsterdam</div>
<div class="flight-path"></div>
<div class="flight">Los Angeles</div>
</div>
</div>
</div>
LESS:
body {padding: 2em 0 0 2em}
.roundtrip {
width: 100%;
display: inline-flex;
flex-direction: row;
align-items: stretch;
}
.trip {
//width: 100px;
text-align: center;
border: 1px solid black;
//margin: 0px 3px;
display: flex;
flex-direction: column;
}
.flight {
white-space: nowrap;
}
.date-time{
vertical-align:top
}
.flight-path {
width: 6px;
min-height: 85px;
flex-grow: 1;
align-self: center;
background-color: #6090FF;
}
.connection {
height: 40px;
align-self: center;
width: 70px;
color: red;
border: 1px solid red;
display: flex;
flex-direction: column;
justify-content: center;
}
You can use flexbox like this:
body {
padding: 2em 0 0 2em
}
.align-bottom { /*added*/
display: flex;
align-items: flex-end;
}
.roundtrip {
width: 100%;
display: inline-flex;
flex-direction: row;
align-items: stretch;
}
.trip {
//width: 100px;
text-align: center;
border: 1px solid black;
//margin: 0px 3px;
display: flex;
flex-direction: column;
}
.flight {
white-space: nowrap;
}
.date-time {
text-align: center;
}
.flight-path {
width: 6px;
min-height: 85px;
flex-grow: 1;
align-self: center;
background-color: #6090FF;
}
.connection {
height: 40px;
align-self: center;
width: 70px;
color: red;
border: 1px solid red;
display: flex;
flex-direction: column;
justify-content: center;
}
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
<div class="roundtrip">
<div class="trip col-xs-12">Outbound
<div class="flight align-bottom"> <!--added the class 'align-bottom'-->
<div class="date-time col-xs-offset-2 col-xs-3">
<div class="flight-time">12:40</div>
<div class="flight-date">Friday 11 Sep</div>
</div>
<div class="col-xs-offset-0 col-xs-2">Los Angeles</div>
</div>
<div class="flight-path"></div>
<div class="flight">Chicago</div>
<div class="connection">5hr wait</div>
<div class="flight">Chicago</div>
<div class="flight-path"></div>
<div class="flight">New York</div>
<div class="connection">2hr wait</div>
<div class="flight">New York</div>
<div class="flight-path"></div>
<div class="flight">Amsterdam</div>
</div>
</div>
</div>
Check this out for more info about flexbox