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>
Related
I am facing a problem with flex-direction: column on responsive mode. When I write flex-direction: column to .container its not wrapping to responsive like flex-direction: row, it's going outside of the layout. How to fix that?
<div class="content">
<div class="container">
<div class="box">First Name Man</div>
<div class="box">First Name Man</div>
<div class="box">First Name Man</div>
<div class="box">First Name Man</div>
</div>
</div>
.content {
width: 100%;
min-height: 800px;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
flex-wrap: wrap;
background-color: whitesmoke;
}
.container {
width: 100%;
min-height: 500px;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
flex-wrap: wrap;
}
.box {
width:700px;
margin: 10px;
color:white;
min-height: 70px;
display: flex;
align-items: center;
box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
justify-content: space-around;
background-color: indigo;
flex-direction: column;
flex-wrap: wrap;
}
You have a fixed width setting for .box (700px). Change that to width: calc(100% - 20px) (i.e. full width minus 20px for the margin left and right) in a media query, then it will work as desired.
I have the following in my HTML file:
<div class="container-box">
<div class="profile-box">
<div class="image-container">
<div class="profile-picture"></div>
</div>
</div>
</div>
In my CSS file, I have the following:
.container-box {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.profile-box {
height: 350px;
width: 500px;
background-color: white;
padding: 20px;
display: flex;
flex-direction: column;
flex: 1;
}
This results in my profile-box being center-aligned, but I also want it vertically aligned. I have tried changing the flex-direction to row, but that only stretches it to take over all the horizontal space.
Here is a codepen: https://codepen.io/Humad/pen/rKLMeo
It is already centered, but your body and .container-box do not have a height set for it go in the center.
JSFiddle demo
body, html {
height: 100%; /* added */
width: 100%; /* added */
margin: 0; /* added */
}
.container-box {
height: 100%; /* added */
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
background-color: black;
}
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;
}
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 have seen a few questions like mine, but none of them seemed to be sucessfully answered. My problem might be simple, but I dont get my mistake.
I use several flexboxes in each other. When i change the browsers size it should resize the same way. But at a point the childrens are overflowing the parent flexbox - Ugly
Because I've not found my mistake, i started a new HTML doc - I still have the mistake.
The "gamebox"s children dont do as I want them to.
Here's a fiddle: Live-Demo
Thank you for your help
- RoetzerBub
html , body, main {
margin: 0;
padding: 0;
min-height: 100%;
min-width: 100%;
}
body{
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
}
header, footer{
display: flex;
min-width: 100%;
justify-content: center;
}
header{
flex-shrink: 0;
background-color: #cc0000;
color: white;
z-index: 10;
margin-bottom: 10px;
}
main{
display: flex;
justify-content: center;
align-items: center;
}
footer{
background-color: #444444;
color: white;
flex-shrink: 0;
z-index: 10;
margin-top: 10px;
}
/*as*/
.gamebox{
display: flex;
flex-direction: row;
min-width: 30%;
max-width: 45%;
border: 2px solid #b30000;
justify-content: space-between;
align-items: center;
}
.gb_left, .gb_center, .gb_right{
margin: 2%;
justify-content: space-around;
background-color: yellow;
}
.gb_left{
display: flex;
justify-content: space-between;
align-items: center;
flex-grow: 1;
}
.gb_right{
display: flex;
justify-content: space-between;
align-items: center;
flex-grow: 1;
}
.gb_center{
display: flex;
flex-direction: column;
justify-content: space-between;
}
<html>
<head>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="flexstyle.css">
</head>
<body>
<header>HEADER</header>
<main>
<div class="gamebox">
<div class="gb_left">
FLAG
TEAM-A
</div>
<div class="gb_center">
type<br/>
SCORE<br/>
date
</div>
<div class="gb_right">
TEAM-B
FLAG
</div>
</div>
</main>
<footer>FOOTER</footer>
</body>
</html>
It doesn't really make sense here to define the children as flex containers again - there are no elements in them (divs or spans), only text (i.e. nothing that could function as a flex item).
In the following fiddle I removed all this and used the following CSS settings:
.gamebox{
display: flex;
flex-direction: row;
min-width: 30%;
max-width: 45%;
border: 2px solid #b30000;
justify-content: space-between;
align-items: center;
}
.gb_left, .gb_center, .gb_right{
margin: 2%;
background-color: yellow;
min-width: 29%;
word-wrap: break-word;
}
The very last one makes sure that when a word is longer than the width of its container, it's broken.
Here is the fork of your fiddle: https://jsfiddle.net/o6wxy5z7/
To prevent elements from overflowing their containers you need to allow them to shrink as well as grow, for example:
.gb_left{
display: flex;
justify-content: space-between;
align-items: center;
flex-grow: 1;
}
can be changed to:
.gb_left{
display: flex;
justify-content: space-between;
align-items: center;
flex: 1 1 auto;
}
using the shorthand to assign flex-grow, flex-shrink, and flex-basis.
#media (max-width:400px) {
.gamebox {
flex-direction: column;
}
}
Which prevents overflow and keeping in touch with responsive design element
First off, there are four styles you are using for the flex's children that don't belong to them.
Remove these from the flex children (.gb-left, .gb-center, and .gb-right.):
display
justify-content
align-items
flex-direction
Here is a good article on what should be assigned to who: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
Now for your problem with the children not shrinking past a certain point -- the text wraps as much as it can and then when the text is as small as it can be it holds the width of the box open.
There is an easy way around this, although it will mean cutting off the text.
Just assign overflow: hidden; to the children.
.gb_left, .gb_center, .gb_right {
overflow: hidden;
margin: 2%;
background-color: yellow;
}