I'm trying to make a 2 1 2 flexbox layout as seen in my previous question; Flexbox/Float - 2 1 2 Layout.
The layout in the answer works, but it's making the children become flex as well and I'm trying to fix this.
I'd like the text to be underneath the pictures instead of next to it but can't seem to make this work.
.mustReadImage img {
width: 334px;
height: 222px;
display: block;
}/*Image*/
.mustReadN {
flex: 0 0 50%;
display: flex;
width: 334px;
}/*li*/
.mustReadN:nth-child(3) {
flex: 0 0 100%;
}/*Big li*/
.mustReadN:nth-child(3) img {
width: 670px;
height: 680px;
}/*Big Li Image*/
.mustReadGroup {
display: flex;
height: 670px;
list-style-type: none;
flex-direction: column;
flex-wrap: wrap;
margin: 0;
padding: 0;
width: 74%;
margin-left: auto;
margin-right: auto;
}/*Ul*/
The li's have children as well.
edit 1; It has to become something like this.
This fiddle from #NenadVracar had the answer!
body,
html,
ul {
margin: 0;
padding: 0;
}
* {
box-sizing: border-box;
}
ul {
display: flex;
height: 100vh;
list-style-type: none;
flex-direction: column;
flex-wrap: wrap;
}
li {
flex: 0 0 50%;
border: 1px solid black;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
li:nth-child(3) {
flex: 0 0 100%;
}
p {
margin: 0;
}
flex-direction: column; fixed it for me.
Related
how to make the footer down below and vertical?
I want it for the mobile version to make the footer down below.
I tried many solutions but it didn't work very well.
the output
as you see it become like this, I don't know if it's from the footer or the content itself?
/* mobile styles */
.footer {
height: auto;
border: 1px solid red;
}
.footer .footer-content {
height: auto;
flex-direction: column;
}
.footer .footer-content .footer-section {
height: auto;
}
/* desktop styles */
.footer {
height: 200px;
width: 100%;
}
.footer .footer-bottom {
height: 20px;
width: 100%;
text-align: center;
bottom: 0px;
left: 0px;
padding-top: 20px;
}
.footer .footer-content {
height: 180px;
display: flex;
}
.footer .footer-content .footer-section {
flex: 1;
}
Try this:
.footer {
display: flex;
flex-direction: column;
flex-wrap: wrap;
justify-content: center;
align-items: center;
}
If you are using bootstrap simply use col classes
My DIV 1 is causing overlap with the CANVAS causing not draggable and not clickable the object inside of it.
How can I "hide" the area of DIV 1?
EDIT:
Here we are some code:
.DIV1 {
align-items: flex-end;
justify-content: flex-end;
flex-direction: row;
display: flex;
}
.PARENT of DIV1 {
position: absolute;
bottom: 0;
right: 0;
width: 100%;
}
.CANVAS {
width: 100%;
height: 100%;
}
.PARENT of everything {
width: 100%;
height: 100%;
justify-content: center;
display: flex;
}
You could always use pointer-events to get the desired results.
.DIV1 {
pointer-events: none;
}
.DIV1 .child-that-need-pointer-events {
pointer-events: all;
}
This question already has answers here:
Set opacity of background image without affecting child elements
(15 answers)
How to apply a CSS filter to a background image
(22 answers)
Closed 3 years ago.
background-img is a div which wraps all of the other classes.
I have tried using the ::before method but cannot get it to work either.
If there are any other improvements I can make please let me know.
thanks in advance
.background-img {
height: 100vh;
width: 100vw;
opacity: 0.1;
-webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
filter: grayscale(100%);
background: url(./assets/breakfast.png) no-repeat center center;
background-size: cover;
}
.header-img-container {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
}
.logo1 {
height: 10vh;
width: auto;
margin: 1.5rem;
}
.logo2 {
height: 10vh;
width: auto;
margin: 1.5rem;
}
.paragraph-img-container {
display: flex;
flex-direction: column;
justify-content: center;
text-align: center;
margin: 5rem;
}
.main-paragraph {
font-size: 2rem;
}
.loading-container {
display: flex;
justify-content: center;
}
You'll need to do that by adding the background as pseudo element
.background-img {
height: 100vh;
width: 100vw;
}
.background-img:after{
content: '';
opacity: 0.5;
top: 0;
left: 0;
bottom: 0;
right: 0;
position: absolute;
z-index: -1;
background: url(https://www.drupal.org/files/user-pictures/picture-2204516-1469808304.png) no-repeat center center;
-webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
filter: grayscale(100%);
background-size: cover;
}
.header-img-container {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
}
.logo1 {
height: 10vh;
width: auto;
margin: 1.5rem;
}
.logo2 {
height: 10vh;
width: auto;
margin: 1.5rem;
}
.paragraph-img-container {
display: flex;
flex-direction: column;
justify-content: center;
text-align: center;
margin: 5rem;
}
.main-paragraph {
font-size: 2rem;
}
.loading-container {
display: flex;
justify-content: center;
}
<div class="background-img">
<div class="header-img-container">
<img src="https://www.drupal.org/files/user-pictures/picture-2204516-1469808304.png">
</div>
<div class="logo1">
<img src="https://www.drupal.org/files/user-pictures/picture-2204516-1469808304.png">
</div>
</div>
Centering a flex item is easy. However I like to shift it upwards a bit so that the the relation between the upper and lower space is e. g. 1/2. Easy too when using fillers. But is there a way to do this whithout fillers?
HTML:
<div id="filler-top"></div>
<div id="the-item">
</div>
<div id="filler-bottom"></div>
CSS:
#the-item {
width: 80vw;
height: 30vh;
border: 2px solid lightblue;
}
body {
height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
}
#filler-top {
width: 100%;
flex: 1;
}
#filler-bottom {
width: 100%;
flex: 2;
}
https://jsfiddle.net/Sempervivum/b2wotc8e/3/
Applying margin-top and margin-bottom doesn't work as a percentage is relative to the width.
instead of adding 2 elements to the markup, you can use :before and :after pseudo-elements:
#the-item {
width: 80vw;
height: 30vh;
border: 2px solid lightblue;
}
body {
height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
}
body:before {
content: "";
width: 100%;
flex: 1;
}
body:after {
content: "";
width: 100%;
flex: 2;
}
<div id="the-item"></div>
Another option is to simply use a mixture of position:relative, top and transform:
#the-item {
width: 80vw;
height: 30vh;
border: 2px solid lightblue;
position: relative;
top: 33.333%;
transform: translateY(-33.333%);
}
body {
height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
}
<div id="the-item"></div>
I have 3 divs in a container.
I want the left one (green) to be anchored (with some offset) to the left-bottom corner, the middle element (red) docked to the left element and centered vertically, and the right one (blue) to be docked to the right but centered vertically.
Here's a fiddle I'm working on.
I tried using right and margin-right etc. but it didn't work, here are some of my attempts.
This is the initial setup:
<div class="container">
<div class="left">
</div>
<div class="middle">
</div>
<div class="right">
</div>
</div>
.container {
background: gray;
height: 300px;
width: 100%;
}
.container > div {
height: 100px;
width: 100px;
}
div.left {
background: green;
height: 250px;
}
div.middle {
background: red;
}
div.right {
background: blue;
}
Result:
I've changed the fiddle based on your comments. Is this what you desire? Fiddle
*I've updated the fiddle
.container {
position: relative;
background: gray;
height: 300px;
width: 100%;
}
.container > div {
height: 100px;
width: 100px;
}
.left {
position: absolute;
left: 0;
bottom: 0;
height: 250px !important;
background: green;
}
.middle {
position: absolute;
left: 100px;
bottom: calc(50% - 50px);
background: red;
}
.right {
position: absolute;
right: 0;
bottom: calc(50% - 50px);
background: blue;
}
Fiddle
If you still want to retain the float layout (i.e. left and middle will not overlap each other), the solution is to wrap the inner content of each div with another <div> element, and position them absolutely with respect to their floated parents: http://jsfiddle.net/teddyrised/drrz6/2/
<div class="container">
<div class="left"><div></div>
</div>
<div class="middle"><div></div>
</div>
<div class="right"><div></div>
</div>
</div>
For your CSS:
.container {
background: gray;
height: 300px;
width: 100%;
}
.container > div {
height: 300px;
width: 100px;
position: relative;
}
.container > div > div {
width: 100px;
height: 100px;
position: absolute;
}
.left {
float: left;
}
.left > div {
background: green;
bottom: 0;
}
.middle {
float: left;
}
.middle > div {
background: red;
top: 50%;
margin-top: -50px; /* Half of height */
}
.right {
float: right;
}
.right > div {
background: blue;
bottom: 0;
}
Simply use flex boxes:
Demo http://jsfiddle.net/fr9U5/
HTML:
<div class="box">
<div class="left">left</div>
<div class="middle">middle</div>
<div class="right">right</div>
</div>
CSS:
.box {
width: 270px;
height:210px;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-direction: reverse;
-moz-box-direction: reverse;
-webkit-box-orient: vertical;
-moz-box-orient: vertical;
-webkit-flex-direction: column-reverse;
-ms-flex-direction: column-reverse;
flex-direction: column-reverse;
-webkit-flex-wrap: nowrap;
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
-webkit-box-pack: justify;
-moz-box-pack: justify;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-align-content: flex-start;
-ms-flex-line-pack: start;
align-content: flex-start;
-webkit-box-align: center;
-moz-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
background-color: gray;
}
.left {
-webkit-box-ordinal-group: 1;
-moz-box-ordinal-group: 1;
-webkit-order: 0;
-ms-flex-order: 0;
order: 0;
-webkit-box-flex: 0;
-moz-box-flex: 0;
-webkit-flex: 0 1 auto;
-ms-flex: 0 1 auto;
flex: 0 1 auto;
-webkit-align-self: flex-start;
-ms-flex-item-align: start;
align-self: flex-start;
background-color: green;
}
.middle {
-webkit-box-ordinal-group: 1;
-moz-box-ordinal-group: 1;
-webkit-order: 0;
-ms-flex-order: 0;
order: 0;
-webkit-box-flex: 0;
-moz-box-flex: 0;
-webkit-flex: 0 1 auto;
-ms-flex: 0 1 auto;
flex: 0 1 auto;
-webkit-align-self: center;
-ms-flex-item-align: center;
align-self: center;
background-color: red;
}
.right {
-webkit-box-ordinal-group: 1;
-moz-box-ordinal-group: 1;
-webkit-order: 0;
-ms-flex-order: 0;
order: 0;
-webkit-box-flex: 0;
-moz-box-flex: 0;
-webkit-flex: 0 1 auto;
-ms-flex: 0 1 auto;
flex: 0 1 auto;
-webkit-align-self: flex-end;
-ms-flex-item-align: end;
align-self: flex-end;
background-color: blue;
}
/*
Legacy Firefox implementation treats all flex containers
as inline-block elements.
*/
#-moz-document url-prefix() {
.flex-container {
width: 100%;
-moz-box-sizing: border-box;
}
}
.box > div {
border:1px solid #000;
width: 33%;
height:33%;
}
OK. I guess the position:absolute is what works best for me, although I'd prefer the middle (red) element to depend on the left (green) one.
Here is the solution, and thanks Terry for the tip on deducting half-size of self to center vertically.
.container {
background: gray;
height: 300px;
width: 100%;
position: relative;
}
.container > div {
height: 100px;
width: 100px;
position: absolute;
}
div.left {
background: green;
left: 0;
bottom: 0;
height: 250px;
}
div.middle {
background: red;
left: 100px;
bottom: 0;
top: 50%;
margin-top: -50px; //deduct lalfsize of self
}
div.right {
background: blue;
right: 0;
top: 50%;
margin-top: -50px; //deduct lalfsize of self
}