How I can achieve vertical alignment if one of my image has less height then other. Also rearrange content for < 768px devices.
Codeply
.order-flex {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
}
.order-wrapper {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
min-height: 250px;
}
.order-image {
padding-bottom: 50px;
}
#media (max-width: 768px) {
.order-wrapper {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
min-height: 80px;
min-width: 450px;
}
.order-flex {
flex-direction: column;
}
}
This is the top part of the layout. I think you can figure out the bottom part yourself now.
.order-flex {
display: flex;
}
.order-wrapper {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: flex-end;
min-height: 200px;
max-width: 120px;
}
.order-image {
padding-bottom: 50px;
}
.txt {
text-transform: uppercase;
}
<div class="order-flex">
<div class="order-wrapper">
<img src="http://placehold.it/100x50" />
<div class="txt">text</div>
</div>
<div class="order-wrapper">
<img src="http://placehold.it/100" />
<div class="txt">text</div>
</div>
<div class="order-wrapper">
<img src="http://placehold.it/100" />
<div class="txt">text</div>
</div>
</div>
Related
I have made the .main_area a flexbox and it has two elements in it but flex-wrap is not working.
I want that if i open it on 820px screen then it shouldautomaticaly wrap is there a solution to this
.main_area {
display: flex;
flex-wrap: wrap;
/* background-color: burlywood; */
height: 80vh;
width: 100%;
}
.picture_area {
display: flex;
align-items:baseline;
justify-content: flex-end;
/* background-color: red; */
height: 80vh;
width: 50%;
}
.picture_area img {
height: 100%;
/* width: 100%; */
float: right;
filter: grayscale(1);
}
.content_area {
/* background-color: blue; */
height: 80vh;
width: 30%;
flex-direction: column;
align-items: center;
justify-content:center;
}```
the html code is
``` <div class="main_area">
<div class="picture_area" id="picture_area">
<img src="./Cartoons_Bugs_Tunes_Looney_Bunny_Bugs_bunny_HD_Wallpapers-removebg.png" alt="">
</div>
<div class="content_area d-flex" id="content_area">
<h1 class="UI_pattern">UI Problem</h1>
<h1 class="UI_pattern">solver</h1>
<p class="UI_para">And this is why my competitors</p>
<p class="UI_para">Simply call me 'Revolver'</p>
<input type="text" class="Busi_email" placeholder="Type your business email">
<button class="UI_button">Get in touch</button>
</div>
</div>
Might have you forgotten to add the selector before your CSS statement?
.main-area{
display: flex;
flex-wrap: wrap;
/* background-color: burlywood; */
height: 80vh;
width: 100%;
}
This should work nicely for you:
.main_area {
display: flex;
flex-wrap: wrap;
/* background-color: burlywood; */
height: 80vh;
width: 100%;
}
.picture_area {
display: flex;
align-items: baseline;
justify-content: flex-end;
/* background-color: red; */
height: 80vh;
width: 50%;
}
.picture_area img {
height: 100%;
/* width: 100%; */
float: right;
filter: grayscale(1);
}
.content_area {
/* background-color: blue; */
height: 80vh;
width: 30%;
flex-direction: column;
align-items: center;
justify-content: center;
}
img {
max-width: 100%;
}
#media only screen and (max-width: 820px) {
.main_area {
display: flex;
flex-wrap: wrap;
flex-flow: column;
align-items: center;
justify-content: center;
}
}
<div class="main_area">
<div class="picture_area" id="picture_area">
<img src="https://dummyimage.com/600x400/000/fff" alt="">
</div>
<div class="content_area d-flex" id="content_area">
<h1 class="UI_pattern">UI Problem</h1>
<h1 class="UI_pattern">solver</h1>
<p class="UI_para">And this is why my competitors</p>
<p class="UI_para">Simply call me 'Revolver'</p>
<input type="text" class="Busi_email" placeholder="Type your business email">
<button class="UI_button">Get in touch</button>
</div>
</div>
By design flex is (initially) a single lane of content and wasn't made specifically for grids.
I currently use flex-wrap: wrap; but it's not really made for making grids -- even though it's probably the first option you try to make one.
Moreover I think it's not the only way to create grid-like layouts.
So is this the most accurate (proper) way? of creating a grid in flex?
Or are there better alternatives?
Edit (after 2 answers were posted): just to clarify, I'm not looking for display: grid; I'm asking what is the most proper/accurate way of doing it in flex. (See css flex grid)
(Of course display: grid is a proper way for making grids with CSS grid. That is not what the question is asking.)
My advise is to go with display: grid.
To get started you have to define a container element as a grid with
display: grid, set the column and row sizes with grid-template-columns
and grid-template-rows, and then place its child elements into the
grid with grid-column and grid-row.
This is an useful post about https://css-tricks.com/snippets/css/complete-guide-grid/
And this is a complete example:
The style:
.grid-container {
display: grid;
grid-template-columns: auto auto auto;
background-color: red;
padding: 1px;
}
.grid-item {
background-color: rgba(255, 255, 255, 0.8);
border: 1px solid #000;
padding: 20px;
font-size: 30px;
text-align: center;
}
and the layout:
<div class="grid-container">
<div class="grid-item">1</div>
<div class="grid-item">2</div>
<div class="grid-item">3</div>
</div>
so i came up with this its not perfect but you could tweak it to make it what you want i think...https://codepen.io/colinthedev/pen/ExKwVVZ
document.getElementsByTagName("h1")[0].style.fontSize = "6vw";
body {
font-family: system-ui;
background: #f06d06;
color: white;
text-align: center;
display: flex;
flex-direction: column;
margin: 0;
padding: 0;
}
.mainWrapper {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
align-items: flex-start;
}
.flexWrapOne {
display: flex;
flex-direction: row;
width: inherit;
margin: 0 .5rem 0 1rem;
justify-content: center;
align-items: center;
}
.item1 {
display: flex;
order: 1;
flex-wrap: wrap;
justify-content: center;
align-items: center;
height: 15rem;
width: 20rem;
margin: .5rem;
background: #000;
}
.item2 {
display: flex;
order: 2;
flex-wrap: wrap;
justify-content: center;
align-items: center;
height: 10rem;
width: 10rem;
margin: .5rem;
background: #0D89F2;
}
.item3 {
display: flex;
order: 3;
flex-wrap: wrap;
justify-content: center;
align-items: center;
height: 15rem;
width: 33rem;
margin: .5rem;
background: #89F20D;
}
.flexWrapTwo {
display: flex;
flex-direction: column;
}
.item4 {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
height: 10rem;
width: 20rem;
margin: .5rem;
background: #000;
}
.item6 {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
height: 10rem;
width: 10rem;
margin: .5rem;
background: #0D89F2;
}
#media screen and (max-width: 1430px) {
.flexWrapTwo {
flex-direction: row;
}
.item4 {
order: 2;
}
.item6 {
order: 1;
}
}
#media screen and (max-width: 1250px) {
.mainWrapper {
display: flex;
flex-direction: column;
justify-content: center;
}
.flexWrapOne {
flex-direction: column;
width: inherit;
}
}
<h1>👋 Hello World!</h1>
<div class="flexWrapOne">
<h1 class="item1"> ITEM-1 </h1>
<h1 class="item2"> ITEM-2 </h1>
<h1 class="item3"> ITEM-3 </h1>
</div>
<div class="mainWrapper">
<div class="flexWrapOne">
<h1 class="item1"> ITEM-4 </h1>
<h1 class="item2"> ITEM-5 </h1>
<h1 class="item3"> ITEM-6 </h1>
</div>
<div class="flexWrapTwo">
<h1 class="item4"> ITEM-7 </h1>
<h1 class="item6"> ITEM-8 </h1>
</div>
</div>
<!-- Same as above just copy pasted -->
<div class="flexWrapOne">
<h1 class="item1"> ITEM-1 </h1>
<h1 class="item2"> ITEM-2 </h1>
<h1 class="item3"> ITEM-3 </h1>
</div>
<div class="mainWrapper">
<div class="flexWrapOne">
<h1 class="item1"> ITEM-4 </h1>
<h1 class="item2"> ITEM-5 </h1>
<h1 class="item3"> ITEM-6 </h1>
</div>
<div class="flexWrapTwo">
<h1 class="item4"> ITEM-7 </h1>
<h1 class="item6"> ITEM-8 </h1>
</div>
</div>
Align in the center when the div is displayed flexbox doesn't work in IE11. It is ok in Chrome/Firefox;
.wrapper {
align-items: center;
-ms-flex-align: center;
-ms-flexbox; display
display: flex;
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
width: 100%;
height: 8.125rem;
border: 1px solid blue;
}
.header {
align-items: flex-start;
-ms-flex-align: start;
-ms-flexbox; display
display: flex;
margin: 0.5rem auto 0 auto;
border: 1px solid red;
}
.container {
flex-grow: 1;
flex-direction: row;
-ms-flex-align: center;
-ms-flex-direction: row;
max-width: 38.25rem;
}
.bimage {
margin: 0 1.5rem 0 0;
}
.nav {
-ms-flexbox; display
display: flex;
flex-flow: column nowrap;
-ms-flex-flow: column nowrap;
flex-grow: 1;
-ms-flex-positive: 1;
}
.navbar {
align-items: flex-start;
-ms-flex-align: start;
color: #fff;
display: flex;
justify-content: space-between;
-ms-flex-pack: justify;
text-transform: uppercase;
}
.navbar items > * {
color: inherit;
margin-right: 0.5rem;
}
.navbar items> *:last-child {
margin-right: 0;
}
.search {
-ms-flexbox; display
display: flex;
align-items: flex-start;
-ms-flex-align: start;
margin: 1.5rem 0 1.5rem 0;
}
<div class="wrapper">
<div class="header container">
<div class="bimage">
<img src="https://via.placeholder.com/50">
</div>
<div class="nav">
<div class="navbar">
<div class="items">
Alpha
Beta
Gama
Teta
</div>
<div class="items">
Right Alpha
Right Beta
</div>
</div>
<div class="search">
<form>
<input class="searchinput" placeholder="Search" name="q" >
<button type="submit" value="Search">
</form>
</div>
</div>
</div>
I made some changes in CSS file. Please check the answer,
.wrapper {
align-items: center;
text-align: center;
-ms-flex: display;
display: flex;
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
width: 100%;
height: 8.125rem;
border: 1px solid blue;
}
.header {
align-items: flex-start;
text-align: start;
-ms-flex: display;
display: flex;
margin: 0.5rem auto 0 auto;
border: 1px solid red;
}
.container {
flex-grow: 1;
flex-direction: row;
text-align: center;
-ms-flex-direction: row;
max-width: 38.25rem;
}
.bimage {
margin: 0 1.5rem 0 0;
}
.nav {
-ms-flex: display;
display: flex;
flex-flow: column nowrap;
-ms-flex-flow: column nowrap;
flex-grow: 1;
}
.navbar {
align-items: flex-start;
text-align: start;
color: #fff;
display: flex;
justify-content: space-between;
text-transform: uppercase;
}
.navbar items>* {
color: inherit;
margin-right: 0.5rem;
}
.navbar items>*:last-child {
margin-right: 0;
}
.search {
-ms-flex: display;
display: flex;
align-items: flex-start;
text-align: start;
margin: 1.5rem 0 1.5rem 0;
}
<div class="wrapper">
<div class="header container">
<div class="bimage">
<img src="https://via.placeholder.com/50">
</div>
<div class="nav">
<div class="navbar">
<div class="items">
Alpha
Beta
Gama
Teta
</div>
<div class="items">
Right Alpha
Right Beta
</div>
</div>
<div class="search">
<form>
<input class="searchinput" placeholder="Search" name="q">
<button type="submit" value="Search">
</form>
</div>
</div>
</div>
I have a flexbox parent setted with flex-direction: row.
Inside this parent, I have two children. I would like them to have the same height!
Inside this children I have dynamic content (with variable height).
The way I'm doing, if I add text on the right child, the left one will grow.
But If the left child grows, the right one stays small.
Should not they behave in the same way?
Here is a fiddle: https://jsfiddle.net/4g6uevok/8/
HTML:
<div id="main">
<div class="left">
<div class="title">MY TITLE:</div>
<div class="left-area">
<div class="left-area-row">
<div class="left-area-row-titulo">#1</div>
<div class="left-area-row-info">A</div>
</div>
<div class="left-area-row">
<div class="left-area-row-titulo">#2</div>
<div class="left-area-row-info">B</div>
</div>
<div class="left-area-row">
<div class="left-area-row-titulo">#3</div>
<div class="left-area-row-info">AC</div>
</div>
</div>
</div>
<div class="right">
<div class="title">SECOND TITLE:</div>
</div>
</div>
CSS:
#main {
width: 100%;
height:auto;
margin-top: 30px;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: stretch;
background-color: red;
}
.left{
width: 400px;
display: flex;
flex-direction: column;
background:lime;
align-items: stretch;
}
.title {
width: 100%;
font-size: 1.5em;
color:#525252;
display: flex;
justify-content: center;
margin-bottom: 20px;
font-weight: bold;
font-family: "emir-bold";
}
.left-area {
width: 100%;
display: flex;
flex-direction: column;
}
.left-area-row {
width: 100%;
display: flex;
flex-direction: row;
justify-content: space-between;
}
.left-area-row-titulo {
width: 49.5%;
display: flex;
align-items: center;
justify-content: flex-start;
background-color: #819196;
color: white;
padding: 6px;
margin:0 2px 4px 0;
}
.left-area-row-info {
width: 49.5%;
display: flex;
align-items: center;
justify-content: center;
background: #CCCCCC;
padding: 6px;
margin:0 0 4px 2px;
}
.right {
width: calc(100% - 430px);
height: 100%;
display: flex;
flex-direction: column;
background:orange;
align-items: stretch;
}
Flex items are aligned to strech by default. Your height:100% value in .right class preventing it to take whole height so try to remove height:100% to the .right element
#main {
width: 100%;
height: auto;
margin-top: 30px;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: stretch;
background-color: red;
}
.left {
width: 400px;
display: flex;
flex-direction: column;
background: lime;
align-items: stretch;
}
.title {
width: 100%;
font-size: 1.5em;
color: #525252;
display: flex;
justify-content: center;
margin-bottom: 20px;
font-weight: bold;
font-family: "emir-bold";
}
.left-area {
width: 100%;
display: flex;
flex-direction: column;
}
.left-area-row {
width: 100%;
display: flex;
flex-direction: row;
justify-content: space-between;
}
.left-area-row-titulo {
width: 49.5%;
display: flex;
align-items: center;
justify-content: flex-start;
background-color: #819196;
color: white;
padding: 6px;
margin: 0 2px 4px 0;
}
.left-area-row-info {
width: 49.5%;
display: flex;
align-items: center;
justify-content: center;
background: #CCCCCC;
padding: 6px;
margin: 0 0 4px 2px;
}
.right {
width: calc(100% - 430px);
display: flex;
flex-direction: column;
background: orange;
align-items: stretch;
}
<div id="main">
<div class="left">
<div class="title">MY TITLE:</div>
<div class="left-area">
<div class="left-area-row">
<div class="left-area-row-titulo">
#1
</div>
<div class="left-area-row-info">A</div>
</div>
<div class="left-area-row">
<div class="left-area-row-titulo">
#2
</div>
<div class="left-area-row-info">BA</div>
</div>
<div class="left-area-row">
<div class="left-area-row-titulo">
#3
</div>
<div class="left-area-row-info">C</div>
</div>
<div class="left-area-row">
<div class="left-area-row-titulo">
#4
</div>
<div class="left-area-row-info">D</div>
</div>
</div>
</div>
<div class="right">
<div class="title">SECOND TITLE:</div>
</div>
</div>
I've got an layout which looks like this and I'm trying to zoom image-background on hover, but I can't get this effect in any way without affecting neighbour elements (on hover it expands like this) - my aim is to zoom only image and stay inside the parent div element. Is there any workaround for this in flexbox layout? This is my code:
HTML:
<body>
<div class="index-wrapper">
<nav class="index-menu">
123
</nav>
<main class="index-main">
<div class="index-square" style="background: yellow;"></div>
<div class="index-square">
<div class="index-square-inner" style="background-image: url(assets/img/is-2.jpg); background-position: center; background-size: cover;transition: all .2s ease-in-out;">
<div style="background: rgba(0, 0, 0, 0.4);">
123
</div>
</div>
</div>
<div class="index-square" style="background: pink;">123</div>
<div class="index-square" style="background: purple;">123</div>
</main>
</div>
</body>
SCSS:
.index-wrapper {
display: flex;
flex-flow: column;
height: 100vh;
.index-menu {
box-shadow: 0 0 2px 2px #d0d0d0;
z-index: 2;
background: white;
color: black;
padding: 2em;
}
.index-main {
display: flex;
background: yellow;
flex-direction: row;
flex: 1;
flex-wrap: wrap;
.index-square {
flex-basis: 50%;
display: flex;
flex-flow: column;
.index-square-inner {
flex: 1;
width: 100%;
display: flex;
flex-flow: column;
justify-content: center;
align-items: center;
&:hover {
transform: scale(1.1);
}
div {
flex: 1;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
}
}
}
}
}
You should add overflow: hidden; to the .index-square style definition;
.index-square {
flex-basis: 50%;
display: flex;
flex-flow: column;
overflow: hidden; /*Add this here*/
See this fiddle.