This question already has answers here:
Center one and right/left align other flexbox element
(11 answers)
Closed 1 year ago.
I have flex container and first element needs to align left and second center. I try different options with justify-content and align items => center so that the second element of this paging box is in the middle but there is no help.
This is css and html code
paging-section {
display: flex;
height: 60px;
}
/* .paging-section div {
flex: 1;
} */
.pagination-info {
align-items: flex-start;
margin-top: 15px;
background-color: red;
}
.pagination-box {
width: auto;
height: 38px;
margin: 20px 308px 369px 215px;
padding: 0 16px 0 16px;
border-radius: 4px;
box-shadow: 0px 1px 2px 0 rgba(0, 0, 0, 0.08);
border: solid 1px #d8dce6;
background-color: #ffffff;
display: flex;
background-color: yellow;
// justify-content: center;
// align-items: center;
}
<div class="paging-section">
<div class="pagination-info">
<p>
{{ size }}
{{ 'ADMIN.PAGINATION.RESULTS' | translate }}
</p>
</div>
<div class="pagination-box">
....
</div>
</div>
How to achieve that this yellow element is in the middle of the container and the first one remains on the left side ? Thanks
ive set fixed width to .pagination-info and also set margin: 0px auto; to .pagination-box at the end ive translate the .pagination-box to the left on half width of .pagination-info there is transform: translateX(-50px);
.paging-section {
display: flex;
flex-direction: row;
align-items: center;
justify-content: flex-start;
height: 60px;
}
/* .paging-section div {
flex: 1;
} */
.pagination-info {
align-items: flex-start;
background-color: red;
max-width: 100px;
width: 100px;
min-width: 100px;
word-break: break-all;
}
.pagination-box {
margin: 0px auto;
transform: translateX(-50px);
width: auto;
height: 38px;
padding: 0 16px 0 16px;
border-radius: 4px;
box-shadow: 0px 1px 2px 0 rgba(0, 0, 0, 0.08);
border: solid 1px #d8dce6;
background-color: #ffffff;
display: flex;
background-color: yellow;
// justify-content: center;
// align-items: center;
}
<div class="paging-section">
<div class="pagination-info">
<p>
{{ size }}
{{ 'ADMIN.PAGINATION.RESULTS' | translate }}
</p>
</div>
<div class="pagination-box">
....
</div>
</div>
Related
I would like to center something in my code with flexbox. It works for all other elements, only here something seems to be wrong.
Does anyone have an idea?
.answer {
text-shadow: 0 0 2px gr;
display: flex;
justify-content: center;
border-radius: 5px;
margin-bottom: 20px;
padding: 20px;
border: 5px solid black;
border-radius: 5px;
width: 50%;
}
<section class="answer">
<p>Answer</p>
</section>
This is how it gets displayed in my live server
You can add body tag on css to make center on the page
to make horizontal center
body {
display: flex,
justify-content: center
}
or make vertical center
body {
display: flex,
align-items: center,
height: 100vh /* This is for full height of your screen */
}
or make horizontal and vertical center
body {
display: flex,
justify-content: center,
align-items: center,
height: 100vh
}
Your "Answer" is centered in the box. Are you trying to center the box on the page? In that case, you would need to apply flex styles to the parent. In this case, the body:
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.answer {
text-shadow: 0 0 2px gr;
display: flex;
justify-content: center;
border-radius: 5px;
margin-bottom: 20px;
padding: 20px;
border: 5px solid black;
border-radius: 5px;
width: 50%;
}
<section class="answer">
<p>Answer</p>
</section>
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0px; /*add to remove body margin which always present and makes v-scroll if not removed*/
}
.answer {
display: flex;
justify-content: center;
margin-bottom: 20px; /*Remove it if their is no other content on page*/
padding: 20px;
border: 5px solid black;
border-radius: 5px;
width: 50%;
}
<section class="answer">
<p>Answer</p>
</section>
Good Day.
I'm trying to use flex box to enforce the following behavior in a flex container which contains excess space on the cross-axis:
If all flex items fit in one row, then they should align at the top of the cross axis; but
Once they wrap, the flex items should condense in the center of the cross axis.
To do this, I've tried the following markup at https://jsfiddle.net/ht5bue6s/
* {
box-sizing: border-box;
font-size: 1.5rem;
}
html {
background: #b3b3b3;
padding: 5px;
}
body {
background: #b3b3b3;
padding: 5px;
margin: 0;
}
.flex-container {
height: 500px;
background: white;
padding: 10px;
border: 5px solid black;
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-evenly;
align-items: flex-start;
align-content: center;
}
.item-1 {
background: #ff7300;
color: white;
padding: 10px;
border: 5px solid black;
margin: 10px;
}
.item-2 {
background: #ff9640;
color: white;
padding: 10px;
border: 5px solid black;
margin: 10px;
}
.item-3 {
background: #ff9640;
color: white;
padding: 10px;
border: 5px solid black;
margin: 10px;
}
.item-4 {
background: #f5c096;
color: white;
padding: 10px;
border: 5px solid black;
margin: 10px;
}
.item-5 {
background: #d3c0b1;
color: white;
padding: 10px;
border: 5px solid black;
margin: 10px;
}
.item-6 {
background: #d3c0b1;
color: white;
padding: 10px;
border: 5px solid black;
margin: 10px;
}
<div class="flex-container">
<div class="item-1">1</div>
<div class="item-2">2</div>
<div class="item-3">3</div>
<div class="item-4">4</div>
<div class="item-5">5</div>
<div class="item-6">6</div>
</div>
As you'll see, the flex items always condense to the center. That is, "align-content: center" is always applied even when the flex items do not wrap.
I've read the MDN quote, "For align-content to work you need more height in your flex container than is required to display the items. It then works on all the items as a set, and dictates what happens with that free space, and the alignment of the entire set of items within it".
With that, it seems that if there is excess space on the cross axis within the flex container, that you simply cannot apply align-items alongside align-content. Instead, align-content will always override align-items.
So my question: is there any combination of container or item CSS properties which will produce the behavior described in #1 and #2 requirements above?
Thank you.
To achieve the desired result, you can make use of a media query.
To make this work, remove the flex-wrap and align-content properties from the .flex-container element. We will nly add these properties on the .flex-container element at a particular width of the browser window.
For example, following media query
#media (max-width: 450px) {
.flex-container {
flex-wrap: wrap;
align-content: center;
}
}
will make a flex container a multi-line flex container when the width of the browser window equal to or smaller than 450px. We also add align-content: center to make sure that the flex-lines are aligned in the center of the flex container.
This ensures that for a width greater than 450px, flex container has only one flex-line and flex items are aligned at the start of that single flex-line. For a width smaller than or equal to 450px, we make the flex container a multi-line flex container and align those flex-lines at the center of the flex container using align-content: center.
Working Demo
* {
box-sizing: border-box;
font-size: 1.5rem;
}
html {
background: #b3b3b3;
padding: 5px;
}
body {
background: #b3b3b3;
padding: 5px;
margin: 0;
}
.flex-container {
height: 500px;
background: white;
padding: 10px;
border: 5px solid black;
display: flex;
justify-content: space-evenly;
align-items: flex-start;
}
.flex-container div {
color: white;
padding: 10px;
border: 5px solid black;
margin: 10px;
}
.item-1 { background: #ff7300; }
.item-2 { background: #ff9640; }
.item-3 { background: #ff9640; }
.item-4 { background: #f5c096; }
.item-5 { background: #d3c0b1; }
.item-6 { background: #d3c0b1; }
#media (max-width: 450px) {
.flex-container {
flex-wrap: wrap;
align-content: center;
}
}
<div class="flex-container">
<div class="item-1">1</div>
<div class="item-2">2</div>
<div class="item-3">3</div>
<div class="item-4">4</div>
<div class="item-5">5</div>
<div class="item-6">6</div>
</div>
I got stuck stacking the elements inside the flex. I want these arrows to be aligned within this square as in the design image.
This is how it looks is code. It's examle of html and css file.
// This is CSS code picture were missed
.external-login {
display: flex;
flex-direction: row;
justify-content: flex-start;
margin-right: 20px;
height: 64px;
text-align: center;
padding: 21px 30.5px 21px 30px;
border-radius: 8px;
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.04);
border: solid 1px #dee2eb;
background-color: #ffffff;
h3 {
color: #525458;
}
}
.row {
width: 100%;
height: auto;
display: flex;
flex-direction: column;
margin: 10px 0;
}
.google-image {
background-image: url($url);
background-repeat: no-repeat;
width: 20px;
margin-right: 15px;
}
.facebook-image {
background-image: url('https://www.flaticon.com/svg/static/icons/svg/145/145802.svg');
background-repeat: no-repeat;
width: 20px;
margin-right: 15px;
}
.carat-image {
background-image: url($url);
background-repeat: no-repeat;
width: 20px;
margin-right: 15px;
}
<!-- This is HTML code -->
<div class="row external-login">
<div class="google-image"></div>
<h3>Continue with Google</h3>
<div class="carat-image">
</div>
</div>
<div class="row external-login">
<div class="facebook-image"></div>
<h3>Continue with Facebook</h3>
<div class="carat-image">
</div>
</div>
These pictures were missed in code snippet below.
EDIT
I've changed
justify-content: flex-start;
to
justify-content: space-between;
and got like this, not bad but text is not align.
Try adding height: fit-content; and align-self: center to your .carat-image class.
Simple change will fix the issue. add
height: fit-content
align-self: center
.carat-image {
background-image: url($url);
background-repeat: no-repeat;
width: 20px;
height: fit-content;
align-self: center;
}
To vertically center the elements which are wrapped by flex div, try align-items: center. Also, to align a particular child to the right, Use justify-self: end. Use flex-direction: column to place the elements inline. To fix the width, add flex: 1 to h3
// This is CSS code picture were missed
.external-login {
display: flex;
flex-direction: row;
justify-content: flex-start;
margin-right: 20px;
height: 64px;
text-align: center;
padding: 21px 30.5px 21px 30px;
border-radius: 8px;
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.04);
border: solid 1px #dee2eb;
background-color: #ffffff;
h3 {
color: #525458;
}
}
.row {
width: 100%;
height: auto;
display: flex;
align-items: center;
margin: 10px 0;
}
.google-image {
background-image: url($url);
background-repeat: no-repeat;
width: 20px;
margin-right: 15px;
}
.facebook-image {
background-image: url($url);
background-repeat: no-repeat;
width: 20px;
margin-right: 15px;
}
.carat-image {
background-image: url($url);
background-repeat: no-repeat;
width: 20px;
margin-right: 15px;
align-self: center;
justify-self: right;
flex-basis: 50px;
height: fit-content;
}
h3 {
flex:1
}
.content .row:nth-child(2) .carat-image {
background-color: red;
justify-content: flex-end;
}
.content .row:nth-child(3) .carat-image {
background-color: red;
justify-content: flex-end;
}
<!-- This is HTML code -->
<div class="row external-login">
<div class="google-image">.</div>
<h3>Continue with Google</h3>
<div class="carat-image"> ></div>
</div>
<div class="row external-login">
<div class="facebook-image"></div>
<h3>Continue with Facebook</h3>.
<div class="carat-image">></div>
</div>
This question already has answers here:
How can I center text (horizontally and vertically) inside a div block?
(27 answers)
Closed 2 years ago.
I have a flexbox container with 3 flex items
the text of the two outer items should be at the center point of each item
so far the text appears on the top of
using align-items: center;
recommended in How to vertically align text inside a flexbox?
on the container just squished the divs to one line, ignoring the heigth of the container.
how to center the text at the center of each div ?
body {
margin: 0;
}
.file_upload-container {
display: flex;
margin: 20px;
height: 200px;
/*align-items: center;*/
justify-content: center;
}
.drop-zone_main {
color: #cccccc;
border: 4px dashed #009578;
border-radius: 10px;
}
.upload_spacer {
background-color: #00ffb7;
flex-basis: 200px;
}
.drop-zone_second {
color: #cccccc;
border: 4px dashed #009578;
border-radius: 10px;
flex-basis: 300px;
}
input {
display: none;
}
<div class="file_upload-container">
<div class="drop-zone_main">Drop MainFile here or click to upload</div>
<input class="input_main" type="file" name="upload_mainfile">
<div class="upload_spacer"></div>
<div class="drop-zone_second">Drop second file here or click to upload</div>
<input class="input_second" type="file" name="upload_secondfile">
</div>
You can wrap your input in a div, so it gets aligned with its siblings, and use display: flex to align the inner content:
body {
margin: 0;
}
.file_upload-container {
display: flex;
margin: 20px;
height: 200px;
/*align-items: center;*/
justify-content: center;
}
.drop-zone_main {
color: #cccccc;
border: 4px dashed #009578;
border-radius: 10px;
}
.upload_spacer {
background-color: #00ffb7;
flex-basis: 200px;
}
.drop-zone_second {
color: #cccccc;
border: 4px dashed #009578;
border-radius: 10px;
flex-basis: 300px;
}
.input-wrap {
display: flex;
align-items: center;
}
<div class="file_upload-container">
<div class="drop-zone_main">Drop MainFile here or click to upload</div>
<div class="input-wrap">
<input class="input_main" type="file" name="upload_mainfile">
</div>
<div class="upload_spacer"></div>
<div class="drop-zone_second">Drop second file here or click to upload</div>
<div class="input-wrap">
<input class="input_second" type="file" name="upload_secondfile">
</div>
</div>
You need to correct the css rules :
.drop-zone_main {
color: #cccccc;
border: 4px dashed #009578;
border-radius: 10px;
justify-content: center;
align-items: center;
display: flex;
}
.drop-zone_second {
color: #cccccc;
border: 4px dashed #009578;
border-radius: 10px;
flex-basis: 300px;
justify-content: center;
align-items: center;
display: flex;
}
This question already has answers here:
Can't get vertical scrollbar with justify-content: flex-end
(2 answers)
Closed 4 months ago.
I'm trying to "stack" divs on top of each other as new div boxes (.dialog-box) are added to the parent container (.dialog-container).
To stack the elements, I'm using the following on the parent:
display: flex;
flex-direction: column;
justify-content: flex-end;
I'd like to scroll that container for .dialog-boxs that are overflowing, yet with flex-box the overflow-y: scroll; is not scrolling.
Two boxes: (fill up container from bottom to top as expected):
Six boxes (expands outside the height of the container and should scroll):
SCSS:
.dialog-container {
border: 4px solid rgba(255, 255, 255, .4);
border-radius: 5px;
width: 300px;
height: 340px;
position: relative;
top: -50px;
margin: 0 auto;
overflow-y: scroll;
z-index: 5;
display: flex;
flex-direction: column;
justify-content: flex-end;
.dialog-box {
width: 90%;
background: $dialogBoxWhite;
margin-bottom: 20px;
border-radius: 8px;
border: 5px solid $dialogBoxGreenBorder;
color: $dialogBoxGreenFont;
text-align: center;
margin-left: 5px;
padding: 5px;
display: inline-block;
p {}
}
}
HTML:
<div class="dialog-container">
<div class="dialog-box"></div>
<div class="dialog-box"></div>
<div class="dialog-box"></div>
<div class="dialog-box"></div>
<div class="dialog-box"></div>
<div class="dialog-box"></div>
</div>
You simply remove the
justify-content: flex-end;
Two boxes: (fill up container from bottom to top as expected):
for this you add below code to your scss file :
display: flex;
flex-direction: column-reverse;
justify-content: flex-start;
.dialog-container {
border: 4px solid rgba(0, 0, 0, .4);
border-radius: 5px;
width: 300px;
height: 350px;
position: relative;
margin: 0 auto;
overflow-y: scroll;
z-index: 5;
display: flex;
flex-direction: column-reverse;
justify-content: flex-start;
}
.dialog-box {
width: 90%;
background:white;
margin-bottom: 20px;
border-radius: 8px;
border: 5px solid green;
color: green;
text-align: center;
margin-left: 5px;
padding: 3px;
display: inline-block;
}
<div class="dialog-container">
<div class="dialog-box">Box 1</div>
<div class="dialog-box">Box 2</div>
<div class="dialog-box">Box 3</div>
<div class="dialog-box">Box 4</div>
<div class="dialog-box">Box 5</div>
<div class="dialog-box">Box 6</div>
<div class="dialog-box">Box 7</div>
</div>
also show example in scroll-y working with flex-column
Try to change display: flex; to display: flex-box;
This will give you a scroll bar that actually scrolls. Additionally, your examples divs are all lacking closing tags.
https://jsfiddle.net/Lpw0726j/23/
<div class="dialog-container">
<div class="dialog-box">9</div>
<div class="dialog-box">8</div>
<div class="dialog-box">7</div>
<div class="dialog-box">6</div>
<div class="dialog-box">5</div>
<div class="dialog-box">4</div>
<div class="dialog-box">3</div>
<div class="dialog-box">2</div>
<div class="dialog-box">1</div>
</div>
.dialog-container {
border: 4px solid rgba(255, 255, 255, .4);
border-radius: 5px;
width: 300px;
height: 340px;
position: relative;
top: 50px;
margin: 0 auto;
z-index: 5;
display: flex-box;
flex-direction: column;
justify-content: flex-end;
overflow-y: auto;
background-color: teal;
.dialog-box {
width: 90%;
background: black;
margin-bottom: 20px;
border-radius: 8px;
border: 5px solid red;
color: green;
text-align: center;
margin-left: 5px;
padding: 5px;
display: inline-block;
p {}
}
}