I have made a calculator using one parent div and plenty of child divs, the children are in html. After that I styled it using flex-box and it is almost done; nevertheless there is an empty space between first div (.result) and the rest of the divs (.btn).
I want to remove that empty space which is shown in picture below:
I tried to use flex-box method to arrange these div elements like blocks.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
h1 {
margin: 0 auto 0 auto;
background-color: gray;
text-align: center;
margin-bottom: 5vh;
}
.kalkulator {
display: flex;
flex-wrap: wrap;
height: 50vh;
width: 30vw;
margin: 0 auto 0 auto;
}
.kalkulator .result {
flex-basis: 100%;
height: 10vh;
background-color: #333;
}
.kalkulator div {
display: flex;
justify-content: center;
align-items: center;
flex-grow: 1;
flex-basis: 33%;
background-color: #666;
border: 1px solid black;
}
.btn:nth-last-child(2),
.btn:nth-last-child(1) {
flex-basis: 50%;
}
<h1>kalkulator</h1>
<div class="kalkulator">
<div class="result">wynik</div>
<div class="btn">1</div>
<div class="btn">2</div>
<div class="btn">3</div>
<div class="btn">4</div>
<div class="btn">5</div>
<div class="btn">6</div>
<div class="btn">7</div>
<div class="btn">8</div>
<div class="btn">9</div>
<div class="btn">+</div>
<div class="btn">0</div>
<div class="btn">-</div>
<div class="btn">/</div>
<div class="btn">.</div>
<div class="btn">*</div>
<div class="btn">C</div>
<div class="btn">=</div>
</div>
Apply align-content: flex-start to the flex container.
The default setting is align-content: stretch, which will spread the items across the container. With flex-start, they'll be packed together at the top.
Your code:
.kalkulator {
display: flex;
flex-wrap: wrap;
height: 50vh;
width: 30vw;
margin: 0 auto 0 auto;
border: 2px dashed red;
background-color: yellow;
}
.kalkulator .result {
flex-basis: 100%;
height: 10vh;
background-color: #333;
}
.kalkulator div {
display: flex;
justify-content: center;
align-items: center;
flex-grow: 1;
flex-basis: 33%;
background-color: #666;
border: 1px solid black;
}
.btn:nth-last-child(2),
.btn:nth-last-child(1) {
flex-basis: 50%;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
h1 {
margin: 0 auto 0 auto;
background-color: gray;
text-align: center;
margin-bottom: 5vh;
}
<h1>kalkulator</h1>
<div class="kalkulator">
<div class="result">wynik</div>
<div class="btn">1</div>
<div class="btn">2</div>
<div class="btn">3</div>
<div class="btn">4</div>
<div class="btn">5</div>
<div class="btn">6</div>
<div class="btn">7</div>
<div class="btn">8</div>
<div class="btn">9</div>
<div class="btn">+</div>
<div class="btn">0</div>
<div class="btn">-</div>
<div class="btn">/</div>
<div class="btn">.</div>
<div class="btn">*</div>
<div class="btn">C</div>
<div class="btn">=</div>
</div>
Modified code:
.kalkulator {
display: flex;
flex-wrap: wrap;
height: 50vh;
width: 30vw;
margin: 0 auto 0 auto;
border: 2px dashed red;
background-color: yellow;
align-content: flex-start;
}
.kalkulator .result {
flex-basis: 100%;
height: 10vh;
background-color: #333;
}
.kalkulator div {
display: flex;
justify-content: center;
align-items: center;
flex-grow: 1;
flex-basis: 33%;
background-color: #666;
border: 1px solid black;
}
.btn:nth-last-child(2),
.btn:nth-last-child(1) {
flex-basis: 50%;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
h1 {
margin: 0 auto 0 auto;
background-color: gray;
text-align: center;
margin-bottom: 5vh;
}
<h1>kalkulator</h1>
<div class="kalkulator">
<div class="result">wynik</div>
<div class="btn">1</div>
<div class="btn">2</div>
<div class="btn">3</div>
<div class="btn">4</div>
<div class="btn">5</div>
<div class="btn">6</div>
<div class="btn">7</div>
<div class="btn">8</div>
<div class="btn">9</div>
<div class="btn">+</div>
<div class="btn">0</div>
<div class="btn">-</div>
<div class="btn">/</div>
<div class="btn">.</div>
<div class="btn">*</div>
<div class="btn">C</div>
<div class="btn">=</div>
</div>
It seems too much* for one flexbox. Create the layout with two nested ones: one for the vertical partition of the calculator to the result and the buttons, and another one for the fluid positioning of the buttons within the buttons div:
<div class="kalkulator">
<div class="result">wynik</div>
<div class="buttons">[...]</div>
</div>
.kalkulator {
display: flex;
flex-direction: column;
}
.result {
flex-basis: 10vh;
}
.buttons {
flex-grow: 1; /* Fill the rest */
display: flex;
flex-wrap: wrap;
}
.btn {
flex-grow: 1;
flex-basis: 33%;
justify-content: center;
align-items: center;
display: flex;
}
For placing the buttons under the result box you need a flexbox with a vertical main axis (flex-direction: column). For placing the buttons in a row, a flexbox with a horizontal main axis (the default flex-direction: row).
See the following code, here I removed height: 50vh; property from .kalkulator class:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
h1 {
margin: 0 auto 0 auto;
background-color: gray;
text-align: center;
margin-bottom: 5vh;
}
.kalkulator {
display: flex;
flex-wrap: wrap;
/* height: 50vh; */
width: 30vw;
margin: 0 auto 0 auto;
}
.kalkulator .result {
flex-basis: 100%;
height: 10vh;
background-color: #333;
}
.kalkulator div {
display: flex;
justify-content: center;
align-items: center;
flex-grow: 1;
flex-basis: 33%;
background-color: #666;
border: 1px solid black;
}
.btn:nth-last-child(2),
.btn:nth-last-child(1) {
flex-basis: 50%;
}
<h1>kalkulator</h1>
<div class="kalkulator">
<div class="result">wynik</div>
<div class="btn">1</div>
<div class="btn">2</div>
<div class="btn">3</div>
<div class="btn">4</div>
<div class="btn">5</div>
<div class="btn">6</div>
<div class="btn">7</div>
<div class="btn">8</div>
<div class="btn">9</div>
<div class="btn">+</div>
<div class="btn">0</div>
<div class="btn">-</div>
<div class="btn">/</div>
<div class="btn">.</div>
<div class="btn">*</div>
<div class="btn">C</div>
<div class="btn">=</div>
</div>
Viewport Height (vh): This unit is based on the height of the viewport. A value of 1vh is equal to 1% of the viewport height.
Height of container is 50vh and height of result is 10vh. This leaves 40vh for button panel, or 6.67vh per row. If you want to preserve container height, you can just add height: 6.67vh; to .kalkulator div. This will set button height to fixed value, so there won't be any empty space.
Related
I am having problems with flexbox layout parenting a child control.
html, body, .frame{
margin: 0;
height: 100%;
}
* {
box-sizing: border-box;
}
.frame{
display: flex;
flex-flow: column;
}
.header{
background-color: yellow;
height: 40px;
}
.body-outer{
background-color: green;
flex: 1;
display: flex;
flex-flow: column;
}
.body-inner{
border: 1px solid red;
flex: 1;
}
.big-text{
height: 2000px;
border: 1px solid lightblue;
overflow: auto;
margin: 5px;
}
<div class="frame">
<div class="header">header</div>
<div class="body-outer">
<div>subheader</div>
<div class="body-inner>">
<div class="big-text">big text</div>
</div>
</div>
</div>
The 'body-inner' div is meant to fill the remaining space with flex: 1 and the 'big-text' is supposed to fill the whole space of 'body-inner' without expanding it but showing scroll bars.
You have the overflow applied to the content. It should be applied to the container that will be overflowed.
Also, you need a fixed height, so that the overflow property has something to overflow.
Try this:
.frame {
display: flex;
flex-flow: column;
height: 100vh;
}
.header {
background-color: yellow;
height: 40px;
}
.body-outer {
height: calc(100vh - 40px); /* new */
background-color: green;
/* flex: 1; */
display: flex;
flex-flow: column;
}
.body-inner {
border: 1px solid red;
flex: 1;
overflow: auto; /* moved here */
}
.big-text {
height: 2000px;
border: 1px solid lightblue;
/* overflow: auto; */
margin: 5px;
}
body {
margin: 0;
}
* {
box-sizing: border-box;
}
<div class="frame">
<div class="header">header</div>
<div class="body-outer">
<div>subheader</div>
<div class="body-inner">
<div class="big-text">big text</div>
</div>
</div>
</div>
I want to create a layout where we have a header (responsive, with any height), footer (responsive, with any height), and content that fills the rest of space. Content should have two columns - first(right) that fits the content and second(left) that is very long and should have overflow with y-axis scrolling.
Detailed snipped with HTML and CSS attached.
I have problem with making them work inside of flexible height. I know how to make it work when I have only two columns, but with a responsive footer and header, I have problems.
I also have a code snippet inside of codepen
Thanks in advance for any help :)
html,
body {
height: 100%;
width: 100%;
}
.container {
height: 100%;
display: flex;
flex-direction: column;
}
.column {
background-color: white;
display: flex;
flex-direction: column;
flex-basis: 100%;
flex: 1;
color: black;
border: 5px purple solid;
}
.column-with-overflow {
overflow: auto;
max-height: 100%;
flex-grow: 1;
}
.column-with-overflow-content {
height: 1000px;
background-color: blue;
display: flex;
}
.columns {
display: flex;
flex-direction: row;
background-color: yellow;
width: 100%;
max-height: 100%;
}
.content {
background-color: blue;
flex-grow: 1;
}
.box {
text-align: center;
color: white;
display: flex;
justify-content: center;
}
.header {
background-color: green;
height: 60px; // assume that It's not known - any height
}
.footer {
background-color: red;
height: 60px; // assume that It's not known - any height
}
<div class="container">
<div class="box header">Header</div>
<div class="box content">
<div class="columns">
<div class='column column-with-overflow'>
<div class='column-with-overflow-content'>
box 1
</div>
</div>
<div class='column'>box 2</div>
</div>
</div>
<div class="box footer">Footer</div>
</div>
Set a fixed height to your .box.content div element.
And use min-height in .column-with-overflow-content insted of height
html,
body {
height: 100%;
width: 100%;
}
.container {
height: 100%;
display: flex;
flex-direction: column;
}
.column {
background-color: white;
display: flex;
flex-direction: column;
flex-basis: 100%;
flex: 1;
color: black;
border: 5px purple solid;
}
.column-with-overflow {
overflow: auto;
max-height: 100%;
flex-grow: 1;
}
.column-with-overflow-content {
min-height: 1000px; /* use min-height */
background-color: blue;
display: flex;
}
.columns {
display: flex;
flex-direction: row;
background-color: yellow;
width: 100%;
max-height: 100%;
}
.content {
background-color: blue;
flex-grow: 1;
}
.box.content { height: 100px; } /* set height to columns container */
.box {
text-align: center;
color: white;
display: flex;
justify-content: center;
}
.header {
background-color: green;
height: 60px; // assume that It's not known - any height
}
.footer {
background-color: red;
height: 60px; // assume that It's not known - any height
}
<div class="container">
<div class="box header">Header</div>
<div class="box content">
<div class="columns">
<div class='column column-with-overflow'>
<div class='column-with-overflow-content'>
box 1
</div>
</div>
<div class='column'>box 2</div>
</div>
</div>
<div class="box footer">Footer</div>
</div>
I have a nested flexbox situation. The first one is to establish two responsive columns:
.ColWrap,
{
width: 100%;
box-sizing: border-box;
background-color: #fff;
padding: 50px 10px 50px 25px;
display: flex;
flex-wrap: wrap;
}
.ColWrap .col,
{
flex: 1;
padding: 20px 20px 20px 0;
margin: auto;
}
#media screen and (max-width: 600px) {
.ColWrap {
flex-direction: column;
}
.ColWrap .col,
{
width: 100%;
padding-left: 0;
}
}
The second is a series of what I'm called "nuggets" inside the right column. These should wrap as necessary:
.nuggetHolder {
width: 100%;
margin: 20px;
display: flex;
flex-wrap: wrap;
}
.nugget {
flex: 0 1 40%;
margin: 10px;
padding: 10px;
border: 2px solid rgba(0,0,0,.2);
}
Putting it together looks like this:
<div class="ColWrap">
<div class="col">
<h2>Left-hand text</h2>
</div>
<div class="col">
<div class="nuggetHolder">
<div class="nugget">Nugget NuggetNuggetNuggetNuggetNuggetNuggetNuggetNuggetNuggetNuggetNuggetNuggetNuggetNuggetNuggetNuggetNuggetNugget</div>
<div class="nugget">Nugget</div>
<div class="nugget">Nugget</div>
<div class="nugget">Nugget</div>
<div class="nugget">Nugget</div>
<div class="nugget">Nugget</div>
</div>
</div>
The problem I am having is that the nugget with all the text is overflowing outside the container.
Do you think I should set up the 2-column container as a grid and then each "nugget" as a flexbox?
Use word-break: break-word;
word-break: break-word; keep all the text in the size the div already have.
for looking good I add:
flex-grow: 1; in .nugget - it also like change flex: 0 1 40%; to flex: 1 1 40%;
and in .nuggetHolder I replace the margin in padding and add box-sizing: border-box; that calculate the box size with border and padding, and it not break with scroll-x.
.ColWrap,
{
width: 100%;
box-sizing: border-box;
background-color: #fff;
padding: 50px 10px 50px 25px;
display: flex;
flex-wrap: wrap;
}
.ColWrap .col,
{
flex: 1;
padding: 20px 20px 20px 0;
margin: auto;
}
#media screen and (max-width: 600px) {
.ColWrap {
flex-direction: column;
}
.ColWrap .col,
{
width: 100%;
padding-left: 0;
}
}
.nuggetHolder {
width: 100%;
// margin: 20px;
padding: 20px;
display: flex;
flex-wrap: wrap;
box-sizing: border-box;
}
.nugget {
flex: 0 1 40%;
margin: 10px;
padding: 10px;
border: 2px solid rgba(0,0,0,.2);
word-break: break-word;
flex-grow: 1;
}
<div class="ColWrap">
<div class="col">
<h2>Left-hand text</h2>
</div>
<div class="col">
<div class="nuggetHolder">
<div class="nugget">Nugget NuggetNuggetNuggetNuggetNuggetNuggetNuggetNuggetNuggetNuggetNuggetNuggetNuggetNuggetNuggetNuggetNuggetNugget</div>
<div class="nugget">Nugget</div>
<div class="nugget">Nugget</div>
<div class="nugget">Nugget</div>
<div class="nugget">Nugget</div>
<div class="nugget">Nugget</div>
</div>
</div>
Add the following to .nugget:
max-width: 40%;
overflow-wrap: break-word;
To center it add justify-content: center to .nuggetHolder.
Added max-width so that any overflowed content, i.e. over 40% will be consistent.
I've looked everywhere (for days..) but couldn't find a solution working for me so here I am..
I've created some sort of square, divided in 4 div, squares I all want responsive.
Here is a drawing
As I can't set any div heigh, I can't get the text of the "text-slider" and "text-produits" div in the center. Does anybody know how to do this ? Thank in advance!
.slider {
display: table;
width: 100vw;
margin-left: calc(-50vw + 50%);
height: 100%;
justify-content: center;
position: relative;
}
.slider-wrapper {
width: 100%;
height: 100%;
overflow: hidden;
}
.produits {
display: table;
width: 100vw;
margin-left: calc(-50vw + 50%);
height: auto;
justify-content: center;
vertical-align: middle;
text-align: center;
position: relative;
}
#media screen and (min-width: 850px) {
.text-slider {
display: table-cell;
width: 30%;
vertical-align: middle;
text-align: center;
}
.grid-cuisine {
display: table-cell;
justify-content: center;
align-items: center;
position: relative;
width: 45%;
}
.grid-produits {
display: table-cell;
width: 30%;
justify-content: center;
}
.text-produits {
display: table-cell;
width: 45%;
vertical-align: middle;
text-align: left;
padding: auto;
}
}
<div class="row slider d-flex justify-content-center" id="photos">
<div class="text-slider">
<div>
Nunc euismod eget...
</div>
</div>
<div class="grid-cuisine">
<div class="slider-wrapper">
...
</div>
</div>
</div>
<div class="row produits d-flex justify-content-center" id="produits">
<div class="grid-produits">
<img src="images/combo-alpha.svg" alt="..." class="image-produits">
</div>
<div class="text-produits">
Lorem ipsum dolor...
</div>
</div>
You can use flexbox for this - I have commented css below:
* {
box-sizing: border-box;
}
.container {
display: flex;
flex-direction: row; /* align children in rows */
flex-wrap: wrap; /* allow wrapping of children for multiple rows */
width: 50%; /* change to width you want */
margin: 0 auto;
border-left: 5px solid black;
border-bottom: 5px solid black;
}
.container>div {
border-right: 5px solid black;
border-top: 5px solid black;
padding:20px;
display:flex; /* make children flex too for centering */
align-items:center; /* vertical center */
justify-content:center; /* horizontal center */
}
.left-col {
width: 30%;
}
.right-col {
width: 70%;
}
<div class="container">
<div class="left-col">
top left content over multiple lines
</div>
<div class="right-col">
top right
</div>
<div class="left-col">
bottom left content over multiple lines
</div>
<div class="right-col">
bottom right
</div>
</div>
Grid + Flex
html, body {
margin: 0;
height: 100%
}
.grid-container * {
border: 1px solid #ccc;
}
.grid-container div {
display: flex;
justify-content: center;
align-items: center
}
.grid-container div:after {
content: attr(class);
color: #888;
display: flex;
justify-content: center;
align-items: center;
height: 100%;
font-family: arial;
}
.grid-container {
display: grid;
height: 100%;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr;
grid-template-areas: '. .' '. .';
}
<div class='grid-container'>
<div>Text Slider</div>
<div>Grid-cuisine</div>
<div>Grid Produits</div>
<div>Text-produits</div>
</div>
I have a flex container with 3 children, and I am wanting to ensure that the children all align at flex-start, however the final child should sit at the bottom of the container.
Is it not possible to combine align-content with align-self?
.container {
display: flex;
flex-wrap: wrap;
align-content: flex-start;
padding: 15px 15px 50px 15px;
height: 100%;
background: red;
width: 200px;
height: 500px;
}
.item-1,
.item-2,
.item-3 { width: 100%; }
.item-3 {
align-self: flex-end;
}
<div class="container">
<div class="item-1">One</div>
<div class="item-2">Two</div>
<div class="item-3">Three</div>
</div>
Since you want 100% width of your element, you can switch to column direction then use margin to control alignment:
.container {
display: flex;
flex-direction: column;
padding: 15px 15px 50px 15px;
height: 100%;
background: red;
width: 200px;
height: 300px;
}
.item-3 {
margin-top: auto;
}
<div class="container">
<div class="item-1">One</div>
<div class="item-2">Two</div>
<div class="item-3">Three</div>
</div>