In the example I have a block div containing div items, the div items are styled to be circles.
I would like to use flex to display them in two rows of three.
I have them displaying in two rows of three but the items are stretched out of shape.
How can I keep the items as circles and display them as two rows of three
body{
background: grey;
}
.block{
background: white;
display: flex;
height: 400px;
flex-flow: row wrap;
justify-content: space-around;
padding: 20px;
position: absolute;
right: 40px;
top: 80px;
width: 540px;
z-index: 1000;
}
.block__item{
background: red;
border-radius: 80px;
color: white;
flex-basis: 33%;
height: 80px;
text-align: center;
width: 80px;
}
<div class="block">
<div class="block__item">1</div>
<div class="block__item">2</div>
<div class="block__item">3</div>
<div class="block__item">4</div>
<div class="block__item">5</div>
<div class="block__item">6</div>
</div>
If you nest the circles inside the block--item class you can centre them inside without distorting their shape:
body {
background: grey;
}
.block {
background: white;
display: flex;
height: 400px;
flex-flow: row wrap;
justify-content: space-around;
padding: 20px;
position: absolute;
right: 40px;
top: 80px;
width: 540px;
z-index: 1000;
}
.block__item {
display: flex;
justify-content: center;
align-items: center;
width: 33%;
}
.block__item_circle {
display: flex;
background: red;
justify-content: center;
align-items: center;
border-radius: 80px;
color: white;
height: 80px;
text-align: center;
width: 80px;
}
<div class="block">
<div class="block__item">
<div class="block__item_circle">1</div>
</div>
<div class="block__item">
<div class="block__item_circle">2</div>
</div>
<div class="block__item">
<div class="block__item_circle">3</div>
</div>
<div class="block__item">
<div class="block__item_circle">4</div>
</div>
<div class="block__item">
<div class="block__item_circle">5</div>
</div>
<div class="block__item">
<div class="block__item_circle">6</div>
</div>
</div>
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 have three elements currently vertically centered in a container through flex:
<div class="parent">
<div class="first">A</div>
<div class="second">B</div>
<div class="third">C</div>
</div>
with CSS:
.parent {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 800px;
}
Looking like:
I would like to change it so the first element is vertically centered and the other elements follow:
Ideally this could be done simply through flex but so far I cannot find a solution. Any help greatly appreciated.
If your elements have a fixed size, you could accomplish this with a wrapping div
which size is the same as the first element and let the following elements just overflow.
.parent {
height: 125px;
background-color: palegreen;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.item-container,
.item {
width: 200px;
height: 30px;
}
.item {
display: flex;
justify-content: center;
align-items: center;
border: 1px solid red;
}
.second {
height: 50px;
}
<div class="parent">
<div class="item-container">
<div class="item first">A</div>
<div class="item second">B</div>
<div class="item third">C</div>
</div>
</div>
If you can change the HTML structure, it's possible: Put the second and third elements into a wrapper DIV and put that one into the first. Then center the first one (not necessarily with flex - see below) and apply position: relative to it, and apply position: absolute and according position settings to the wrapper. For details see the snippet below.
.parent {
height: 500px;
border: 1px solid blue;
}
.first {
position: relative;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
height: 100px;
width: 300px;
background: #ccc;
}
.wrap1 {
position: absolute;
top: 100%;
width: 100%;
height: auto;
border: 1px solid green;
}
.second {
background: #eee;
height: 50px;
}
.third {
background: #aaa;
height: 80px;
}
<div class="parent">
<div class="first">A
<div class="wrap1">
<div class="second">B</div>
<div class="third">C</div>
</div>
</div>
</div>
ADDITION: Actually it's also possible with flex:
.parent {
height: 500px;
border: 1px solid blue;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.first {
position:relative;
height: 100px;
width: 300px;
background: #ccc;
}
.wrap1 {
position: absolute;
top: 100%;
width: 100%;
height: auto;
border: 1px solid green;
}
.second {
background: #eee;
height: 50px;
}
.third {
background: #aaa;
height: 80px;
}
<div class="parent">
<div class="first">A
<div class="wrap1">
<div class="second">B</div>
<div class="third">C</div>
</div>
</div>
</div>
Flexbox container shows aligned items wrong in IE 11
<div class="outer-container">
<div class='container'>
<div class="pointer">
<div class="point-wrapper">
<div class="point">1</div>
</div>
</div>
<div class="pointer">
<div class="point-wrapper">
<div class="point">2</div>
</div>
</div>
<div class="pointer">
<div class="point-wrapper">
<div class="point">3</div>
</div>
</div>
<div class="pointer">
<div class="point-wrapper">
<div class="point">4</div>
</div>
</div>
</div>
</div>
.outer-container {
display: flex;
flex-direction: row;
align-items: flex-end;
justify-content: flex-start;
padding: 1.25rem 0;
}
.container {
position: relative;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
margin: 0 0 0 1.25rem;
flex: 1
}
.container:after {
content: '';
position: absolute;
right: 20px;
bottom: 10px;
left: 20px;
height: 5px;
top: 48px;
display: block;
z-index: 1;
background-color: #666664;
}
.pointer {
position: relative;
width: 50px;
z-index: 2;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
}
.point-wrapper {
position: relative;
height: 6.375rem;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
}
.point {
width: 10px;
height: 10px;
border-radius: 50%;
box-sizing: border-box;
color: white;
font-size: 10px;
line-height: 1.875rem;
text-align: center;
background-color: #666664;
}
Here is my code: JSfiddle
That's how it looks in Chrome:
https://monosnap.com/file/bBTFUPA0LmTlrghz3OrZUeYJGemUYN
And that's how IE 11 renders it: https://monosnap.com/file/E4PPmBTgOrMsnR0SGGQ9yByo78nZ5X
I tried to play with different flexbox properties but didn't achieve any result.
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>