Is there any way to make the width of tabs buttons flexible ?
for example this my normal tabs
I want to make the tabs width such as this image
I could show the full text by this css code
.tab-button {
min-width: fit-content;
}
but the result was such as the this picture
Maybe try something like this:
.tabs{
border: 1px solid black;
width: 300px;
display: flex;
justify-content: space-between;
}
.single-tab{
padding: 10px 20px;
border: 1px solid gray;
flex-grow: 1;
}
<div class="tabs">
<div class="single-tab">
Tab1
</div>
<div class="single-tab">
Tab2222222
</div>
<div class="single-tab">
Tab3
</div>
</div>
Related
I have a flex container with multiple flex items, 2 of which I need to flex grow based on the text so all divs space out the same way.
I was able to accomplish this like this:
<div class="outer product-grid">
<div class="inner product-component">
<a class="image"><img class="product-image" /></a>
<a class="upper-text title">
Short Upper Text
</a>
<div class="lower-text author">
Short Lower Text
</div>
<h5 class="price"> <span>price</span> </h5>
</div>
<div class="inner">
<a class="image"><img class="product-image" /></a>
<a class="upper-text">
Long Upper Text - Long Upper Text
</a>
<div class="lower-text">
Long Lower Text - Long Lower Text
</div>
<h5 class="price"> price </h5>
</div>
<div class="inner">
<a class="image"><img class="product-image" /></a>
<a class="upper-text">
Even Longer Upper Text - Even Longer Upper Text
</a>
<div class="lower-text">
Even Longer Lower Text - Even Longer Lower Text
</div>
<h5 class="price"> price </h5>
</div>
</div>
SCSS
.outer {
display: flex;
flex: wrap;
.inner {
border: 5px solid yellow;
display: flex;
text-align: center;
margin-right: 1em;
margin-bottom: 1.5em;
width: 200px;
flex-direction: column;
font-size: 1.00em;
a.image{
border: 5px solid orange;
img {
width: em(160px);
height: em(210px);
}
}
a.upper-text {
border: 5px solid red;
flex: auto;
margin: 0.2em auto;
line-height: normal;
}
.lower-text {
border: 5px solid green;
flex: auto;
}
}
}
My upper-text and lower-text need to be different sizes. When I put a font-size into either of those classes, I lose the whole flex grow.
You can try on my codepen https://codepen.io/mxdavis/pen/KxxmKE by inserting font-size: 20px; to between line 24 and 25 (in the a.upper-text class) and you will see the red border no longer ends at the same point like it does when the font is not adjusted. https://codepen.io/mxdavis/pen/dqqzMy
I need the even sized boxes, and the adjusted font size. Flex seems to be the easiest route since upper-text and lower-text cannot be predicted.
Any advice is greatly appreciated.
Thanks!
Update: I realize now if I play with the text sizes and don't make upper and lower texts equal even my first code snippet doesn't work, which is probably why a font increase is throwing it off. Is there a way to accomplish this or should I just set a fixed height and then click to reveal more? https://codepen.io/mxdavis/pen/KxxedE
I was able to accomplish this (for the most part) using flex and grid together.
I still have to guestimate a max template row for unpredictable text but at least I can guarantee the starting points with this.
https://codepen.io/mxdavis/pen/KxxedE
Here's the new css with the .inner now using display: grid instead of flex.
.outer {
display: flex;
flex-flow: row wrap;
.inner {
border: 5px solid yellow;
display: grid;
grid-template-rows: 210px minmax(max-content, 3fr) minmax(max-content, 2fr) 30px;
grid-row-gap: 5px;
text-align: center;
margin-right: 1em;
margin-bottom: 1.5em;
width: 150px;
font-size: 1.00em;
a.image{
border: 5px solid orange;
img {
width: em(160px);
height: em(210px);
}
}
a.upper-text {
border: 5px solid red;
line-height: normal;
}
.lower-text {
border: 5px solid green;
}
.price {
border: 5px solid blue;
margin: 0;
}
}
}
I still would be interested to see how to rely ONLY on the most content for that row, without using tables.
This question already has answers here:
Is it possible for flex items to align tightly to the items above them?
(5 answers)
Make a div span two rows in a grid
(2 answers)
Closed 5 years ago.
I'm trying to float two elements at the right of a "figure" element using flex but it end up floating just div1 at the right of figure and div2 is moved bellow, if I make div1 and div2 narrow enough, they are floated inline at the right of figure.
This is the CSS:
.container {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
}
Desired Result:
Actual Result:
How it works?
First, you make a flex-container (flexc in this case) and apply the display:flex property on it which aligns the elements by default in row alignment. If you want an element to preserve its dimensions set it to flex:0 0 auto; else you can make use of flex:1; which shrinks or grows as the browser is resized.
Then to align the contents in column (div1 and div2) you can just wrap then in a different container and since div isn't an inline container, and the flex property doesn't have any effect on any other than the direct children of the flex parent, they are aligned in seperate lines.
.flexc {
display: flex;
justify-content: flex-start;
}
#fig {
flex: 0 0 auto;
width: 200px;
height: 200px;
background: gray;
text-align: center;
color: white;
margin: 10px;
border: 2px solid black;
}
#d1,
#d2 {
width: 200px;
height: 50px;
background: purple;
text-align: center;
color: white;
margin: 10px;
border: 2px solid black;
}
<div class="flexc">
<div id="fig">Figure</div>
<div class="col">
<div id="d1">div1</div>
<div id="d2">div2</div>
</div>
</div>
Without altering the html:
.flexc {
display: flex;
flex-direction:column;
position:relative;
}
#fig {
flex: 0 0 auto;
width: 200px;
height: 200px;
background: gray;
text-align: center;
color: white;
margin: 10px;
border: 2px solid black;
}
#d1,
#d2 {
position:absolute;
left:250px;
width: 200px;
height: 50px;
background: purple;
text-align: center;
color: white;
margin: 10px;
border: 2px solid black;
}
#d2{
top:70px;
}
<div class="flexc">
<div id="fig">Figure</div>
<div id="d1">div1</div>
<div id="d2">div2</div>
</div>
Not sure what your HTML looks like, but display: flex is best used on the container wrapping all the elements you want aligned. Imagine it to be the largest box that you put smaller boxes inside.
Codepen example demonstrating this: https://codepen.io/corviday/pen/VyYdar
Following this hierarchy with .container as your largest box, since you want two columns, you can divide it further into two smaller boxes (.left in red and .right in blue in this case).
From there you would need to group div1/div2 together to float the way you'd like, and would be the items that fill the box .right.
You can use Bootstrap to resolve or put div1 and div2 in one div main to drop div main
Bootstrap exemple
<div class='container'>
<div class="col-md-12">
<div class="col-md-6">
1 text
</div>
<div class="col-md-6">
<div class="col-md-6">
2 text
</div>
<div class="col-md-6">
3 text
</div>
</div>
</div>
</div>
I think the best layout engine to use for your use case is hinted at in your description of the problem: Floats.
Here is a solution that doesn't require you to alter your html.
<div class="container">
<div class="medium-box">figure</div>
<div class="small-box">div 1</div>
<div class="small-box">div 2</div>
</div>
.container{
width: 500px;
}
.medium-box {
height: 200px;
width: 200px;
margin: 10px;
background: grey;
float:left
}
.small-box {
float:left;
height: 30px;
width: 200px;
background: blue;
margin: 10px;
}
https://codepen.io/stacyvlasits/pen/aVPZbY
I am using something similar to css wizardry grids. I am trying to align horizontal borders across seperate grid items. The image at the top is always the same size. For the most part the seperate borders line up However because the grid works in percentages that are finer than a pixel, at some screen sizes the borders dis-align (see Blog Article 3 below).
I can't just use a <hr> because on smaller screensizes the grid condenses to to on a row and then one on a row. I need a responsive solution that doesn't use javascript. I don't necessarily need a code example of how to do this but an approach.
You can consider display:flex
.container {
display: flex;
justify-content: space-between;
width: 50%;
}
.container .item {
background: green;
border: 1px solid black;
width: 50px;
height: 50px;
}
.bb {
display: flex;
justify-content: space-between;
border-top: 1px solid black;
padding: 10px;
border-bottom: 1px solid black;
margin-top: 20px;
width: 50%;
}
<div class="container">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
<div class="bb">
<div>
item1
</div>
<div>
item2
</div>
<div>
item3
</div>
</div>
Hope this helps
I have a horizontal navigation, which is somewhat long, and needs to be rearranged for narrow displays. I used flexbox to make it reflow into multiple rows.
But with many rows, the division between the navigation items is not so obvious. I tried giving them a border on top, and it kinda works - but the border is, of course, only visible over the individual navigation options, not creating a nice dividing line between all flexbox rows.
Please view the snippet full page, there is a display problem when it's viewed within the post. Or use this fiddle. You may have to make your browser window narrow to see the navigation in multi row.
header {
height: 3em;
background-color: #fff;
}
#main {
height: 9em;
background-color: #5987d1;
}
footer {
height: 3em;
background-color: #a8a8a8;
border-top: 1px solid #0047b9;
}
ul.horizontal-nav {
background: rgba(72, 72, 72, 1);
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-ms-flex-direction: row;
flex-direction: row;
align-items: center;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-shadow: 0px 2px 1px 0px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 2px 1px 0px rgba(0,0,0,0.75);
box-shadow: 0px 2px 1px 0px rgba(0,0,0,0.75);
list-style: none;
}
li.NavigationLi2, li.selected-branch-root {
padding: 0.75em 1em;
display: block;
border-top: 1px solid #2662c3;
}
li.selected-branch-root {
background: #2662c3;
}
li.NavigationLi2 > a, li.NavigationLi2 > a:visited {
color: #e6eeff;
text-decoration: none;
-ms-word-wrap: nowrap;
word-wrap: nowrap;
}
li.selected-branch-root > a, li.selected-branch-root > a {
color: #fff;
text-decoration: none;
-ms-word-wrap: nowrap;
word-wrap: nowrap;
}
<header>
</header>
<nav class="horizontal-nav">
<ul class="horizontal-nav">
<li class="selected-branch-root">Search
</li>
<li class="NavigationLi2">My models
</li>
<li class="NavigationLi2">Account
</li>
<li class="NavigationLi2">Management
</li>
<li class="NavigationLi2">Administration
</li>
<li class="NavigationLi2">Help
</li>
</ul>
</nav>
<section id="main">
</section>
<footer>
</footer>
Here is what I do lets say I have a flexbox container with 3 divs inside
<div class="flex">
<div>
<h2>Free Shipping</h2>
</div>
<div>
<h2>Everything In Stock</h2>
</div>
<div>
<h2>Largest Inventory</h2>
</div>
</div>
What I am playing with is in order to make a line right in the middle of the 3 div's / flex items simply just add another flex item between the divs like this:
<div class="flex">
<div>
<h2>Free Shipping</h2>
</div>
<img src="lib/xxx/img/ydivider.png" alt="divider"/>
<div>
<h2>Everything In Stock</h2>
</div>
<img src="lib/xxx/img/ydivider.png" alt="divider"/>
<div>
<h2>Largest Inventory</h2>
</div>
</div>
You can now see we have 5 flex items instead of 3. The 2 additional flex items I find are spaced correctly to be in the middle. Keep in mind if you go to to a breakpoint where you display as columns you will need a horizontal img at that point.
Assuming your philosophy allows you to: 1) Use flebox instead or ul for navigation; and 2) insert tags in your html specifically for aesthetic purposes, then I have a sugestion.
Create a wrapping div to your elements and add to it the CSS you'd like to span the row (background, border, padding...), and add to it the property flex: 1. You might also want to add to it min-width: fit-content (or max-content) to keep it from breaking lines.
I've added below the markup that would show it before and after the quick fix.
#flex-container {
display: flex;
flex-wrap: wrap;
}
#flex-container > div {
padding: 8px 24px;
border-bottom: 4px solid orange;
background: purple;
}
.flex-menu {
font-size: 13px;
font-family: sans;
color: white;
}
.fix {
flex: 1;
min-width: fit-content;
}
.force-break {
max-width: 340px;
}
<div class="force-break">
<h2>Plain</h2>
<div id='flex-container'>
<div class="flex-menu">Search</div>
<div class="flex-menu">My models</div>
<div class="flex-menu">Account</div>
<div class="flex-menu">Management</div>
<div class="flex-menu">Administration</div>
<div class="flex-menu">Help</div>
</div>
<h2>With fix</h2>
<div id='flex-container'>
<div class="fix"><div class="flex-menu">Search</div></div>
<div class="fix"><div class="flex-menu">My models</div></div>
<div class="fix"><div class="flex-menu">Account</div></div>
<div class="fix"><div class="flex-menu">Management</div></div>
<div class="fix"><div class="flex-menu">Administration</div></div>
<div class="fix"><div class="flex-menu">Help</div></div>
</div>
</div>
Let's say I have a div, 100px wide, and a variable number (from 1 to 6) of elements, 10px wide, inside that div.
How can I equally space them so that:
if there is 1 element inside, there will be no additional spacing
if there are from 2 to 6 elements, spacing between each would be 80px (for 2), 35px (for 3), 20px (for 4), etc...
The first item will always be placed at the most left position, without padding, and the last item will always be placed at the most right position, also without padding.
I'm not concerned about IE, so this could be CSS3. Anyways, I am concerned about javascript. I know this would be a 1 liner in JS, but I certainly want to avoid it if possible, so please refrain answering if you're going to post a JS solution.
Regards
Edit:
Example: http://codepen.io/anon/pen/wbiFA
HTML
<div class="container">
<div class="item">
</div>
<div class="item">
</div>
<div class="item">
</div>
<div class="item">
</div>
</div>
CSS:
.container {
width: 900px;
border: 1px solid red;
display: flex;
justify-content: space-between;
height: 50px;
}
.item {
border: 1px solid blue;
flex-basis: auto;
width: 171px
}
Ok, did it :)
You don't need CSS3 features like flexible boxes. The following CSS2.1 features are enough:
text-align:justify
display: inline-block
::after pseudo-element
.container {
width: 900px;
border: 1px solid red;
height: 50px;
text-align: justify;
}
.container:after {
content: '';
width: 100%;
display: inline-block;
}
.item {
border: 1px solid blue;
width: 171px;
height: 100%;
display: inline-block;
}
<div class="container">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
Using Flexbox i managed a close enough result:
http://codepen.io/coljung/pen/bufmh
.container {
border: 1px solid red;
width:1000px;
height:100px;
display: flex;
justify-content: space-around;
}
.item {
border: 1px solid blue;
background:red;
width:100px;
height:100%;
}
Now, it doesnt achieve the exact padding you are looking for. In that case you have to do it manually for every single case.