I've a simple web page which shows current date and time and 4 parameters with names and values in a few div.
Now my attempt looks like this:
.outer {
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.inner {
border: 1px solid black;
width: auto;
padding: 5px;
}
#output {
font-size: larger;
display: flex;
justify-content: center;
align-items: center;
color: blue;
padding: 5px;
}
<div id="output">Today: current DateTime value</div>
<div class="outer">
<div class="inner">Parameter 1:</div>
<div class="inner" id="N">par 1 value</div>
<div class="inner">Parameter 2:</div>
<div class="inner" id="V">par 2 value</div>
</div>
<div class="outer">
<div class="inner">Parameter 3:</div>
<div class="inner" id="D">par 3 value</div>
<div class="inner">Parameter 4:</div>
<div class="inner" id="T">par 4 value</div>
</div>
JSFiddle example.
How to align horizontally and vertically this 'table' on page because this page will be shown on big screen (may be TV) ?
I hope this will help you somehow
.outer {
display: flex;
width: 100%;
}
.main-div {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100vh;
}
.inner {
border: 1px solid black;
width: auto;
padding: 5px;
flex: 1;
}
#output {
font-size: larger;
display: flex;
justify-content: center;
align-items: center;
color: blue;
padding: 5px;
}
<div id="output">Today: current DateTime value</div>
<div class="main-div">
<div class="outer">
<div class="inner">Parameter 1 sd sdf sdf 34 43 ewr :</div>
<div class="inner" id="N">par 1 value</div>
<div class="inner">Parameter 2:</div>
<div class="inner" id="V">par 2 value</div>
</div>
<div class="outer">
<div class="inner">Parameter 3:</div>
<div class="inner" id="D">par 3 value</div>
<div class="inner">Parameter 4:</div>
<div class="inner" id="T">par 4 value</div>
</div>
</div>
Related
Here is what I'm intending to do:
Table
Current HTML + CSS, for some reason the table can't contain multiple objects in a row.:
.boardTitle{
margin-top: 10px;
text-align: center;
font-size: 20px;
color: red;
}
.boardTable{
flex: 1;
flex-direction: column;
}
.boardRow{
flex-direction: row;
}
.thread{
border: solid;
}
<div>
<div class="boardTitle">
Name
</div>
<div class="boardTable">
<div class="boardRow">
<div class="thread">
1
</div>
<div class="thread">
2
</div>
</div>
</div>
</div>
class name .boardRow is the container which holds the threads, so you should give it a display property display: flex if you want them to be next each other.
.boardTitle{
margin-top: 10px;
text-align: center;
font-size: 20px;
color: red;
}
.boardTable{
flex: 1;
flex-direction: column;
}
.boardRow{
display:flex; <---- here
flex-direction: row;
}
.thread{
border: solid;
}
<div>
<div class="boardTitle">
Name
</div>
<div class="boardTable">
<div class="boardRow">
<div class="thread">
1
</div>
<div class="thread">
2
</div>
</div>
</div>
</div>
What I am trying to achieve without javascript is to have four buttons arranged in a 2x2 matrix as long as all of their content fits into a cell. When any of them is too long to fit, it should wrap into a 1x4 matrix, with all the cells being having full width. The best I could come up with for now is something like the snippet below. It is just fine until the point where after the wrap the cells should have full width.
.flex-container {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
align-content: flex-start;
align-items: center;
border: 1px solid red;
}
.flex-item {
flex: 0 1 auto;
align-self: auto;
min-width: 40%;
max-width: 100%;
text-align: center;
padding: 10px;
border: 1px solid blue;
margin: 5px;
}
<div class="flex-container">
<div class="flex-item">AAA</div>
<div class="flex-item">BBBBBB</div>
<div class="flex-item">CCCCCCCCC</div>
<div class="flex-item">DDDDDDDDDDD</div>
</div>
<div class="flex-container" style="width: 280px; margin-top: 2em;">
<div class="flex-item">AAA</div>
<div class="flex-item">BBBBBB</div>
<div class="flex-item">CCCCCCCCC</div>
<div class="flex-item">DDDDDDDDDDD</div>
</div>
<div class="flex-container" style="width: 150px; margin-top: 2em;">
<div class="flex-item">AAA</div>
<div class="flex-item">BBBBBB</div>
<div class="flex-item">CCCCCCCCC</div>
<div class="flex-item">DDDDDDDDDDD</div>
</div
Something like this? I made flex:1; for .flex-item
.flex-container {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
align-content: flex-start;
align-items: center;
border: 1px solid red;
}
.flex-item {
flex:1;
align-self: auto;
min-width: 40%;
max-width: 100%;
text-align: center;
padding: 10px;
border: 1px solid blue;
margin: 5px;
}
<div class="flex-container">
<div class="flex-item">AAA</div>
<div class="flex-item">BBBBBB</div>
<div class="flex-item">CCCCCCCCC</div>
<div class="flex-item">DDDDDDDDDDD</div>
</div>
<div class="flex-container" style="width: 280px; margin-top: 2em;">
<div class="flex-item">AAA</div>
<div class="flex-item">BBBBBB</div>
<div class="flex-item">CCCCCCCCC</div>
<div class="flex-item">DDDDDDDDDDD</div>
</div>
<div class="flex-container" style="width: 150px; margin-top: 2em;">
<div class="flex-item">AAA</div>
<div class="flex-item">BBBBBB</div>
<div class="flex-item">CCCCCCCCC</div>
<div class="flex-item">DDDDDDDDDDD</div>
</div
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 want adapt the .flexrow div's width to content but i can't set it with flex.
HTML
<div class="fullwidth">
<div class="sidebar">
<p>sidebar</p>
<p>sidebar</p>
<p>sidebar</p>
<p>sidebar</p>
<p>sidebar</p>
<p>sidebar</p>
</div>
<div class="center">
<div class="flexrow">
<div class="card">
<p>card</p>
</div>
</div>
</div>
</div>
CSS
.center {
display: flex;
justify-content: center;
}
.flexrow {
display: inline-flex;
flex-direction: row;
flex-wrap: wrap;
}
.flexrow .card {
width: 300px;
height: 60px;
background-color: red;
margin: 10px;
padding: 10px;
text-align: center;
}
I have created a snippet here
This is an example of what i want:
Any suggestion?
The main problem here is that when an item wrap, whether one use Flexbox or not, its container won't adjust its width to the new content width.
With the existing markup, here is a simple fix in 2 steps to achieve that:
Add justify-content: center; to your .flexrow rule
For every possible column you need one less ghost element to push elements on the last row all the way to the left. The added elements together with new .flexrow .card:empty rule will do the magic.
.flexrow .card:empty {
height: 0;
margin: 0 10px;
padding: 0 10px;
}
Updated codepen
Stack snippet
.fullwidth {
background-color: grey;
display: flex;
}
.sidebar {
flex: 0 0 280px;
margin: 10px;
padding: 10px;
background-color: black;
color: white;
}
.flexrow {
display: flex;
flex-wrap: wrap;
align-content: center;
justify-content: center;
}
.flexrow .card {
width: 300px;
height: 60px;
background-color: red;
margin: 10px;
padding: 10px;
text-align: center;
}
.flexrow .card:empty {
height: 0;
margin: 0 10px;
padding: 0 10px;
}
<div class="fullwidth">
<div class="sidebar">
<p>sidebar</p>
<p>sidebar</p>
<p>sidebar</p>
<p>sidebar</p>
<p>sidebar</p>
<p>sidebar</p>
</div>
<div class="center">
<div class="flexrow">
<div class="card">
<p>card</p>
</div>
<div class="card">
<p>card</p>
</div>
<div class="card">
<p>card</p>
</div>
<div class="card">
<p>card</p>
</div>
<div class="card">
<p>card</p>
</div>
<div class="card">
<p>card</p>
</div>
<div class="card">
<p>card</p>
</div>
<!-- Ghost elements, if max columns is 4 one need 3 -->
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
</div>
</div>
</div>
Try this code-example
.flexrow .card {
height: 60px;
background-color: red;
margin: 10px;
padding: 10px;
text-align: center;
}
I removed the width, so that flexrow can adapt to the content.
Is this what you wanted? If not please specify (maybe a picture?)
UPDATE
Try this one:
.flexrow {
width: 90%;
display: inline-flex;
flex-direction: row;
flex-wrap: wrap;
-webkit-align-content: center;
align-content: center;
-webkit-justify-content: space-between;
justify-content: space-between;
margin: 0 auto;
}
.flexrow:after {
content: "";
width: 300px;
margin: 10px;
padding: 10px;
text-align: center;
}
Hope that what you're looking for :)
I guess what you want is that if you want the sidebar and the content to be side by side you need to use flex on the fullwidth div, check the code below:
.sidebar {
background: black;
color: white;
}
.fullwidth {
display: flex;
}
.center {
display: flex;
justify-content: center;
align-items:center;
width:100%;
}
.flexrow {
display: inline-flex;
flex-direction: row;
flex-wrap: wrap;
width:100%;
}
.flexrow .card {
width: calc(33.33% - 20px);
box-sizing:border-box;
height: 60px;
background-color: red;
margin: 10px;
padding: 10px;
text-align: center;
}
<div class="fullwidth">
<div class="sidebar">
<p>sidebar</p>
<p>sidebar</p>
<p>sidebar</p>
<p>sidebar</p>
<p>sidebar</p>
<p>sidebar</p>
</div>
<div class="center">
<div class="flexrow">
<div class="card">
<p>card</p>
</div>
<div class="card">
<p>card</p>
</div>
<div class="card">
<p>card</p>
</div>
<div class="card">
<p>card</p>
</div>
<div class="card">
<p>card</p>
</div>
<div class="card">
<p>card</p>
</div>
</div>
</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