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>
Related
I am trying to make my 2x2 grid of divs take on a different order. I am trying to use flexbox for this.
I have tried to simplify my situation in a Codepen and I come quite far, yet I cannot perform the last step.
I want to swap number 2 and 3 so the order is goes from top right to top left.
Here is the code I use for the above output:
.container {
height: 600px;
width: 800px;
background-color: red;
display: flex;
flex-direction: row-reverse;
flex-wrap: wrap;
}
.container2 {
// flex-direction: column-reverse <-- this does not work
}
.square {
font-size: 84px;
text-align: center;
margin: 20px;
background-color: green;
width: 300px;
height: 200px;
}
<div class="container">
<div class="container1">
<div class="square">
0
</div>
<div class="square">
1
</div>
</div>
<div class="container2">
<div class="square">
2
</div>
<div class="square">
3
</div>
</div>
</div>
Does anyone know a simple addition or, if necessary, a bigger change that will make this work?
Thanks in advance for your responses!
EDIT: Perhaps it is important to say that there will not always be 4 squares. 4 will be the maximum but there may also be 1, 2 or 3 squares.
You can manage this by manipulating the size of the overall container and adjusting the various flex-directions of each sub-container.
.container {
height: 180px;
width: 180px;
background-color: red;
display: inline-flex;
flex-direction: row-reverse;
flex-wrap: wrap;
}
.container1 {
display: flex;
flex-direction: column;
align-items: flex-end;
}
.container2 {
display: flex;
flex-direction: column-reverse;
}
.square {
font-size: 42px;
text-align: center;
background-color: green;
width: 50px;
height: 50px;
margin: 20px;
}
<div class="container">
<div class="container1">
<div class="square">
0
</div>
<div class="square">
1
</div>
</div>
<div class="container2">
<div class="square">
2
</div>
<div class="square">
3
</div>
</div>
</div>
<div class="container">
<div class="container1">
<div class="square">
0
</div>
<div class="square">
1
</div>
</div>
<div class="container2">
<div class="square">
2
</div>
</div>
</div>
why don't you use a simple approach?
#flex { display: flex; flex-direction: column; }
#a { order: 2; }
#b { order: 1; }
#c { order: 3; }
<div id="flex">
<div id="a">A</div>
<div id="b">B</div>
<div id="c">C</div>
</div>
you can change the order of any flex child using order
check this to know more about flex in css
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
.container {
height: 600px;
width: 800px;
background-color: red;
display: flex;
flex-direction: row-reverse;
flex-wrap: wrap;
}
.container1,.container2 {
display:flex;
flex-direction: column;
justify-content:flex-end;
}
.square {
font-size: 84px;
text-align: center;
margin: 20px;
background-color: green;
width: 300px;
height: 200px;
}
.order-1{
order:1;
}
.order-2{
order:2
}
<div class="container">
<div class="container1">
<div class="square">
0
</div>
<div class="square">
1
</div>
</div>
<div class="container2">
<div class="square order-2">
2
</div>
<div class="square order-1">
3
</div>
</div>
</div>
I have an html page utilizing flex-box and a table which has text rows, in which some contain emojis and some do not. I have been unsuccessful thus far getting the rows to align vertically, such that all rows are centered vertically.
I have tried various combinations of margin and padding to no avail.
In the code provided you will see that rows without emojis are at the top and the ones with emojis are centered. If I make the rows without emojis centered, the rows with emojis are at the bottom. My goal is to have all rows properly centered vertically within the row under all cases.
.wrapper1 {
max-height: 200px;
margin-top: 50px;
margin-bottom: 15px;
padding-right: 25px;
padding-left: 25px;
}
.wrapper2 {
display: flex;
flex-direction: column;
flex-grow: 1;
}
.wrapper3 {
max-height:150px;
overflow: auto;
width: 100%;
}
.sm_table_header {
display:flex;
flex-direction: column;
border-top-left-radius:4px;
border-top-right-radius:4px;
color:#ffffff;
background-color: #307eab;
height: 20px;
}
.sm_table_row {
height: 25px;
display: flex; display: -webkit-flex;
flex-direction: row; -webkit-flex-direction: row;
flex-grow: 0; -webkit-flex-grow: 0;
flex-wrap: wrap; -webkit-flex-wrap: wrap;
width: 100%;
border-bottom: 1px solid silver;
border-collapse: collapse;
}
<div class="wrapper1">
<div class="wrapper2">
<div class="wrapper3">
<div class="sm_table_header ui-widget-header">
<div class="sm_table_row">
<div class="sm_table_subject_head">Subject</div>
</div>
</div>
</div>
<div class="wrapper3">
<div class="sm_table_body">
<div class="sm_table_row" id="1">
<div class="sm_table_subject">Test Emoji </div>
</div>
<div class="sm_table_row" id="1">
<div class="sm_table_subject">test 3</div>
</div>
<div class="sm_table_row" id="1">
<div class="sm_table_subject"><span class="span.emoji" style=">😀</span>"Test Emoji 2 <span class="span.emoji">😎</span> - good deal</div>
</div>
<div class="sm_table_row" id="1">
<div class="sm_table_subject">Test Emoji 2 <span class="span.emoji">😎</span> - good deal</div>
</div>
</div>
</div>
You can simply set the line-height for .sm_table_row, will center each element perfectly.
.sm_table_row {
line-height: 25px;
}
.wrapper1 {
max-height: 200px;
margin-top: 50px;
margin-bottom: 15px;
padding-right: 25px;
padding-left: 25px;
}
.wrapper2 {
display: flex;
flex-direction: column;
flex-grow: 1;
}
.wrapper3 {
max-height:150px;
overflow: auto;
width: 100%;
}
.sm_table_header {
display:flex;
flex-direction: column;
border-top-left-radius:4px;
border-top-right-radius:4px;
color:#ffffff;
background-color: #307eab;
height: 20px;
}
.sm_table_row {
height: 25px;
display: flex; display: -webkit-flex;
flex-direction: row; -webkit-flex-direction: row;
flex-grow: 0; -webkit-flex-grow: 0;
flex-wrap: wrap; -webkit-flex-wrap: wrap;
width: 100%;
border-bottom: 1px solid silver;
border-collapse: collapse;
line-height: 25px;
}
<div class="wrapper1">
<div class="wrapper2">
<div class="wrapper3">
<div class="sm_table_header ui-widget-header">
<div class="sm_table_row">
<div class="sm_table_subject_head">Subject</div>
</div>
</div>
</div>
<div class="wrapper3">
<div class="sm_table_body">
<div class="sm_table_row" id="1">
<div class="sm_table_subject">Test Emoji </div>
</div>
<div class="sm_table_row" id="1">
<div class="sm_table_subject">test 3</div>
</div>
<div class="sm_table_row" id="1">
<div class="sm_table_subject"><span class="span.emoji" style=">😀</span>"Test Emoji 2 <span class="span.emoji">😎</span> - good deal</div>
</div>
<div class="sm_table_row" id="1">
<div class="sm_table_subject">Test Emoji 2 <span class="span.emoji">😎</span> - good deal</div>
</div>
</div>
</div>
on .sm_table_row use
align-items: center;
"Flex items can be aligned in the cross axis of the current line of the flex container, similar to justify-content but in the perpendicular direction. align-items sets the default alignment for all of the flex container’s items, including anonymous flex items."
- flexbox cheatsheet: https://yoksel.github.io/flex-cheatsheet/#align-items
.wrapper1 {
max-height: 200px;
margin-top: 50px;
margin-bottom: 15px;
padding-right: 25px;
padding-left: 25px;
}
.wrapper2 {
display: flex;
flex-direction: column;
flex-grow: 1;
}
.wrapper3 {
max-height:150px;
overflow: auto;
width: 100%;
}
.sm_table_header {
display:flex;
flex-direction: column;
border-top-left-radius:4px;
border-top-right-radius:4px;
color:#ffffff;
background-color: #307eab;
height: 20px;
}
.sm_table_row {
height: 25px;
display: flex; display: -webkit-flex;
flex-direction: row; -webkit-flex-direction: row;
flex-grow: 0; -webkit-flex-grow: 0;
flex-wrap: wrap; -webkit-flex-wrap: wrap;
width: 100%;
align-items: center;
border-bottom: 1px solid silver;
border-collapse: collapse;
}
<meta charset="utf-8">
<div class="wrapper1">
<div class="wrapper2">
<div class="wrapper3">
<div class="sm_table_header ui-widget-header">
<div class="sm_table_row">
<div class="sm_table_subject_head">Subject</div>
</div>
</div>
</div>
<div class="wrapper3">
<div class="sm_table_body">
<div class="sm_table_row" id="1">
<div class="sm_table_subject">Test Emoji </div>
</div>
<div class="sm_table_row" id="1">
<div class="sm_table_subject">test 3</div>
</div>
<div class="sm_table_row" id="1">
<div class="sm_table_subject"><span class="span.emoji" style=">😀</span>"Test Emoji 2 <span class="span.emoji">😎</span> - good deal</div>
</div>
<div class="sm_table_row" id="1">
<div class="sm_table_subject">Test Emoji 2 <span class="span.emoji">😎</span> - good deal</div>
</div>
</div>
</div>
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>
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>