I am trying to make a layout from flexbox. I have 3 column of boxes which have following layout till they reach mobile layout where they will stack on top of another.
But before I reach mobile layout I am trying to shrink all the items proportionally. (i.e when I reduce the browsers width, it should equally be small). But only the left and right items are equally reducing except the middle item. How do I make that shrink so that all the items proportionally shrink while reducing browsers width?
CODE GOES HERE
.container {
width: 100%;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
padding-top: 80px;
}
.box {
width: 400px;
/* min-width: 280px; */
height: 400px;
display: flex;
align-items: center;
justify-content: center;
border: 1px solid black;
font-size: 30px;
font-weight: bold;
font-family: cursive;
box-shadow: 1px 4px 3px rgba(0, 0, 0, 0.5);
}
.box1 {
background: grey;
}
.box2 {
background: green;
margin-bottom: 20px;
}
.box3 {
background: greenyellow;
}
.box4 {
background: orange;
}
.middle-part {
margin: 0px 20px;
/* min-width: 280px; */
}
<div class="container">
<div class="box box1">
I am box1
</div>
<div class="middle-part">
<div class="box box2">
I am box2
</div>
<div class="box box3">
I am box3
</div>
</div>
<div class="box box4">
I am box4
</div>
</div>
If you want it to shrink dynamically, you need to remove the width set. Add flex-grow: 1 on .box and .middle-part to make it grow. In addition, padding-top only accept 1 value, so perhaps some typos there.
.container {
width: 100%;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
padding-top: 80px 40px; /* padding top only accept 1 value */
}
.middle-part {
flex-grow: 1;
}
.box {
flex-grow: 1;
/* min-width: 280px; */
height: 400px;
display: flex;
align-items: center;
justify-content: center;
border: 1px solid black;
font-size: 30px;
font-weight: bold;
font-family: cursive;
box-shadow: 1px 4px 3px rgba(0, 0, 0, 0.5);
}
.box1 {
background: grey;
}
.box2 {
background: green;
margin-bottom: 20px;
}
.box3 {
background: greenyellow;
}
.box4 {
background: orange;
}
.middle-part {
margin: 0px 20px;
/* min-width: 280px; */
}
<body>
<div class="container">
<div class="box box1">
I am box1
</div>
<div class="middle-part">
<div class="box box2">
I am box2
</div>
<div class="box box3">
I am box3
</div>
</div>
<div class="box box4">
I am box4
</div>
</div>
</body>
Related
html,
body {
margin: 0;
height: 100%;
}
.navbar {
position: fixed;
top: 0;
width: 100%;
height: 50px;
background-color: #2D4256;
}
.nav-centre {
margin: 0 auto;
width: 40%;
height: 100%;
}
.nav-container {
display: flex;
height: 100%;
align-items: center;
/* vertically centre */
}
.nav-item {
color: white;
width: 40px;
text-align: center;
}
.main-content {
height: calc(100% - 50px);
width: 100%;
position: absolute;
bottom: 0;
overflow-y: overlay;
display: flex;
justify-content: center;
}
.main-wrap {
width: 40%;
border-left: 1px solid black;
border-right: 1px solid black;
}
.box {
width: 200px;
height: 200px;
background: white;
border: 1px solid black;
margin: 10px;
}
<body>
<div class="navbar">
<div class="nav-centre">
<div class="nav-container">
<div class="nav-item">1</div>
<div class="nav-item">2</div>
<div class="nav-item">3</div>
<div class="nav-item">4</div>
</div>
</div>
</div>
<div class="main-content">
<div class="main-wrap">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
</div>
</body>
The main-wrap div is not expanding to fill the parent main-content div, how can I get the main-wrap element to expand to the full height of the parent?
https://codepen.io/woooof/pen/VwBLprj
The .main-wrapper is getting by default display:block, which doesn't match with the display:flex parent.
To get the value from the parent, you can use display: inherit. Once done, the elements inside won't respect their width. To fix that, you must wrap the elements, and for making it total height, You can use max-content.
.main-wrapper {
display: inherit;
flex-wrap: wrap;
height: max-content;
}
Result:
html,
body {
margin: 0;
height: 100%;
}
.navbar {
position: fixed;
top: 0;
width: 100%;
height: 50px;
background-color: #2D4256;
}
.nav-centre {
margin: 0 auto;
width: 40%;
height: 100%;
}
.nav-container {
display: flex;
height: 100%;
align-items: center;
/* vertically centre */
}
.nav-item {
color: white;
width: 40px;
text-align: center;
}
.main-content {
height: calc(100% - 50px);
width: 100%;
position: absolute;
bottom: 0;
overflow-y: overlay;
display: flex;
justify-content: center;
}
.main-wrap {
width: 40%;
border-left: 1px solid black;
border-right: 1px solid black;
display: inherit;
flex-wrap: wrap;
height: max-content;
}
.box {
width: 200px;
height: 200px;
background: white;
border: 1px solid black;
margin: 10px;
}
<body>
<div class="navbar">
<div class="nav-centre">
<div class="nav-container">
<div class="nav-item">1</div>
<div class="nav-item">2</div>
<div class="nav-item">3</div>
<div class="nav-item">4</div>
</div>
</div>
</div>
<div class="main-content">
<div class="main-wrap">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
</div>
</body>
I am not a huge fan of making the size of one element (navbar) determine the position of the second element main-content (margin-top). where you have height: calc(100% - 50px); I would rather if the style of the first changes. Say for example we increase navbar font size, you would not need to adjust the second manually.
Here in this example I set the font-size on an ancestor block to change the nav buttons size and not have to change the content. font-size: 1.5rem;
Change it even larger; again no change to the content CSS;
I put a lot of comments in and some borders just to show where things line - that can and should all be removed for a production version.
html,
body {
margin: 0;
height: 100%;
/* stack the nav and the content blocks */
display: grid;
grid-template-rows: 1fr auto;
}
.navbar {
/* put the navbar at the top */
position: sticky;
top: 0;
background-color: #2D4256;
/* flex, default vertical/horizontal centers nav-centre in the flex */
display: flex;
}
.nav-centre {
margin: 0 auto;
display: flex;
}
.nav-container {
display: flex;
/* again these are the default here
flex-direction: row;
align-items: center;
justify-content: center;
*/
/* how much space above and below the yellow border nav container */
margin-top: 0.5rem;
margin-bottom: 0.5rem;
}
.nav-item {
color: white;
/* 2 times font-size for cyan border items */
width: 2em;
text-align: center;
}
.main-content {
display: grid;
justify-content: center;
}
.main-wrap {
border-left: 1px solid black;
border-right: 1px solid black;
}
.box {
width: 200px;
height: 200px;
background: white;
border: 1px solid black;
margin: 10px;
}
/* below here is just for visual clarification and can be removed */
.navbar {
/* just to show you can style and not effect content block *
/* this can be on any of the three containers */
font-size: 1.5rem;
font-family: Verdana, Arial, Helvetica, sans-serif;
}
.nav-centre {
border: 1px solid magenta;
padding: 2px;
}
.nav-container {
border: 1px solid yellow;
}
.nav-item {
border: 1px solid cyan;
/* you can space out the nav buttons */
margin: 0 0.25rem;
}
.main-content {
/* just to show it is below the navbar and separate */
border: solid red 1px;
margin-top: 0.25rem;
margin-left: 0.5rem;
margin-right: 0.5rem;
}
.box {
background-color: #ffffdd;
}
<body>
<div class="navbar">
<div class="nav-centre">
<div class="nav-container">
<div class="nav-item">1</div>
<div class="nav-item">2</div>
<div class="nav-item">3</div>
<div class="nav-item">4</div>
</div>
</div>
</div>
<div class="main-content">
<div class="main-wrap">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
</div>
</body>
I'm trying to create a circle as an ::after pseudo element, which resizes automatically depending on its content.
.container {
display: flex;
flex-direction: row;
}
#dividerHost2 #left {
flex: 1 1 auto;
background-color: yellowgreen;
height: 200px;
}
#dividerHost2 #right {
flex: 1 1 auto;
background-color: dodgerblue;
}
#dividerHost2 .divider {
background-color: white;
margin: 0px;
width: 6px;
font-weight: 800;
}
.divider.vertical {
--divider-color: transparent;
display: inline-flex;
width: 1px;
border-left: 1px solid rgb(var(--divider-color));
margin: 0px 2px 0px 2px;
overflow: show;
}
.divider.vertical.title::after {
flex: 0 0 auto;
align-self: center;
border-radius: 50%;
content: "OR";
padding: 9px 8px 11px 8px;
background-color: white;
color: black;
transform: translateX(-44%);
z-index: 10;
}
<div id="dividerHost2" class="container">
<div id="left" class="container" style="flex-direction: row;"></div>
<div id="divider3" class="divider vertical title"></div>
<div id="right" class="container" style="flex-direction: row;"></div>
</div>
That gives a pretty nice result so far:
JSFiddle https://jsfiddle.net/jsnbtmh3/
However, with longer text the circle turns into an oval:
How to make the circle auto resize depending on its content?
Here is a trick using radial-gradient. The idea is to keep the element full height and color it using circle closest-side which will always create a circle that will start from the center and expand to the closest sides (left and right one)
I simplified the code to keep only the relevant part:
.container {
display: flex;
flex-direction: row;
margin:10px;
}
.left {
flex: 1 1 auto;
background-color: yellowgreen;
height: 200px;
}
.right {
flex: 1 1 auto;
background-color: dodgerblue;
}
.divider {
background-color: white;
width: 6px;
font-weight: 800;
display: flex;
justify-content: center;
}
.divider::after {
display: flex;
align-items: center;
flex: 0 0 auto;
content: attr(data-text);
padding: 0 8px;
background: radial-gradient(circle closest-side, white 98%, transparent 100%);
z-index: 10;
}
<div class="container">
<div class="left "></div>
<div class="divider" data-text="OR"></div>
<div class="right "></div>
</div>
<div class="container">
<div class="left "></div>
<div class="divider" data-text="longer"></div>
<div class="right "></div>
</div>
<div class="container">
<div class="left "></div>
<div class="divider" data-text="even longer"></div>
<div class="right "></div>
</div>
Don't put actual content in the pseudo-element especially as this is actually "content" rather than styling, rather use the pseudo-element to create a background circle using the padding/aspect ratio trick.
body {
text-align: center;
}
.divider {
margin: 3em;
display: inline-block;
position: relative;
padding: 1em;
font-weight: bold;
}
.divider:after {
content: "";
position: absolute;
width: 100%;
padding-top: 100%;
background: lightblue;
border-radius: 50%;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
z-index: -1;
}
<div class="divider">OR</div>
<div class="divider">LONG TEXT</div>
Question: I am having two div's A & B where DIV A is having min and max width with resize horizontal feature and Div B is auto width.
Now when Div A has 4 divs in it when each div is removed the width of DIVA is auto shrinked but when i dragg div A to right and remove an element in DIV A the width is not auto
.resizeE {
border-right: 6px solid;
display: flex;
align-items: stretch;
justify-content: flex-start;
align-content: center;
width: auto;
min-width: 150px;
max-width: 250px;
height: 100%;
resize: horizontal;
overflow: auto;
}
.E1 .E2 .E3 .E4 {
border: 2px solid #A0A0A0;
width: 50px;
height: 50px;
}
.box {
width: 30px;
float: left;
margin: 5px;
}
.red {
color: red;
background: pink;
}
.blue {
color: blue;
background: light-blue;
}
.green {
color: green;
background: pink;
}
.map {
width: 100%;
}
<div style="height:100%;width:100%;background: #e2e2e2;overflow-y: hidden;overflow-x: hidden;">
<div class="resizeE">
<div class="red box">E1</div>
<div class="red box">E2</div>
<div class="blue box">E3</div>
<div class="green box">E4</div>
</div>
<div class="col p-5">
<div class="map">
block B
</div>
</div>
</div>
I am trying to center text inside a parent element of limited width. However the text is set in a large font, which might cause a line-break. However the element line-break does not decrease the width of the element. Is there a way to center a text inside a parent wrapper if the text does not fit?
You can find a failing example in the stack-overflow code sample. The top box has a line-break and should still be centered.
.wrapper {
width: 900px;
margin: 0 auto;
background: lightgrey;
}
.box {
display: flex;
align-items: center;
justify-content: center;
width: 300px;
height: 200px;
border: 1px solid green;
}
.box:nth-child(1) {
background: green;
font-size: 45px;
}
.box:nth-child(2) {
background: orange;
}
<div class="wrapper">
<div class="box"><h3>Lorem Ipsum</h3></div>
<div class="box"><h3>Lorem Ipsum</h3></div>
</div>
Just add the text-align: center;
.wrapper {
width: 900px;
margin: 0 auto;
background: lightgrey;
}
.box {
display: flex;
align-items: center;
justify-content: center;
/* text-align: center; */
width: 300px;
height: 200px;
border: 1px solid green;
}
.box > * {
flex: 0 0 50%;
}
.box:nth-child(1) {
background: green;
font-size: 45px;
}
.box:nth-child(2) {
background: orange;
}
<div class="wrapper">
<div class="box"><h3>Lorem Ipsum</h3></div>
<div class="box"><h3>Lorem Ipsum</h3></div>
</div>
You can use width:min-content; with the first child (https://caniuse.com/#feat=intrinsic-width)
.wrapper {
width: 900px;
margin: 0 auto;
background: lightgrey;
}
.box {
display: flex;
align-items: center;
justify-content: center;
width: 300px;
height: 200px;
border: 1px solid green;
}
.box:nth-child(1) h3 {
width:-webkit-min-content;
width:-moz-min-content;
width:min-content;
border:1px solid;
}
.box:nth-child(1) {
background: green;
font-size: 45px;
}
.box:nth-child(2) {
background: orange;
}
<div class="wrapper">
<div class="box">
<h3>Loreme Ipsum</h3>
</div>
<div class="box">
<h3>Lorem Ipsum</h3>
</div>
</div>
I'm dealing with a 4 column grid that has a variable number of items. The grid is responsive so instead of using pixel/em values I'm using percentages in combination with calc to compensate for the right margin.
To ensure that the remaining boxes of an uneven row don't resize and fill the remaining space I set my flex-basis property to 0. The only problem that remains is the boxes themselves are a few pixels short of filling the parent container (notice how the items don't horizontally fill the entire grid). How can I fix this?
*,
*:before,
*:after {
box-sizing: border-box;
font-family: Helvetica;
}
.container {
}
.flex-container {
display: flex;
border: 4px solid #000;
margin: 0 auto;
width: 400px;
flex-direction: row;
flex-wrap: wrap;
}
.flex-child {
flex: 0 1 calc(25% - 6px);
background: tomato;
padding: 10px;
border: 5px solid red;
color: white;
font-weight: bold;
font-size: 2em;
text-align: center;
margin-bottom: 6px;
}
.flex-child:not(:nth-of-type(4n)) {
margin-right: 6px;
}
<div class="flex-container">
<div class="flex-child">1</div>
<div class="flex-child">2</div>
<div class="flex-child">3</div>
<div class="flex-child">4</div>
<div class="flex-child">5</div>
<div class="flex-child">6</div>
<div class="flex-child">7</div>
<div class="flex-child">8</div>
<div class="flex-child">9</div>
<div class="flex-child">10</div>
</div>
Increase the right margin to say 8px.
*,
*:before,
*:after {
box-sizing: border-box;
font-family: Helvetica;
}
.container {
}
.flex-container {
display: flex;
border: 4px solid #000;
margin: 0 auto;
width: 400px;
flex-direction: row;
flex-wrap: wrap;
}
.flex-child {
flex: 0 1 calc(25% - 6px);
background: tomato;
padding: 10px;
border: 5px solid red;
color: white;
font-weight: bold;
font-size: 2em;
text-align: center;
margin-bottom: 6px;
}
.flex-child:not(:nth-of-type(4n)) {
margin-right: 8px;
}
<div class="flex-container">
<div class="flex-child">1</div>
<div class="flex-child">2</div>
<div class="flex-child">3</div>
<div class="flex-child">4</div>
<div class="flex-child">5</div>
<div class="flex-child">6</div>
<div class="flex-child">7</div>
<div class="flex-child">8</div>
<div class="flex-child">9</div>
<div class="flex-child">10</div>
<div class="flex-child">11</div>
<div class="flex-child">12</div>
<div class="flex-child">13</div>
<div class="flex-child">14</div>
</div>