I'm trying to do a simple navbar, but the size of the border matches the size of the text and not its container's height. I'm trying to 'close' each text inside its own 'rectangle'. How do I achieve that?
.flex-r {
display: flex;
justify-content: space-around;
justify-items: center;
flex-wrap: nowrap;
gap: 1em;
align-items: center;
border: 1px solid black;
min-height: 40px;
}
.nav-item {
border-right: 1px solid black;
width: auto;
}
<div class='flex-r'><a class='nav-item'>Release</a><a class='nav-item'>Statistics</a><a class='nav-item'>Frequent releases</a></div>
You have the container set to min-height: 40px.
Add the same code to the items.
But here's a better overall solution that may work for you:
.flex-r {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1px; /* sets the dividing line width */
background-color: black; /* sets the dividing line color */
border: 1px solid black; /* sets the border around the container */
min-height: 40px;
}
.nav-item {
background-color: white; /* restores background color */
/* center the content */
display: flex;
justify-content: center;
align-items: center;
text-align: center;
}
<div class='flex-r'>
<a class='nav-item'>Release</a>
<a class='nav-item'>Statistics</a>
<a class='nav-item'>Frequent releases</a>
</div>
Related
I have a header div that looks like this in css:
.page-header {
display: flex;
flex-direction: row;
justify-content: space-between;
align-content: stretch;
align-items: center;
padding: 5px 5px 5px 20px
margin-left: auto;
margin-right: auto;
width: 100%
height: 40px;
}
and a border div under it:
.horizontal-line {
border-bottom: 1px solid red;
margin: auto;
}
My problem is that I can't use padding on the border to make it align with the header or change the margin to fixed numbers, because then it doesn't center.
How would i go about fixing this so that the border adjust to the same width as the header?
Can it be done in CSS only? The reason I ask is that the JS is a template (not ideal I know) and there are other versions on the site using the same template (none of them are using the border div).
I've tried using max-width and that works really good on the large version of the site. Problem with that is that when the page is shrunk it doesn't dynamically adjust the max-width :(
Appreciate any help that I could get :)
Maybe if you can add a container you can do something like this:
You can also add horizontal-line div inside the container and make it full 100% width and get the same result.
.container {
width: 60%;
height: 300px;
background-color: white;
border-bottom: 2px solid black;
}
.page-header {
display: flex;
flex-direction: row;
justify-content: space-between;
align-content: stretch;
align-items: center;
padding: 5px 5px 5px 20px
margin-left: auto;
margin-right: auto;
width: 100%;
height: 200px;
background-color: yellow;
}
<div class="container">
<div class="page-header"></div>
</div>
or put % on max-width and then when you resize screen it will resize this is not pretty i would rather choose to use container around it.
.page-header {
display: flex;
flex-direction: row;
justify-content: space-between;
align-content: stretch;
align-items: center;
padding: 5px 5px 5px 20px
margin-left: auto;
margin-right: auto;
/* width: 100%; */
max-width: 50%;
height: 200px;
background-color: yellow;
}
.horizontal-line {
max-width: 50%;
margin-top: 50px;
border-bottom: 2px black solid;
}
<div class="page-header"></div>
<div class="horizontal-line"></div>
There is a panel which have display: flex
.panel {
display: flex;
flex-wrap: nowrap;
justify-content: flex-end;
column-gap: 2rem;
overflow-x: auto;
overflow-y: hidden;
width: 100%;
background-color: red;
}
Other elements may appear in it, which are also display: flex; (now it's 1 and 2)
.filter {
display: flex;
flex-wrap: nowrap;
align-items: center;
background-color: #ccc;
outline: 1px solid green;
button {
flex-shrink: 0;
&:not(:last-of-type) {
margin-right: 0.5rem;
}
}
}
When overflowing, scrolling should appear. It appears, but the elements overlap each other.
If you add flex-shrink to them: 0; then the overlay disappears, but the horizontal scrolling disappears.
.filter {
flex-shrink: 0; // +
display: flex;
flex-wrap: nowrap;
align-items: center;
background-color: #ccc;
outline: 1px solid green;
}
How fix this issue?
You need to add an extra wrapper above the parent element and move the overflow properties with the wrapper. Also, to prevent folding the .panel should have an absolute width while you have relative.
.wrapper {
overflow-x: auto;
overflow-y: hidden;
}
.panel {
min-width: max-content;
display: flex;
justify-content: flex-end;
column-gap: 2rem;
background-color: red;
}
.filter {
display: flex;
gap: 0.275rem;
padding-left: 0.5rem;
align-items: center;
background-color: #ccc;
outline: 1px solid green;
}
button {
padding: 0.5rem 2.5rem 0.5rem 1rem;
}
<div class="wrapper">
<section class="panel">
<div class="filter">
Age
<button>35-39</button>
<button>40-44</button>
<button>45-49</button>
<button>50-54</button>
</div>
<div class="filter">
Status
<button>Active</button>
<button>Past Due</button>
<button>Trial</button>
<button>Default</button>
</div>
</section>
</div>
The image below is what I'm currently working with. I have a flex container taking up the whole width of the screen (a div with the red border), that contains two flex items: one being the white square, and the other being another flex container (with the blue border) containing the buttons.
What I'm trying to do is center the white square horizontally on screen, and have it so that when the window/screen is resized the button container div won't collide/come into the white square. I'm not sure how to go about this, so any help would be appreciated. My code is below the image.
<div class="middle-content-section">
<div class="drawing-pad-container"></div>
<div class="settings-container">
<button class="grid-toggle-button">Show grid</button>
<button class="grid-toggle-button">Hover to draw</button>
</div>
</div>
.middle-content-section {
margin-top: 50px;
display: flex;
gap: 50px;
width: 100%;
border: 1px solid red;
}
.settings-container {
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
gap: 20px;
border: 1px solid blue;
}
.drawing-pad-container {
height: 500px;
width: 500px;
background: rgb(255, 255, 255);
filter: drop-shadow(2px 2px 3px rgb(180, 180, 180));
transition: 0.3s;
display: grid;
grid-template-rows: repeat(30, 1fr);
grid-template-columns: repeat(30, 1fr);
flex: 0 0 auto;
}
If you are simply trying to centre the white square in the div all you really need are some margins.
margin: 0 auto;
So I modified my answer to hopefully better fit your request. It is a little hacky but does seem to work.
What I did was create one more container called items which holds both interior items. I then set an auto margin on the container to centre both the white box and then settings bar. The bar was given a fixed width of 100px and therefore I did a transform: translateX(100px) which will then shift everything over by 100px correcting for the width and therefore offset cause by the settings bar.
Below is a code snippet of the result with the change spaced out.
.middle-content-section {
margin-top: 50px;
display: flex;
width: 100%;
border: 1px solid red;
}
.items {
margin: 0 auto;
transform: translateX(100px);
gap: 50px;
display: flex;
}
.settings-container {
width: 100px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
gap: 20px;
border: 1px solid blue;
}
.drawing-pad-container {
height: 500px;
width: 500px;
background: rgb(255, 255, 255);
filter: drop-shadow(2px 2px 3px rgb(180, 180, 180));
transition: 0.3s;
display: grid;
grid-template-rows: repeat(30, 1fr);
grid-template-columns: repeat(30, 1fr);
flex: 0 0 auto;
}
<div class="middle-content-section">
<div class="items">
<div class="drawing-pad-container"></div>
<div class="settings-container">
<button class="grid-toggle-button">Show grid</button>
<button class="grid-toggle-button">Hover to draw</button>
</div>
</div>
</div>
ref: coryrylan.com
section {
width: 200px;
border: 1px solid #2d2d2d;
display: flex;
justify-content: center;
align-items: center;
}
<section>
<div>1</div>
<div>2</div>
<div>3</div>
</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>
Aanyone know the best way to align an "alt symbol" with "regular text" - can't seem to get these two to both be centered (or anything) without some hacky maneuvers.
I'm currently using CSS grid but I'm open to other solutions if they're easy and sustainable to implement.
display.jsx
<div onClick={props.toggle} className='data__item__header'>
<span className='data__item__header__bullet'>●</span>
<p className='data__item__header__title'>Clashes {props.index}</p>
</div>
display.scss
.data__item__header {
display: grid;
grid-template-columns: 20px 1fr;
line-height: 20px;
align-content: center;
grid-gap: 10px;
}
.data__item__header__bullet {
font-size: 36px;
color: $tomato;
border: 1px solid blue;
display:grid;
text-align: center;
}
.data__item__header__title {
border: 1px solid green;
}
Currently is:
Should be:
Add align-self: center and justify-self: center to the .data__item__header__bullet element, and also adjust the line height - see demo below:
.data__item__header {
display: grid;
grid-template-columns: 20px 1fr;
line-height: 36px; /*changed*/
/* align-content: center; */ /* not needed */
grid-gap: 10px;
}
.data__item__header__bullet {
font-size: 36px;
color: $tomato;
border: 1px solid blue;
display:grid;
text-align: center;
align-self: center; /* added */
justify-self: center; /* added */
}
.data__item__header__title {
border: 1px solid green;
}
<div class='data__item__header'>
<span class='data__item__header__bullet'>●</span>
<p class='data__item__header__title'>Clashes {props.index}</p>
</div>
Instead of using ● character which may give you alignment issues, you can use border-radius to give you a better bullet style - see demo below:
.data__item__header {
display: grid;
grid-template-columns: 20px 1fr;
grid-gap: 10px;
}
.data__item__header__bullet {
background: blue;
border-radius: 100%; /* added */
height: 10px; /* added */
width: 10px; /* added */
display:grid;
text-align: center;
align-self: center;
justify-self: center;
}
.data__item__header__title {
border: 1px solid green;
}
<div class='data__item__header'>
<span class='data__item__header__bullet'></span>
<p class='data__item__header__title'>Clashes {props.index}</p>
</div>