I need boxes to show side by side for the same full width of 100% for each box inside my container and across all device dimensions.
Now the following works, it shows what I am after, however this solution does not work on the actual physical devices such as tablets and smartphones, I dont know why, but is it possible to change my code so that the effect actually shows how designed on the physical devices (and not just in my browser and resizing the browser to see the effect)?
.box2 {
margin: 5px 5px 5px 0;
text-align: center;
float: left;
background-color: #FFF;
color: #000;
border: 2px solid #A10000;
height: auto;
width: calc((100% / 2) - 5px);
box-sizing: border-box;
font-size: 12px;
}
.row {
margin-right: -15px;
margin-left: -15px;
}
.container {
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
#media screen and (min-width: 768px) {
.box2 {
width: calc((100% / 3) - 5px);
}
}
#media screen and (min-width: 992px) {
.box2 {
width: calc((100% / 6) - 5px);
}
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
<h1>1</h1>
<h1>2</h1>
<h1>3</h1>
<h1>4</h1>
<h1>5</h1>
<h1>6</h1>
</div>
</div>
</div>
Set the display of the div child of the .row, which is the third div, to flex, like this:
.container > .row > div {
display: flex;
}
Heres one way you can do that using flex boxes instead, which will create a platform independent rendering that you can be sure will work everywhere:
CSS Code for FlexBox setup
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<center>
<div id="flexcanvas">
<div id="container" class="flexChild rowParent">
<div class="flexChild" id="box1">
<h1>Box #1</h1>
</div>
<div class="flexChild" id="box2">
<h1>Box #2</h1>
</div>
<div class="flexChild" id="box3">
<h1>Box #3</h1>
</div>
<div class="flexChild" id="box4">
<h1>Box #4</h1>
</div>
<div class="flexChild" id="box5">
<h1>Box #5</h1>
</div>
<div class="flexChild" id="box6">
<h1>Box #6</h1>
</div>
</div>
</div>
</center>
<style>
#flexcanvas {
width: 100%;
height: 600px !important;
}
.rowParent,
.columnParent {
display: flex;
/* wrapping flex boxes causes platform independent arrangement*/
flex-wrap: wrap;
justify-content: flex-start;
align-content: stretch;
align-items: stretch;
flex-direction: row;
/* webkit-based browser support */
display: -webkit-flex;
display: -webkit-box;
-webkit-box-direction: normal;
-webkit-box-orient: horizontal;
-webkit-flex-direction: row;
-webkit-flex-wrap: wrap;
-webkit-box-pack: start;
-webkit-justify-content: flex-start;
-webkit-align-content: stretch;
-webkit-box-align: stretch;
-webkit-align-items: stretch;
/* MS-based browser support */
display: -ms-flexbox;
-ms-flex-direction: row;
-ms-flex-wrap: wrap;
-ms-flex-pack: start;
-ms-flex-align: stretch;
-ms-flex-line-pack: stretch;
}
.columnParent {
flex-direction: column;
/* webkit-based browser support */
-webkit-box-orient: vertical;
-webkit-flex-direction: column;
/* MS-based browser support */
-ms-flex-direction: column;
}
.flexChild {
flex: 1;
align-self: auto;
padding: 20px;
border: 1px black solid;
-webkit-box-flex: 1;
-webkit-flex: 1;
-webkit-align-self: auto;
-ms-flex: 1;
-ms-flex-item-align: auto;
}
</style>
</body>
</html>
The above snippet basically creates flexible boxes that can warp and change to accomodate any device no matter how large or small, and is probably the best way to go.
In terms of viewing pages as they would appear on devices, try the "responsive design view" option in the developer tools of most modern browsers.
enjoy.
Related
How to reduce the width of the flexbox container with the wrap option so it takes only the width taken by its items ?
The objective is not to see any green at the right of the yellow boxes (except for the margin set on the box item)
NOTE: The flexbox with wrap can accept more than 2 items per row, in function of the window's size.
main {
display: flex;
flex-direction: column;
align-items: flex-start;
width: 900px; /* This width changes with the window's size */
background-color: red;
}
.list {
display: flex;
flex-wrap: wrap;
background-color: green;
justify-content: flex-start;
}
.list .box {
width: 300px; /* This will never change */
height: 300px;
margin: 0 32px 32px 0;
display: flex;
align-items: center;
justify-content: center;
background-color: yellow;
}
<main>
<h1>Titre ici</h1>
<div class="list">
<div class="box">box</div>
<div class="box">box</div>
<div class="box">box</div>
<div class="box">box</div>
</div>
</main>
Link to Codepen
I want to show you an alternative with css-grid and using the attribute minmax. I believe that will be closer to that what you want.
It will give every box a width of at least 300px and will fit as many boxes as possible. If space is left, then box size will improve to fit the space unless another box would fit.
To do that we have to add: grid-template-columns: repeat(auto-fit, minmax(300px, 1fr) );
That css line will add the columns amount. repeat means, that the the adding of a column is repeated according to the following rules:
auto-fit: It has to fit the screen width without leaving an empty space. it will resize the 1fr to make it possible.
minmax(300px, 1fr) means that every fraction needs to be at least 300px. If the screen is larger, then the first rule will apply again and the 1fr will be resized accordingly.
body {
margin: 0;
padding: 0;
width: 900px;
}
h1 {
background-color: red;
height: auto;
margin: 0;
}
.list {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr) );
grid-auto-rows: auto;
grid-gap: 32px;
background-color: green;
}
.box {
min-height: 300px;
background-color: yellow;
}
<main>
<h1>Titre ici</h1>
<div class="list">
<div class="box">box</div>
<div class="box">box</div>
<div class="box">box</div>
<div class="box">box</div>
</div>
</main>
The answers given are correct,
You can try this as a different alternative.
* {
box-sizing: border-box;
}
main {
display: flex;
flex-direction: column;
align-items: flex-start;
width: 900px;
/* emulate high width */
background-color: red;
}
.list {
background-color: green;
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
}
.list .box-wrapper {
width: 300px;
height: 300px;
display: flex;
}
.list .box {
width: 100%;
margin: 0 16px 16px 0;
display: flex;
align-items: center;
justify-content: center;
background-color: yellow;
}
<main>
<h1>Titre ici</h1>
<div class="list">
<div class="box-wrapper">
<div class="box">
box
</div>
</div>
<div class="box-wrapper">
<div class="box">
box
</div>
</div>
<div class="box-wrapper">
<div class="box">
box
</div>
</div>
<div class="box-wrapper">
<div class="box">
box
</div>
</div>
</div>
</main>
I just commented out the margin on the .box and .list and replace flex-start with space-between on justify-content property and thereafter just added two smaller lines to format it well which are column-gap and row-gap to enerlarge the space between them
Example
main {
display: flex;
flex-direction: column;
align-items: flex-start;
width: 900px;
/* emulate high width */
background-color: red;
}
.list {
display: flex;
flex-wrap: wrap;
background-color: green;
justify-content: space-between;
column-gap: 1px;
row-gap: 25px;
}
.list .box {
width: 300px;
height: 300px;
/*margin: 0 150px 32px 0;*/
display: flex;
align-items: center;
justify-content: center;
background-color: yellow;
}
<main>
<h1>Titre ici</h1>
<div class="list">
<div class="box">box</div>
<div class="box">box</div>
<div class="box">box</div>
<div class="box">box</div>
</div>
</main>
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 using amchart and I want to display multiple charts in one page (as columns), my problem is that I don't want scroll bar no matter how many charts I add (yes I want them to squish) also when I display only one chart I want it in it's normal size (not squished or small)
How can I achieve that?
I'm trying now with images and if it works I will do it on my charts.
html:
<div class="content">
<div class="row">
<div class="cell">
<img src="http://i.imgur.com/OUla6mK.jpg"/>
</div>
<div class="cell">
<img src="http://i.imgur.com/M16WzMd.jpg"/>
</div>
<div class="cell">
<img src="http://i.imgur.com/M16WzMd.jpg"/>
</div>
<div class="cell">
<img src="http://i.imgur.com/M16WzMd.jpg"/>
</div>
</div>
</div>
</div>
css:
body{ overflow-y : hidden;}
.content {
background-color: yellow;
}
.row {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-orient: vertical;
-moz-box-orient: vertical;
box-orient: vertical;
flex-direction: column;
-webkit-box-pack: center;
-moz-box-pack: center;
box-pack: center;
justify-content: center;
-webkit-box-align: center;
-moz-box-align: center;
box-align: center;
align-items: center;
background-color: red;
}
.cell {
-webkit-box-flex: 1;
-moz-box-flex: 1;
box-flex: 1;
-webkit-flex: 1 1 auto;
flex: 1 1 auto;
padding: 10px;
margin: 10px;
background-color: green;
border: 1px solid red;
text-align: center;
}
img {max-height:100%;}
on jsfiddle: http://jsfiddle.net/89dtxt6s/356/
Thanks!
Step 1: Add the following to .row to ensure it fills the viewport height:
.row {
height: 100vh;
}
Step 2: You need to give each .cell a flex display. Additionally, you'll need to adjust your flex-basis (third argument to the shorthand) to 100%. Finally, you'll need to set min-height to zero, in order for each element to totally shrink, if need be.
.cell {
display: flex;
flex-direction: column;
flex: 1 1 100%; /* no longer auto */
min-height: 0;
}
Step 3: Add a one-hundred percent width and height to the image.
img {
width: 100%;
height: 100%;
}
Result: squishy images. Ugly? Sure. But I'm not judging.
https://jsfiddle.net/jaunkv7k/
I am having an issue where I am trying to use flex to show divs left, center, and right. Although I run into an issue where the center column isn't in-line with the div above it. When I change the flex to flex: 1, it does put each column in line but leaves an empty space to the right of my furthest right div. Can someone offer some advice or tips on how to correct this? I have seen similar questions about flex, but nothing the specifically addressed this concern. I have provided some of the code I am using currently. Thank you in advance!
.container {
display: flex;
width: 100%;
justify-content: space-between;
}
.item {
flex: 1;
}
<body>
<div class="container">
<div class="item">Hello World</div>
<div class="item">It is me</div>
<div class="item">BYE</div>
</div>
<div class="container">
<div class="item">Hello World, again!</div>
<div class="item">It is me, again?</div>
<div class="item">BYE</div>
</div>
</body>
You need to swap
justify-content: space-between;
for
justify-content: space-around;
Working Example:
.container {
display: flex;
justify-content: space-around;
}
.item {
flex: 1 1 33%;
margin: 6px;
padding: 6px;
color: rgb(255,255,255);
background-color: rgb(255,0,0);
font-weight: bold;
}
<div class="container">
<div class="item">Hello World</div>
<div class="item">It is me</div>
<div class="item">BYE</div>
</div>
<div class="container">
<div class="item">Hello World, again!</div>
<div class="item">It is me, again?</div>
<div class="item">BYE</div>
</div>
Please check the code. There is no empty space on right. padding: 10px for body and .container have margin-bottom: 30px; also .item have margin-bottom: 10px;. I think you need to learn more about the flex box.
body
{
margin: 0;
padding: 10px;
background-color: #898989;
}
.container
{
display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -ms-flexbox;
display: flex;
margin-bottom: 30px;
border: 2px solid #000;
-webkit-box-align: center;
-webkit-align-items: center;
-moz-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-flex: 0;
-webkit-flex: 0 0 100%;
-moz-box-flex: 0;
-ms-flex: 0 0 100%;
flex: 0 0 100%;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: start;
-webkit-justify-content: flex-start;
-moz-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
}
.container .item
{
display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -ms-flexbox;
display: flex;
margin-bottom: 10px;
border: 5px solid #f0f;
-webkit-box-align: center;
-webkit-align-items: center;
-moz-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-flex: 1;
-webkit-flex-grow: 1;
-moz-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1;
-webkit-box-pack: center;
-webkit-justify-content: center;
-moz-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
<body>
<div class="container">
<div class="item">Hello World</div>
<div class="item">It is me</div>
<div class="item">BYE</div>
</div>
<div class="container">
<div class="item">Hello World, again!</div>
<div class="item">It is me, again?</div>
<div class="item">BYE</div>
</div>
</body>
If I understood the question correctly:
.item {
flex: 1;
text-align: center;
}
If you instead mean centering the entire div, use:
.container {
margin: 0 auto;
}
I hope your code is working correctly, just applied background and observed there is no space after the right most div
Refer this bootply http://www.bootply.com/T0TTJD1kTO
Instead of flex:1 you can use opacity:0.99 on child items, it will solve your Issue.
Here is an link to fiddle:
.item {
opacity: 0.99;
}
It's because all the child has same name, it's creating some problem.
Other Way to solve this is simply remove flex:1 or remove .item in css, it will automatically resolve it.
Here is working example of that in my Fiddle, you can check it.
https://jsfiddle.net/ABhimsaria/z7a4b7jo/
It's important to remember the initial settings of a flex container.
Some of these settings include:
flex-direction: row - flex items will align horizontally.
justify-content: flex-start - flex items will stack at the start of the line on the main axis.
align-items: stretch - flex items will expand to cover the cross-size of the container.
flex-wrap: nowrap - flex items are forced to stay in a single line.
flex-shrink: 1 - a flex item is allowed to shrink
Note the last setting.
Because flex items are allowed to shrink by default (which prevents them from overflowing the container), the specified flex-basis / width / height may be overridden.
For example, flex-basis: 100px or width: 100px, coupled with flex-shrink: 1, will not necessarily be 100px.
To render the specified width – and keep it fixed – you will need to disable shrinking:
div {
width: 100px;
flex-shrink: 0;
}
OR
div {
flex-basis: 100px;
flex-shrink: 0;
}
OR, as recommended by the spec:
flex: 0 0 100px; /* don't grow, don't shrink, stay fixed at 100px */
Some Cool Useful Links to know in-depth about flex and to play with them are:
http://flexboxfroggy.com/
https://scotch.io/tutorials/a-visual-guide-to-css3-flexbox-properties
Center and bottom-align flex items
https://philipwalton.com/articles/what-no-one-told-you-about-z-index/
I'm trying to achieve the following result using flexbox:
I tried the with the following html but I can't get it to work.
<div class=" flex-center">
<div class="flex-item-center">
<p>
Some text in box A
</p>
</div>
<div class="flex-item-bottom">
<p>Some text in box B....</p>
</div>
</div>
CSS:
.flex-center {
display: flex;
align-items: center;
align-content: center;
justify-content: center;
}
.flex-item-center {
align-self: center;
}
.flex-item-bottom {
align-self: flex-end;
}
How can I make it look like the image?
I've made a posible solution.
.flex-center {
background-color: #739FD0;
color: #000000;
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
align-content: center;
align-items: center;
height: 400px;
}
.flex-center-bottom {
background-color: #739FD0;
color: #000000;
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: flex-end;
align-content: center;
align-items: center;
}
.flex-item-center {
border: solid 2px #4675AA;
order: 0;
flex: 0 1 auto;
align-self: center;
}
.flex-item-bottom {
border: solid 2px #4675AA;
order: 1;
flex: 0 1 auto;
align-self: flex-end;
}
<div class="flex-center">
<div class="flex-item-center">
<p>DROP FILES HERE</p>
</div>
</div>
<div class="flex-center-bottom">
<div class="flex-item-center">
<p>Hint: You can also drop files in the all files page</p>
</div>
</div>
Update 2017: Tested in Google Chrome Versión 62.0.3202.89 (Build oficial) (32 bits).
.flex-center,
.flex-center-bottom {
align-items: center;
background-color: #739FD0;
color: #000000;
display: flex;
}
.flex-center {
height: 400px;
justify-content: center;
}
.flex-center-bottom {
justify-content: flex-end;
}
.flex-item-center {
border: solid 2px #4675AA;
font-family: Arial, sans-serif;
font-size: 1.6em;
line-height: 1px;
padding: 0 3px;
}
<div class="flex-center">
<div class="flex-item-center">
<p>Some text in box A</p>
</div>
</div>
<div class="flex-center-bottom">
<div class="flex-item-center">
<p>Some text in box B...</p>
</div>
</div>
I hope this helps you.
Is this what you are looking for? http://jsfiddle.net/DIRTY_SMITH/q12bh4se/6/
body {
background-color: lightblue;
}
#main {
width: 100%;
height: 400px;
border: 1px solid black;
display: -webkit-flex;
/* Safari */
-webkit-align-items: flex-start;
/* Safari 7.0+ */
display: flex;
align-items: flex-start;
}
#main div {
-webkit-flex: 1;
/* Safari 6.1+ */
flex: 1;
}
.flex-item-center {
margin-left: 40%;
border-style: solid;
-webkit-align-self: center;
/* Safari 7.0+ */
align-self: center;
}
.flex-item-bottom {
border-style: solid;
align-self: flex-end;
}
Try:
#main-wrapper {
background: blue;
width: 100%;
height: 100%;
min-height: 300px;
display: flex;
align-items: center;
}
.x-center {
display: flex;
justify-content: center;
}
.y-center {
flex: 1;
}
.x-right {
justify-content: flex-end;
}
.y-bottom {
align-self: flex-end;
}
.small-div {
padding: 10px;
}
<div id="main-wrapper">
<div class="x-center y-center small-div">Center center</div>
<div class="x-right y-bottom small-div">Bottom Right</div>
</div>
Notes:
The align-self won't work for IE10 or below.
Anybody know how to make the center div a bit more to the left without position relativing it? Thanks
In Bootstrap 4.x you can use the utility classes
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class="col-12">
<div class="d-flex justify-content-center h-100">
<div class="d-flex align-items-center">center center</div>
</div>
<div class="d-flex justify-content-end h-100">
<div class="d-flex align-items-end">right bottom</div>
</div>
</div>
</div>
</div>
EDIT
Since I received a couple downvotes I believe a review is in order.
To me the above answer is still valid, however I understand it's not clear it requires some height.
How this height is achieved doesn't really matter. Either you set it fixed in CSS on a wrapper or for the code snippet's sake we set the document's height to make it responsive.
If the "center content" takes up the space in height, the "bottom content" can be positioned absolute, so it doesn't add height. All what's left is to make sure it covers the full width and positions from the bottom.
html, body { height: 100%; } /* can be anything that generates height */
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="d-flex justify-content-center h-100">
<div class="d-flex align-items-center">center center</div>
</div>
<div class="d-flex justify-content-end position-absolute w-100 fixed-bottom">
<div class="d-flex align-items-end">right bottom</div>
</div>
So functionality wise, there's no additional CSS required in Bootstrap.
Documentation justify content
Documentation position