I am trying to make a moviepage using flexbox. I have three images in one flexbox, but I can't get them to come on top of each other, they will only place next to each other. Any tips? And btw, I am not making the page responsive yet.
CSS
/*FLEXBOKS*/
.flex-container{
display: flex;
flex-wrap: wrap;
flex-direction: row;
justify-content: center;
align-items: center;
align-content: center;
margin: 100px;
}
.flex-item1{
order: <integer>;
flex-grow: 1;
flex-shrink: 1;
flex-basis: auto;
align-self: stretch;
background-color: #B0B0B0;
}
.flex-item2{
order: <integer>;
flex-grow: 2;
flex-shrink: 1;
flex-basis: auto;
align-self: baseline;
background-color: #B0B0B0;
}
.flex-item3{
order: <integer>;
flex-grow: 2;
flex-shrink: 1;
flex-basis: auto;
align-self: baseline;
background-color: #B0B0B0;
}
.flex-item4{
order: <integer>;
flex-grow: 2;
flex-shrink: 1;
flex-basis: auto;
align-self: baseline;
background-color: orange;
}
HTML
<div class="flex-container">
<div class="flex-item1">
<h2>NEW MOVIES</h2>
<img src="The_Intouchables_3.jpg" width="200" height="250">
<img src="The_Lunchbox_1.jpg" width="200" height="250">
<img src="montypythonandtheholygrail_1.jpg" width="200" height="250">
</div>
<div class="flex-item2">LAST RENTED</div>
<div class="flex-item3">RECOMMENDATIONS</div>
<div class="flex-item4">RULES</div>
</div>
Set to the flex container the css rule
flex-direction: column;
You can use following CSS
.flex-container{
display: flex;
flex-wrap: wrap;
flex-direction: column;
justify-content: center;
align-items: center;
align-content: center;
margin: 100px;
}
Related
I am trying to add image to the flex item, but i am not able to fit it to the complete div container.
following is my code. can someone advise how can i have image fit in to flex item (div container).
<!DOCTYPE html>
<html lang="en">
<head>
<title>Flex Box</title>
<meta charset="utf-8">
<style>
.flex-container {
display: -webkit-flex;
display: flex;
width: 800px;
height: 500px;
background-color: blueviolet;
-webkit-flex-direction: column-reverse;
flex-direction: column;
-webkit-align-content: stretch;
align-content: stretch;
-webkit-align-items: center;
align-items: center;
-webkit-justify-content: space-around;
justify-content: space-around;
}
.flex-item {
background-color: bisque;
margin: 15px;
width: 600px;
flex-grow: 1;
}
.third_item {
-webkit-flex: 1;
flex: 1;
}
#iimage {
background-color: transparent;
}
</style>
</head>
<body>
<article class="flex-container">
<div class="flex-item third_item">
<img src="block_beach_1.jpg" width="600px" height="100px" id="iimage">
</div>
</article>
</body></html>
You can fit the image to the container by specifying a width 100% in your css for the image. Also remove the inline width and height property for the image.
Edit: If you want to fit the image horizontally and vertically, apply height 100% along with the width value.
.flex-container {
display: -webkit-flex;
display: flex;
width: 800px;
height: 500px;
background-color: blueviolet;
-webkit-flex-direction: column-reverse;
flex-direction: column;
-webkit-align-content: stretch;
align-content: stretch;
-webkit-align-items: center;
align-items: center;
-webkit-justify-content: space-around;
justify-content: space-around;
}
.flex-item {
background-color: bisque;
margin: 15px;
width: 600px;
flex-grow: 1;
}
.third_item {
-webkit-flex: 1;
flex: 1;
}
#iimage {
width: 100%;
height: 100%;
background-color: transparent;
}
<article class="flex-container">
<div class="flex-item third_item">
<img src="https://miro.medium.com/max/3000/1*MI686k5sDQrISBM6L8pf5A.jpeg" id="iimage" />
</div>
</article>
I'm trying to center an <amp-img> in a div vertically.
<div class="outer" style="height: 100vh">
<amp-img class="inner" layout="responsive"></amp-img>
</div>
So far I've tried these ways, but they don't work:
First
.outer {
display: flex;
justify-content: center;
align-items: center;
}
In this case, the image disappears.
Second
.outer {
line-height: 100vh
}
.inner {
display: inline-block;
vertical-align: center;
}
Also the image's size goes to 0 x 0 and the image disppears.
And so on
Other ways also make the image disppear or don't work as expected.
Is there a way to center <amp-img> vertically by any chance?
Your first example was very close to solution:
See example:
.inner{
flex-basis: 0;
-ms-flex-preferred-size: 0;
-webkit-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1;
}
.outer {
display: flex;
flex-wrap: wrap;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
height: 100vh
}
<div class="outer">
<amp-img class="inner" layout="responsive">your image</amp-img>
</div>
I want to make a three columns layout for my website using flexboxes.
However, my 'commentCaMarche' div does not seem to follow the flex order, it is located at the top of the 'details-index' column. Do you know how to solve this problem?
#credits {
font-family: 'Roboto Condensed', sans-serif;
color: #FFFFFF;
height: 100vh;
background-color: #FB3D00;
margin-bottom: 0;
}
#columns {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-between;
}
#details-index {
font-size: 1.6vmin;
text-align: center;
flex: 1;
order: 1;
display: flex; /*Note : Each of my columns is also a flex container for other contents I omitted*/
flex-direction: column;
justify-content: space-around;
}
(...)
#commentCaMarche {
font-size: 2vmin;
text-align: center;
flex: 1;
order: 2;
display: flex;
flex-direction: column;
justify-content: space-around;
}
(...)
#sources {
font-size: 1.4vmin;
text-align: center;
flex: 1;
order: 3;
display: flex;
flex-direction: column;
justify-content: space-around;
}
<div id='credits'>
<div id='columns'>
<div id='commentCaMarche'>
<h2>Comment ça marche</h2> (...)
</div>
<div id='details-index'>
<h2>Le détail</h2> (...)
</div>
<div id='sources'>
<h2>Sources des données</h2> (...)
</div>
</div>
</div>
Here is the css for making it responsive 3 column
#columns{width:100%; float:left;}
#commentCaMarche{width:33.33%; float:left}
#details-index{width:33.33%; float:left}
#sources{width:33.33%; float:left}
You need to change order property for your flex columns. JSfiddle
#details-index {
font-size: 1.6vmin;
text-align: center;
flex: 1;
order: 2;
display: flex; /*Note : Each of my columns is also a flex container for other contents I omitted*/
flex-direction: column;
justify-content: space-around;
}
#commentCaMarche {
font-size: 2vmin;
text-align: center;
flex: 1;
order: 1;
display: flex;
flex-direction: column;
justify-content: space-around;
}
The flex-wrap: wrap will make your columns break line when they doesn't fit the width available, so by removing it from the columns rule, you'll have 3 proper columns at any width.
I also temporarily removed the order from the flex items, so they show up in the same order they are placed in the markup, but if you need to change them like in your sample, please add it back, or why not simply swap them in the markup
#credits {
font-family: 'Roboto Condensed', sans-serif;
color: #FFFFFF;
height: 100vh;
background-color: #FB3D00;
margin-bottom: 0;
}
#columns {
display: flex;
justify-content: space-between;
}
#details-index {
font-size: 1.6vmin;
text-align: center;
flex: 1;
display: flex;
flex-direction: column;
justify-content: space-around;
}
#commentCaMarche {
font-size: 2vmin;
text-align: center;
flex: 1;
display: flex;
flex-direction: column;
justify-content: space-around;
}
#sources {
font-size: 1.4vmin;
text-align: center;
flex: 1;
display: flex;
flex-direction: column;
justify-content: space-around;
}
<div id='credits'>
<div id='columns'>
<div id='commentCaMarche'>
<h2>Comment ça marche</h2>
(...)
</div>
<div id='details-index'>
<h2>Le détail</h2>
(...)
</div>
<div id='sources'>
<h2>Sources des données</h2>
(...)
</div>
</div>
</div>
I am using flex for making a searchbar/input element stay centered and change width as the screen size changes.
This is my html:
<div class="flex-container">
<div class="flex-row">
<h1 class="brandname">Hello</h1>
</div>
<div class="flex-row">
<form>
<!-- <div class="search centered"> -->
<div class="search">
<div class="input-container">
<input type="text" name="query" class="searchbar" />
<button type="submit" class="search-button">Search</button>
</div>
</div>
</form>
</div>
</div>
and this is my css:
#import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');
.flex-container{
display: flex;
display: -webkit-flex;
align-items: center;
-webkit-align-items: center;
justify-content: center;
-webkit-justify-content: center;
-webkit-flex-direction: row;
flex-direction: row;
flex-wrap: wrap;
-webkit-flex-wrap: wrap;
}
.flex-row {
display: flex;
display: -webkit-flex;
justify-content: center;
-webkit-justify-content: center;
flex: 1;
-webkit-flex: 1;
}
form{
display: flex;
display: -webkit-flex;
justify-content: center;
-webkit-justify-content: center;
flex: 1;
-webkit-flex: 1;
}
.search{
display: flex;
display: -webkit-flex;
flex: 0 1 455px;
-webkit-flex: 0 1 455px;
}
.input-container{
display: flex;
display: -webkit-flex;
flex: 1;
-webkit-flex: 1;
min-width: 0;
}
.searchbar{
flex: 1;
-webkit-flex: 1;
min-width: 0;
}
.flex-container > .flex-row:first-child{
flex: 0 1 100%;
-webkit-flex: 0 1 100%;
}
.brandname {
position: relative;
font-size: 500%;
font-family: 'Lato', sans-serif;
color: #1f0e3e;
text-align: center;
margin-bottom: 30px;
margin-top: 5%;
}
body {
margin: 10px;
}
.input-container{
/*float: left;*/
/*display: block;*/
flex: 1;
-webkit-flex: 1;
outline-style: solid;
outline-color: #e3e3e3;
outline-width: 1px;
}
.searchbar{
margin-left: 5px;
}
.search button {
background-color: rgba(152,111,165,0.38);
background-repeat:no-repeat;
border: none;
cursor:pointer;
border-radius: 0px;
/*overflow: hidden;*/
outline-width: 1px;
outline-style: solid;
outline-color: #e3e3e3;
color: white;
}
.search input{
outline-width: 0px;
outline-style: none;
border-width: 0px;
}
and it works in chrome, ie edge and in this fiddle, but not in safari.
In Safari the searchbar goes above the .brandname element and to the right of it and takes a width of 150px.
any ideas on how to make this work in safari?
One thing that is not working is the the first flex row width of 100% is not working. In safari it is making the two felx-row elements be right next to each other and both of them together are taking 100% of the width.
I changed .flex-row css rules to:
.flex-row {
display: flex;
display: -webkit-flex;
justify-content: center;
-webkit-justify-content: center;
flex: 1;
-webkit-flex: 0 1 100%;
}
and changed the flex-row first child css rules to:
.flex-container > .flex-row:first-child{
flex: 0 1 100%;
-webkit-flex: 0 1 auto;
}
and then it works.
I thought about doing this after reading that flex-wrap is buggy in safari from this SO question which suggests that setting flex-wrap in safari is buggy
Always use the non-prefixed setting last in your CSS rules. In your first rule that would be:
.flex-container{
display: -webkit-flex;
display: flex;
-webkit-align-items: center;
align-items: center;
-webkit-justify-content: center;
justify-content: center;
-webkit-flex-direction: row;
flex-direction: row;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
}
similar for all other rules.
I'm struggling to get word-wrap: break-word; to work on Nokia Lumia 930 (and probably other Windows phones). Any ideas? The text just floats over to the next tab.
It seems to be working ok in iOS and Android.
body {
background: lightblue;
}
.container {
width: 320px;
margin: 20px auto;
border: 1px solid #ebebeb;
background: white;
}
.tabs {
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
.tab {
width: 25%;
-webkit-flex: 1 1 auto;
-ms-flex: 1 1 auto;
flex: 1 1 auto;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
border-right: 1px solid #ebebeb;
}
.tab:last-child {
border-right: none;
}
.label {
display: block;
margin: auto 0;
text-align: center;
word-wrap: break-word;
}
<div class="container">
<div class="tabs">
<div class="tab">
<span class="label">xxxxxx xxx xxxxxxxxxx</span>
</div>
<div class="tab">
<span class="label">xxxxxx xx xxxxx</span>
</div>
<div class="tab">
<span class="label">xxxx xxxxxx</span>
</div>
<div class="tab">
<span class="label">xxxxxx xx</span>
</div>
</div>
</div>
Adding align-self: stretch to .label solves it.
.label{
align-self: stretch
}