I am trying to put four elements in four corners of a flex-container using Flexbox and I'm struggling. I can't figure out how to justify the content of individual flex-items. Everytime I try, it ends up putting all content of the flex-container either to the left or right (or top/bottom depending on the main axis).
HTML:
<div class="container">
<div class="top-left">
TL
</div>
<div class="top-right">
TR
</div>
<div class="bottom-left">
BL
</div>
<div class="bottom-right">
BR
</div>
</div>
Here is my CSS:
.container {
display: -webkit-flex;
background-color:#ccc;
}
.top-left {
/* ? */
}
.top-right {
}
.bottom-left {
}
.bottom-right {
}
Here is a fiddle that illustrates what I'm trying to do:
http://jsfiddle.net/JWNmZ/8/
Here is one approach for this (omitted prefixes for clarity): http://jsfiddle.net/JWNmZ/10/
.container {
display: flex;
flex-wrap: wrap;
background-color:#ccc;
}
.top-left {
flex: 50%;
}
.top-right {
flex: 50%;
text-align: right;
}
.bottom-left {
flex: 50%;
}
.bottom-right {
flex: 50%;
text-align: right;
}
#wrapper {
width: 500px;
height: 500px;
background-color: red;
display: flex;
flex-flow: wrap row;
justify-content: space-between;
}
#wrapper>div{
display:flex;
flex-flow:wrap column;
justify-content:space-between;
}
.child {
width: 50px;
height: 50px;
background: yellow;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="wrapper">
<div>
<div class='child'></div>
<div class='child'></div>
</div>
<div>
<div class='child'></div>
<div class='child'></div>
</div>
</div>
</body>
</html>
Related
In the middle (not banner or footer) section of my page, I have two elements: classed as left-container and right-container.
I want to fill the left-container with many columns of a specific width, and have them overflow to the left, such that the page loads to show their right-most element and the user must scroll left to see the others.
How is this possible with flexbox?
Here's my code:
#import url("https://fonts.googleapis.com/css2?family=Heebo:wght#600&display=swap");
body {
margin: 0;
padding: 0;
}
.page-container {
display: flex;
flex-direction: column;
height: 100vh;
background-color: teal;
align-items: stretch;
flex-direction: column;
}
.banner {
background-color: lightcyan;
position: relative;
width: 100%;
height: 80px;
}
.banner-title {
font-family: "Heebo";
font-weight: 600;
font-size: 40px;
padding: 10px;
}
.footer {
width: 100%;
background-color: thistle;
height: 30px;
}
.body-container {
background-color: lightcyan;
width: 100vw;
height: 100vh;
display: flex;
justify-content: flex-end;
}
.left-container {
background-color: greenyellow;
width: 100vw;
display: flex;
justify-content: flex-end;
flex-wrap: nowrap;
overflow: auto;
}
.right-container {
background-color: tomato;
width: 350px;
height: 100%;
}
.column-container {
background-color: red;
width: 150px;
margin: 5px;
display: flex;
flex-direction: column;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<div class="page-container">
<div class="banner">
<div class="banner-title">Title</div>
</div>
<div class="body-container">
<div class="left-container">
<div class="column-container"></div>
<div class="column-container"></div>
<div class="column-container"></div>
<div class="column-container"></div>
<div class="column-container"></div>
<div class="column-container"></div>
<div class="column-container"></div>
<div class="column-container"></div>
</div>
<div class="right-container"></div>
</div>
<div class="footer">Footer</div>
</div>
<script src="./stopwatch.js"></script>
</body>
</html>
Images of desired result:
As unusual an experience as it is likely to cause, you can use a mixture of the flex-direction and order properties to have a scrollable container start on its right-most side.
Like was mentioned in the comments, you will need a container around your columns with flex-direction: row-reverse; to start scrolling from the right. This will place your columns in the opposite order you expect, however.
If you try and use the direction: ltr; style to fix this issue, the scrollbar will again start from the left. Instead, you must set the order property of your columns in reverse. This will take some javascript or server-side templating if you want to avoid unnecessary nth-child selectors.
Here's an example.
.column {
display: flex;
flex-direction: column;
}
.row {
display: flex;
flex-direction: row;
}
#main {
flex-direction: row-reverse;
}
#left {
flex-direction: row-reverse;
overflow-x: scroll;
}
#banner { background-color: lightblue; }
#right { background-color: salmon; width: 400px; }
#left { background-color: teal; }
#footer { background-color: purple; }
<div class="column">
<div class="row" id="banner">Banner</div>
<div class="row" id="main">
<div id="right">Right Container</div>
<div class="row" id="left">
<div class="column" style="order:12">Column Container 1</div>
<div class="column" style="order:11">Column Container 2</div>
<div class="column" style="order:10">Column Container 3</div>
<div class="column" style="order:9">Column Container 4</div>
<div class="column" style="order:8">Column Container 5</div>
<div class="column" style="order:7">Column Container 6</div>
<div class="column" style="order:6">Column Container 7</div>
<div class="column" style="order:5">Column Container 8</div>
<div class="column" style="order:4">Column Container 9</div>
<div class="column" style="order:3">Column Container 10</div>
<div class="column" style="order:2">Column Container 11</div>
<div class="column" style="order:1">Column Container 12</div>
</div>
</div>
<div class="row" id="footer">Footer</div>
</div>
It is not possible to do that with CSS because CSS is made in such a unique way that you can do the things in right manner without any bugs in code .
What you are saying is a behavior opposite to what CSS made for ( which violates its basic rule ) .
Instead you can show the data which user should see first on the left and then he/she can scroll for more on the right side ( This is your best and easy shot) . It will remove other headache like which comes first and last and changing order.
Else you can use JS function to make it possible in opposite way
#import url("https://fonts.googleapis.com/css2?family=Heebo:wght#600&display=swap");
body {
margin: 0;
padding: 0;
}
.page-container {
display: flex;
flex-direction: column;
height: 100vh;
background-color: teal;
align-items: stretch;
flex-direction: column;
}
.banner {
background-color: lightcyan;
position: relative;
width: 100%;
height: 80px;
}
.banner-title {
font-family: "Heebo";
font-weight: 600;
font-size: 40px;
padding: 10px;
}
.footer {
width: 100%;
background-color: thistle;
height: 30px;
}
.body-container {
background-color: lightcyan;
width: 100vw;
height: 100vh;
display: flex;
justify-content: flex-end;
}
.left-container {
background-color: greenyellow;
width: 300px;
display: flex;
overflow: auto;
}
.right-container {
background-color: tomato;
width: 350px;
height: 100%;
}
.column-container {
background-color: red;
width: 150px;
margin: 5px;
padding: 40px;
flex-direction: row-reverse;
direction: rtl
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<div class="page-container">
<div class="banner">
<div class="banner-title">Title</div>
</div>
<div class="body-container">
<div class="left-container">
<div class="column-container"></div>
<div class="column-container"></div>
<div class="column-container"></div>
<div class="column-container"></div>
<div class="column-container"></div>
<div class="column-container"></div>
<div class="column-container"></div>
<div class="column-container"></div>
</div>
<div class="right-container"></div>
</div>
<div class="footer">Footer</div>
</div>
<script src="./stopwatch.js"></script>
</body>
</html>
Using order is the property to change the order of elements without changing position
I have an image and some text. I currently have the text and image center, however I want the contents class to be on the right hand side of the image (vertically aligned). I have tried vertical align but it does not seem too work. Could someone help me please?
where I want text to be
https://jsfiddle.net/skriker11/3t7asmhf/1/
.card{
border: solid red;
text-align: center;
}
img{
border: 1px solid red;
margin: auto;
vertical-align: middle;
}
.card > .content h3, p {
margin: 0;
}
.content {
display: flex;
flex-direction: column;
}
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Document</title>
</head>
<body>
<div class="card">
<h1>Title of widget</h1>
<div class='content'>
<img src="https://placeimg.com/640/480/tech" width='100' height=100/>
<p>Sydney</p>
<h3>26</h3>
<p><strong>Wind</strong></p> <p>NE 24km/h</p>
</div>
</div>
</body>
</html>
Here's what you could do, mind the comments with FIX:
.card{
border: solid red;
/* FIX: make the card as flexbox with direction of column */
display: flex;
flex-direction: column;
align-items: center;
}
img{
border: 1px solid red;
vertical-align: middle;
}
.card > .content h3, p {
margin: 0;
}
.content {
/* FIX#2: flexbox with direction of row */
display: flex;
align-items: center;
}
<div class="card">
<h1>Title of widget</h1>
<div class='content'>
<img src="https://placeimg.com/640/480/tech" width='100' height=100/>
<!-- FIX: wrap all texts in a div -->
<div class="description">
<p>Sydney</p>
<h3>26</h3>
<p><strong>Wind</strong></p> <p>NE 24km/h</p>
</div>
</div>
</div>
I have problem with flex-wrap. When I set it and set width of child to 100% (to take entire "line"), it dont shrink.
Look at my code:
https://codepen.io/dinoq-the-reactor/pen/OJRJoNm
HTML:
<div id="main-container">
<div id="sub-container">
<div class="flex-container">
<div id="i1" class="flex-item">Icon</div>
<div id="i2" class="flex-item">some text, flex it!</div>
<div id="i3" class="flex-item">Icon</div>
<div id="i4" class="flex-item">Text on new line</div>
</div>
<div>
</div>
CSS:
#main-container{
width: auto;
position: absolute;
z-index: 9900;
}
#sub-container{
width:100%;
}
.flex-container {
background-color:blue;
display: flex;
flex-wrap: wrap;
}
.flex-item {
border: solid 1px green;
border-collapse: collapse;
background: grey;
color: white;
font-size: 3em;
}
#i2{
flex: 1;
}
#i4{
flex: 0 0 100%;
}
What I want is to achieve something like this:
Instead I got this:
Note: I really need use "flex-wrap" and html structure which I have... It is part of bigger project, and I can edit only CSS...
Note2: My container is so expanded because width of it is width of all child elements, so it counts width of my 4. child (which is on new line). This is some source of problem, but how it solve?
Thanks!
Below is the solution for your problem.
#main-container {
width: auto;
position: absolute;
z-index: 9900;
}
#sub-container {
width: 100%;
}
.flex-container {
background-color: gray;
font-size: 0;
}
.flex-item {
border: solid 1px green;
border-collapse: collapse;
color: white;
font-size: 3em;
display: inline-block;
font-size: 3rem;
}
.flex-item:last-child {
display: block;
}
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8" />
<meta content="width=device-width, initial-scale=1.0" name="viewport" />
<link rel="stylesheet" href="./style.css" />
</head>
<body>
<div id="main-container">
<div id="sub-container">
<div class="flex-container">
<div id="i1" class="flex-item">Icon</div>
<div id="i2" class="flex-item">some text, flex it!</div>
<div id="i3" class="flex-item">Icon</div>
<div id="i4" class="flex-item">People of this world are travellers</div>
</div>
<div>
</div>
</body>
</html>
This question already has answers here:
How to disable equal height columns in Flexbox?
(4 answers)
Closed 2 years ago.
I've managed to get the #feature_container to grow to the remaining space of #header but I don't want the feature boxes to also grow (in pink), how can I stop the feature box from stretching as well? My aim is to have the 3 feature boxes sitting in the middle but I want to still be able to control the size of the feature boxes and just keep them in the middle of the remaining space.
Here is an example of what I am trying to do:
* {
box-sizing: border-box;
}
html,
body {
height: 100%;
width: 100%;
margin: 0;
}
#header {
height: 100vh;
height: 100%;
background-color: grey;
}
#fixed_div {
display: inline-block;
}
#feature_header_container {
display: flex;
height: 100%;
background-color: red;
}
#feature_container {
display: inline-flex;
flex-grow: 1;
justify-content: center;
background-color: blue;
color: white;
}
.feature_box {
display: inline-flex;
background-color: pink;
}
<div id="header">
<div id="fixed_div">
<p>Hello World!</p>
</div>
<div id="feature_header_container">
<div id="feature_container">
<div class="feature_box">
<p>Test</p>
</div>
<div class="feature_box">
<p>Test</p>
</div>
<div class="feature_box">
<p>Test</p>
</div>
</div>
</div>
</div>
#feature_container {
...
align-items: center;
...
}
.feature_box {
...
height: 50px;
...
}
Please find the answer here.
You can use the below style to #feature_header_container .And i have added the padding and margin separate the each items. If you don't want that, you can remove them.
.feature_box {
background-color: #C71585;
height: 10%;
width: 10%;
text-align: center;
padding:10px;
margin:10px;
}
code
* {
box-sizing: border-box;
}
html,
body {
height: 100%;
width: 100%;
margin: 0;
}
#header {
height: 100vh;
height: 100%;
background-color: grey;
}
#fixed_div {
display: inline-block;
}
#feature_header_container {
display: flex;
height: 100%;
align-items: center;
background-color: #006effc5;
}
#feature_container {
display: inline-flex;
flex-grow: 1;
justify-content: center;
color: white;
}
.feature_box {
background-color: #C71585;
height: 10%;
width: 10%;
text-align: center;
padding:10px;
margin:10px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<div id="header">
<div id="fixed_div">
<p>Hello World!</p>
</div>
<div id="feature_header_container">
<div id="feature_container">
<div class="feature_box">
<p>Test</p>
</div>
<div class="feature_box">
<p>Test</p>
</div>
<div class="feature_box">
<p>Test</p>
</div>
</div>
</div>
</div>
</body>
</html>
How do you auto-resize a large image so that it will fit into a smaller width flex container whilst maintaining its width:height ratio?
Also, the solution must not relate on vw / vh, so that on a page there can be more in addition to this component.
Here's how it should look like:
Here's my code:
body {
margin: 0;
}
.wrapper {
display: flex;
flex-direction: column;
height: 100vh;
}
.header {
flex: 0 0 100px;
background-color: cornflowerblue;
}
.content {
text-align: center;
}
.image {
width: 100%;
height: 100%;
}
.footer {
flex: 0 0 100px;
background-color: cornflowerblue;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Images Are Weird</title>
</head>
<body>
<div class="wrapper">
<div class="header"></div>
<div class="content">
<img class="image" src="https://villagesquare.me/wp-content/uploads/2018/07/Facebook-Square.png" alt="square placeholder" />
</div>
<div class="footer"></div>
</div>
</body>
</html>
The solutions I found here do not help
How do I auto-resize an image to fit a 'div' container? (not flex context)
Resize images to fit display:flex divs (fixed size for the image, I need dynamic size)
Just change the image class width to less than 100% like 50% 60% or 70;
body {
margin: 0;
}
.wrapper {
display: flex;
flex-direction: column;
height: 100vh;
}
.header {
flex: 0 0 100px;
background-color: cornflowerblue;
}
.content {
text-align: center;
}
.image {
width: 50%;
height: 100%;
}
.footer {
flex: 0 0 100px;
background-color: cornflowerblue;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Images Are Weird</title>
</head>
<body>
<div class="wrapper">
<div class="header"></div>
<div class="content">
<img class="image" src="https://villagesquare.me/wp-content/uploads/2018/07/Facebook-Square.png" alt="square placeholder" />
</div>
<div class="footer"></div>
</div>
</body>
</html>
You can also do it by calculating .content width and minus as much as you need.like below...
.content {
width:calc(100% - 100px);
margin:0 auto;
}
body {
margin: 0;
}
.wrapper {
display: flex;
flex-direction: column;
height: 100vh;
}
.header {
flex: 0 0 100px;
background-color: cornflowerblue;
}
.content {
width:calc(100% - 100px);
margin:0 auto;
}
.image {
width: 100%;
height: 100%;
}
.footer {
flex: 0 0 100px;
background-color: cornflowerblue;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Images Are Weird</title>
</head>
<body>
<div class="wrapper">
<div class="header"></div>
<div class="content">
<img class="image" src="https://villagesquare.me/wp-content/uploads/2018/07/Facebook-Square.png" alt="square placeholder" />
</div>
<div class="footer"></div>
</div>
</body>
</html>