I need to do the following design using flexbox. I can't use table or dispay:table due to programming requirements
I can't center the text vertically and maintain the same height in all containers:
https://jsfiddle.net/kurtko/2fq6kn6m/
I'm trying to use to items:
align-self:center;
Or to container:
align-items:center;
But I lose the same height in all containers.
Any ideas?
You can add display: flex align-items: center justify-content: center on .one .small .medium
.item {
display: flex;
text-align: center;
}
.one,
.small,
.medium {
display: flex;
align-items: center;
justify-content: center;
}
.one {
align-items: flex-start;
}
.one {
width: 39%;
margin-right: 1%;
background-color: black;
color: white;
}
.two {
width: 29%;
margin-right: 1%;
}
.three {
width: 40%;
}
.medium {
background-color: grey;
color: white;
margin-bottom: 3px;
height: 200px;
}
.small {
background-color: #c0b55a;
color: white;
margin-bottom: 3px;
height: 100px;
}
<div class="item">
<div class="one">
Top
</div>
<div class="two">
<div class="medium">Center</div>
<div class="medium">Center</div>
</div>
<div class="three">
<div class="small">Center</div>
<div class="small">Center</div>
<div class="small">Center</div>
<div class="small">Center</div>
</div>
</div>
Check the demo
I just update on first div what you missed.
added to one:
.one{
align-items: center;
justify-content: center;
display: flex;
}
Related
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.
It doesn't work when I set justify-content: space-between on rightContainer, I want Apple on the top and Sony on the bottom.
<div className={styles.mainContainer}>
<div className={styles.leftContainer}>
<div className={styles.profilePicture} />
<p className={styles.profileUsername}>Test Name</p>
</div>
<div className={styles.rightContainer}>
<p>Apple</p>
<p>Sony</p>
</div>
</div>
css
.mainContainer {
display: flex;
width: 100%;
background-color: cadetblue;
}
.leftContainer {
width: 100%;
background-color: red;
text-align: left;
}
.rightContainer {
width: 100%;
background-color: blue;
text-align: right;
justify-content: space-between;
}
justify-content: space-evenly is only applicable to a flexbox. You can use a vertical flexbox to apply space-evenly.
.mainContainer {
display: flex;
width: 100%;
background-color: cadetblue;
}
.leftContainer {
width: 100%;
background-color: red;
text-align: left;
}
.rightContainer {
width: 100%;
background-color: blue;
text-align: right;
justify-content: space-evenly;
display: flex; /*Create a flexbox*/
flex-direction: column; /*Vertical flexbox*/
}
<div class="mainContainer">
<div class="leftContainer">
<div class="profilePicture" />
<p class="profileUsername">Test Name</p>
</div>
<div class="rightContainer">
<p>Apple</p>
<p>Sony</p>
</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'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>
This question already has answers here:
Special div shrinking
(2 answers)
Closed 5 years ago.
I have three divs that have different flex-basis. In order to make page responsive I want to put them centered one under one if width of the screen is less then 1000px.
Here's my example on Codepen:
.wrapper {
display: flex;
margin: 0 auto;
max-width: 1310px;
}
.left {
flex-basis: 555px;
}
.left__nav {
display: inline-block;
padding: 5px;
text-decoration: none;
}
.wrapper .right {
flex-basis: 462px;
display: flex;
justify-content: flex-end; /* align right (at end) */
}
.wrapper .button {
flex-basis: 193px;
text-align: center;
}
/* style for this demo */
.wrapper > div {
box-sizing: border-box;
border: 1px solid black;
border-collapse: collapse;
}
.mark-center {
text-align: center;
font-size: 30px;
color: red;
}
.container-small {
text-align: center;
background-color: lightgray;
max-width: 1100px;
margin: auto;
}
<div class="wrapper">
<div class="left">
<div class="links">
<a class="left__nav" href="#">Left Nav </a>
</div>
</div>
<div class="right">
Right
</div>
<div class="button">
Button
</div>
</div>
<div class="mark-center">
↑
</div>
<div class="container-small">
Center
</div>
Help me to put them that way if width < 1000px next way:
Seems to me you don't want flex-basis, you want width since these elements don't grow or shrink.
If so, you can use a media query and change the flex-direction to column after switching the flex-basis properties to width.
#media (max-width:1100px) {
.wrapper {
flex-direction:column;
align-items: center;
}
}
.wrapper {
display: flex;
margin: 0 auto;
max-width: 1310px;
}
.left {
width: 555px;
}
.left__nav {
display: inline-block;
padding: 5px;
text-decoration: none;
}
.wrapper .right {
width: 462px;
/* display: flex; */
/* justify-content: flex-end; */
/* align right (at end) */
}
.wrapper .button {
width: 193px;
text-align: center;
}
/* style for this demo */
.wrapper>div {
box-sizing: border-box;
border: 1px solid black;
border-collapse: collapse;
}
.mark-center {
text-align: center;
font-size: 30px;
color: red;
}
.container-small {
text-align: center;
background-color: lightgray;
max-width: 1100px;
margin: auto;
}
#media (max-width:1100px) {
.wrapper {
flex-direction: column;
align-items: center;
text-align: center;
}
}
<div class="wrapper">
<div class="left">
<div class="links">
<a class="left__nav" href="#">Left Nav </a>
</div>
</div>
<div class="right">
Right
</div>
<div class="button">
Button
</div>
</div>
<div class="mark-center">
↑
</div>
<div class="container-small">
Center
</div>