Alright so this is the third time I've looked for help on a particular element I'm working on in an app so I apologize for the repetition.
I'm building a questionnaire for an application and I want all the questions to be contained in a div and the overflow hidden. The problem I'm currently running into is if the height doesn't exceed 80% of the window size the containing div doesn't collapse into itself and there is an unnecessary amount of whitespace left over.
I have tried to switch the questionnaire-box height style to max-height but this caused the overflow content of the .questions div to be hidden instead of scrollable.
I have a strong suspicion I may need to handle this with js but I prefer straight CSS and HTML if possible.
Anyone have any suggestions?
html, body {
height: 100%;
}
.questionnaire-container {
display: flex;
position: fixed;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 255, .1);
}
.questionnaire-box {
position: relative;
width: 80%;
height: 70%;
margin: 0 auto;
background-color: #ffffff;
overflow: hidden;
}
.questions {
height: 100%;
padding: 1rem 2rem;
overflow-y: auto;
}
<div class="questionnaire-container">
<div class="questionnaire-box">
<div class="questions">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>
</div>
</div>
You have to move the padding from .questions to .questionnaire-box. Also, .questions has no (...-)width attributes set anymore, but the .questionnaire-box's max-width is calc(70vh - 2rem).
Fiddle: https://jsfiddle.net/moor131j/2/
Related
Trying to display a help popup in the center of the screen, using css. On my computer and ipad, it works fine, but on iPhone the popup is vertically centered within the entire scrollable vertical space, which means I sometimes have to scroll up or down to see it. I want it centered within the currently visible screen at the time it is invoked. (Note the page height is not static, i.e. grows and shrinks based on user activity).
Here is the relvant css:
.helpcontent {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
transition: 200ms ease-in-out;
border: 1px solid black;
border-radius: 10px;
z-index: 10;
background-color: khaki;
width: 500px;
max-width: 80%;
padding: 10px 15px;
}
<div class="helpcontent">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
You have several problems.
You must define a height, otherwise it will grow with the content, and it may happen that you have more content than space available vertically. You will have to use overflow: hidden to hide the overflow.
You are not really centering the window. If you want to do it I recommend you to change the focus. Make an element occupy all the available window, give it a display: flex and center it with align-items and justify-content.
An example.
<section class="modal">
<div class="modal__content">
<!-- Div that will be centered on the screen and will contain all your content. -->
</div>
</section>
.modal {
display: flex;
justify-content: center;
align-items: center;
position: fixed;
inset: 0;
}
.modal__content {
width: 10rem;
height: 10rem;
border: 1px solid black;
}
You already have an interactive tag that is designed for the task: <dialog>.
I will try to make this sound as easy as possible.
I am trying to place 2 div containers, side by side, and have them be the same height at all times.
The right div will be regular text. The amount of text in here will vary since I plan on using this for different pages.
The left div will be composed of 2 smaller containers - a title block, and an image block beneath it.
Here is a visual example of what I'm trying to achieve. The green box is supposed to be the full photo
Example Photo
I would like the photo in the image block of the left side to take up the full height/width of the box - (similar to background-position: cover that is used in CSS). I'd prefer to use a regular img tag instead of setting it as a div background.
The issue that I am having is that the image height on the left takes priority over the text box on the right hand side, and causes both containers to appear much longer than I want. I want the text block on the right to be prioritized, and the image block changes height based on that.
I've tried using object-fit: contain, but it isn't working, unfortunately. The closest I've gotten is to use width: 100%, but then it makes the height way too big.
Here's what I have so far:
.main {
display: flex;
}
.main .left {
width: 40%;
float: left;
}
.main .left .title {
background-color: black;
text-align: center;
display: block;
height: 90px;
padding: 50px;
color: white;
font-size: 40px;
}
.photo {
height: auto;
width: 100%;
}
.photo img {
width: 100%;
}
.main .right {
width: 60%;
float: right;
}
<div class="main">
<div class="left">
<div class="title">This is my Title</div>
<div class="photo"><img src="https://image.shutterstock.com/z/stock-photo-pastoral-green-field-with-long-shadows-in-tuscany-italy-275372477.jpg"></div>
</div>
<div class="right">
<p>text goes here lalalalalala</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
<style>
.main {
display: flex;
}
.main .left {
width: 40%;
display: flex;
flex-direction: column;
}
.main .left .title {
background-color: black;
text-align: center;
display: block;
height: 90px;
padding: 50px;
color: white;
font-size: 40px;
}
.photo {
width: 100%;
overflow: hidden;
position: relative;
flex-grow: 1;
}
.photo img {
width: 100%;
position: absolute;
}
.main .right {
width: 60%;
}
</style>
Notes:
I made the image absolutely positioned so its own height won't stretch our flex row.
The image is being cropped by height. If the title is taller than the text (or the same height), you won't see the image at all.
I made the left column also display flex and the photo box flex grow so that the title can stay the same height and the photo box will stretch the rest of the way to match the right column.
We don't need float left/right for flex items.
So I have tried using flex styling to center my page which is what a lot of other experts have been telling me in past forums and never use floats. A lot of people suggest either using grid or flex depending on the situation when reducing the page from desktop to tablet and mobile for responsive website.
Here is what I was attempting to do and I got what I like in desktop.
Now the text went over the nav bar in mobile. I would like the image to stack on top and the text on the bottom. How do I fix that? And one more thing. When I tap on my hamburger icon, it blocks out the text and I would like to know how you can bring that down below the nav menu when I expand my menu. I know you can use media queries for when it reaches a certain amount of pixels, but I am not sure specifically what code to use. I know there is one that I like for example which is
display: block;
which works well when it is in a grid instead of flex.
Take a look at my code and tell me what can I do to fix this issue? Here is where I got the idea from using flex. https://css-tricks.com/centering-css-complete-guide/
1. Click on Both Horizontally and Vertically
2. Then click on Can you use flexbox
HTML
<div class="flex-Summary">
<div style="float: left;">
<img src="img/wallpaper1.jpg" style="width: 170px; height: 170px; border-radius:50%;">
</div>
<div style="float: right;">
<h2>Summary</h2>
<p style=" font-size: 20px;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</P>
</div>
</div>
CSS
.flex-Summary {
display: flex;
justify-content: center;
align-items: center;
background: rgba(0, 0, 0, 0.8);
}
In cases like this, you need to simplify things. I personally think Grid is overkill for you. Flexbox is sufficient for your layout. I've put together a stripped-down demo for you, including only the necessary HTML and CSS, so you can see how the layout works.
Some explanation…
First, the flex container is made to be at least the height of the viewport. With that in place, we can focus on the children. I tell the .content child to occupy the most space that is available using flex-grow: 1. The nav implicitly takes up the remaining space, which is what we want. All markup is part of the document flow and takes up "real" space. It seemed like something may have been absolutely positioned in your example, causing the overflow issues in mobile.
As far as vertically centering the image in the content area, I set it to margin: auto, which keeps it centered without adding complexity to the CSS.
I've included a link to the Fiddle here, and at the end of my answer.
body, html, p {
margin: 0;
}
body,
.container {
min-height: 100vh;
}
.container {
display: flex;
flex-direction: column;
}
nav {
padding: 1em;
background-color: #002eae;
}
nav a {
color: white;
}
.content {
background-color: white;
flex-grow: 1;
display: flex;
align-items: center;
justify-content: center;
}
.content-summary {
width: 500px;
max-width: 100%;
background-color: rgba(0, 0, 0, 0.8);
color: white;
padding: 1em 1.5em;
display: flex;
}
.content-summary img {
flex-shrink: 0;
width: 100px;
height: 150px;
padding-right: 10px;
margin: auto;
}
<div class="container">
<nav>
Link 1
Link 2
Link 3
Link 4
Link 5
</nav>
<div class="content">
<div class="content-summary">
<img src="https://placekitten.com/200/300" alt="">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>
</div>
</div>
http://jsfiddle.net/wzgs5mc2/2/
I got stuck. I have a wrapping div on my page with height set to some value. In this div, I have another div with set height (the yellow one). Under it, there is a blue div, which height automatically grows with the content. I want that div to have a scrollbar when the content exceeds all available height.
here is an example you can play with:
.container {
width: 200px;
height: 300px;
padding: 10px;
border: 1px solid #888891;
}
.header {
height: 40px;
background-color: #FEEC63;
margin-bottom: 10px;
}
.body {
color: #fff;
background-color: #63A4FE;
overflow: hidden; /* why is that not hiding the excess text? */
}
<div class="container">
<div class="header">
Hi there!
</div>
<div class="body">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</div>
https://jsfiddle.net/674w4a09/
add height: calc(100% - 50px); to .body and it will work
the overflow didn't working on div.body because the height wasn't fixed
and to make it fit the rest of the container you use calc to substruct the height of the header plus 10px of the margin-bottom
jsfiddle
From MDN:
In order for the overflow property to have an effect, the block
level container must either have a bounding height (height or
max-height) or have white-space set to nowrap.
However, when you switch from a block formatting context to a flex formatting context, the requirement above doesn't apply and you can keep things simple:
.container {
display: flex;
flex-direction: column;
width: 200px;
height: 300px;
padding: 10px;
border: 1px solid #888891;
}
.header {
height: 40px;
background-color: #FEEC63;
margin-bottom: 10px;
}
.body {
overflow: hidden; /* switch to 'auto' for scrollbar */
color: #fff;
background-color: #63A4FE;
}
<div class="container">
<div class="header">Hi there!</div>
<div class="body">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</div>
add height: calc(100% - 50px) to .body
50px = 40px (of header height) + 10px (of header bottom margin)
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.container {
width: 200px;
height: 300px;
padding: 10px;
border: 1px solid #888891;
overflow: hidden;
}
.header {
height: 40px;
background-color: #FEEC63;
margin-bottom: 10px;
}
.body {
color: #fff;
background-color: #63A4FE;
height: calc(100% - 50px);
}
</style>
</head>
<body>
<div class="container">
<div class="header">
Hi there!
</div>
<div class="body">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</div>
</body>
</html>
I have this code:
html:
<div class="tile">
<h3>short</h3>
<div class="content">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
</div>
<div class="tile">
<h3>longLongLong longLongLong longLongLong</h3>
<div class="content">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
</div>
css:
.tile{
height: 300px;
width: 200px;
background: #cecece;
float: left;
margin: 0 10px 0 0;
}
.tile h3{
min-height: 20px;
max-height: 61px;
display: inline-block;
overflow: hidden;
}
.tile .content{
height: 162px;
overflow: hidden;
margin: 0 10px;
}
fiddle:
http://jsfiddle.net/v8Lhxk2v/
and I get this layout
but I need to get something like next image, without using js.
Can that be solved?
Depending on browser support you can use flex.
The container would need:
display: flex;
flex-flow: column;
Here's a quick demo with example markup:
http://jsbin.com/xuwina/3/edit?html,css,output
Look at this
http://jsfiddle.net/v8Lhxk2v/4/
playing with border-bottom and overflow:hidden on the parent element.
.tile{
height: 300px;
width: 200px;
background: #cecece;
float: left;
margin: 0 10px 0 0;
border-bottom: 22px solid #cecece;
overflow: hidden;
}
.tile h3{
min-height: 25px;
max-height: 61px;
display: inline-block;
overflow: hidden;
}
.tile .content{
margin: 0 10px;
}
I would say try to position the content absolute to the bottom of the tile.
In that case you can set the space where the content should end. Still you need to add an extra class to your content with the smaller title to be it larger than the other tile with the larger title.
Your HTML would be:
<div class="tile">
<h3>short</h3>
<!-- Added an extra class to the div -->
<div class="content small">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
</div>
Within your CSS I changed this:
.tile .content{
height: 162px;
background-color:grey;
overflow: hidden;
margin: 0 10px;
position: absolute;
bottom:30px;
}
.tile .small{height:216px;}
And then you get this result: JSFIDDLE
Let me know if this is a solution that works for you.
Solving this problem is pretty simple with flexbox.
By creating a column flex container the flex items stack vertically. You can then apply flex: 1 to the text box (.content) which makes it expand the full available height of the container.
HTML
<div id="container"><!-- container to align .tile boxes in flexbox row;
(this flexbox is optional) -->
<div class="tile">
<h3>short</h3>
<div class="content">Lorem ipsum dolor sit amet ... </div>
</div>
<div class="tile">
<h3>longLongLong longLongLong longLongLong</h3>
<div class="content">Lorem ipsum dolor sit amet ... </div>
</div>
</div><!-- end #container -->
CSS
#container {
display: flex; /* establish flex container;
aligns flex items (child elements) in a row by default; */
}
.tile {
display: flex; /* establish (nested) flex container */
flex-direction: column; /* override default row alignment */
height: 300px;
width: 200px;
background: #cecece;
/* float: left; */
margin: 0 10px 0 0;
}
.tile h3 {
min-height: 20px;
max-height: 61px;
/* display: inline-block; */
overflow: hidden;
}
.tile .content {
flex: 1; /* tells flex item to use all available vertical space in container */
height: 162px;
overflow: hidden;
margin: 0 10px 40px 10px; /* added bottom margin for spacing from container edge */
}
DEMO
Note that flexbox is supported by all major browsers, except IE 8 & 9. Some recent browser versions, such as Safari 8 and IE10, require vendor prefixes. For a quick way to add all the prefixes you need, use Autoprefixer. More browser compatibility details in this answer.
Using Ellipsis (...)
If you want to apply ellipsis to a single line of text, CSS makes that somewhat easy with the text-overflow property. It's still a bit tricky (due to all the requirements), but text-overflow makes it possible and reliable.
If, however, you want to use ellipsis on multi-line text – as would be the case here – then don't expect to have any fun. CSS doesn't provide a single property for doing this, and the workarounds are hit and miss. For details and methods see my answer here: Applying Ellipsis to Multiline Text
Well, pretty easy... make <div class="move"></div> and put your h3 into it like:<div class="move"><h3>Short</h3></div> now style that move div like so:
.move{height:100px;}
it workd, you are done :)
PS: make it with both of your h3s :)
well, there is a code:
css:
.tile{
height: 300px;
width: 200px;
background: #cecece;
float: left;
margin: 0 10px 0 0;
}
.tile h3{
min-height: 20px;
max-height: 61px;
display: inline-block;
overflow: hidden;
}
.tile .content{
height: 162px;
overflow: hidden;
margin: 0 10px;
}
.move{height:100px;}
html:
<div class="tile">
<div class="move">
<h3>short</h3>
</div>
<div class="content">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
</div>
<div class="tile">
<div class="move">
<h3>longLongLong longLongLong longLongLong</h3>
</div>
<div class="content">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
</div>
I would try another aproach. Using jquery you can calculate on window load the height of the highest h3 and then, apply that height to all your h3 inside your tiles.
I know you asked for a pure css solution, so it's ok if I don't get any credit, but I think this answer may be usefull for other users with the same problem so that's why I wrote it.
Something like this:
var maxHeight = -1;
$('.tile h3').each(function() {
if ($(this).height() > maxHeight)
maxHeight = $(this).height();
});
$('.tile h3').each(function() {
$(this).height(maxHeight);
});
As you can see in this JSFIDDLE (notice I removed the fixed max-heightyou added to the header and add a third tilewith a "very long text" so you can check the exmaple better.
Try this use extra div with wrap. h3 & div.content tag are wrapped by extra div and some css to be change as following:
.tile > div {
height: calc(100% - 20px);
margin: 10px;
overflow: hidden;
line-height: 22px!important;
}
.tile {
height: 300px;
width: 200px;
background: #cecece;
float: left;
margin: 0 10px 0 0;
}
.tile h3 {
min-height: 20px;
display: inline-block;
overflow: hidden;
margin: 5px 0;
}
.tile .content {
margin: 0;
}
<div class="tile">
<div>
<h3>short</h3>
<div class="content">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
</div>
</div>
<div class="tile">
<div>
<h3>longLongLong longLongLong longLongLong</h3>
<div class="content">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
</div>
</div>
How about a fixed height:
.tile h3 {
height: 65px;
display: inline-block;
overflow: hidden;
}
Or accompanied by js (jQuery):
// Height handler
var headHeight = 0;
// Iterate throug all H3s an get highest
jQuery( 'h3' ).each( function() {
// Get current height
var currentHeight = jQuery( this ).height();
// If higher as handler set as handler
if( currentHeight > headHeight ) {
headHeight = currentHeight;
}
} );
// Set the height of all H3s
jQuery( 'h3' ).css( 'height', headHeight );
This would be a pretty robust solution ...
you can resolve by the flexbox Flexible Box Layout Module:
.tile{
...
/* add the following line */
display: flex;
flex-direction: column;
justify-content: space-between;
...
}
http://jsfiddle.net/57yLgxsx/
This example works on Chrome you can check for the browser compability on caniuse.com
and then add the correct prefixes.
It depends on who you want to ensure compatibility ( last 2 vorsion of all browser, mobile or desktop or both ).
keep in mind that there are two versions of flexbox, the "old" and the "new". What I wrote above is the new.
This link can clarify some ideas
https://css-tricks.com/snippets/css/a-guide-to-flexbox/