I am trying to align the items on a timeline bar using flexbox. I want to be able to have the first circle start at the beginning of the line and the last circle to be at the end of the line with the center item being centered. Is this possible using flexbox? Right now I am using
ul {
display: flex;
}
li {
align-items: center;
}
align-items applies to the parent element and controls the alignment on the cross-axis of your flexbox. In you case, you need justify-content: space-between;, again, applied to the parent element like so:
ul {
display: flex;
justify-content: space-between;
}
You can check out a very detailed Flexbox breakdown on CSS Tricks to learn more about it.
Sure you can do that with Flexbox (Flexbox is life :P).
Just the ul needs css:
ul {
display: flex;
justify-content: space-between
}
You need to check this amazing post - A Complete Guide to Flexbox
Using flexbox and absolutely positioned elements you can achieve this:
*,
*:before,
*:after {
box-sizing: border-box;
}
ul {
margin: 0;
padding: 0;
list-style-type: none;
display: flex;
position: relative;
}
ul:before {
content: "";
position: absolute;
left: 0;
width: 100%;
top: 20px;
border-top: 1px solid #aaa;
}
li {
margin: 0;
padding: 0;
text-transform: uppercase;
text-align: center;
flex: 1 0 0;
margin-top: 40px;
position: relative;
}
li:before {
content: "";
position: absolute;
top: 0px;
left: 50%;
transform: translate(-50%, -150%);
width: 20px;
height: 20px;
border: 2px solid yellow;
border-radius: 100%;
background-color: #fff;
}
li.selected:before {
background-color: yellow;
}
<ul>
<li class="selected">Create account</li>
<li>Understand your role</li>
<li>Share stories</li>
</ul>
You can use the property align-self on each item to do so, the problem with using it on the parent element, is that the child items will be aligned to what the parent says. So align-self:flex-start for the first item, align-self:center on the second item and align-self:flex-end on the last one (list items that is).
Useful guide about flex: http://jonibologna.com/flexbox-cheatsheet/
Related
I want to show a list of tags at the bottom of the screen and if they don't all fit, I want it to wrap so that it's the first line that is the shortest - not the last line.
Once the bottom line is full, I would prefer if the next item added would be what would then appear above instead of below. But if it's easier to make the first item move up that would be ok too.
This example should make it clear:
div {
position: fixed;
bottom: 0%;
right: 0%;
line-height: 1.4;
text-align: right;
}
span {
border-radius: 5px;
padding: 1px 3px;
font-family: sans-serif;
color: white;
background-color: #7B68EE;
}
<div>
<span>Apple</span>
<span>Orange</span>
<span>Banana</span>
<span>Pear</span>
<span>Apricot</span>
<span>Cranberry</span>
<span>Blackcurrant</span>
<span>Raspberry</span>
<span>Strawberry</span>
<span>Plum</span>
<span>Tomato</span>
<span>Lemon</span>
<span>Lime</span>
<span>Coconut</span>
</div>
This can be achieved by adding flexbox styles to the parent container like so:
div {
position: fixed;
bottom: 0%;
right: 0%;
line-height: 1.4;
text-align: right;
/* flexbox styles */
display: flex;
flex-wrap: wrap-reverse;
justify-content: flex-end;
}
span {
border-radius: 5px;
padding: 1px 3px;
font-family: sans-serif;
color: white;
background-color: #7B68EE;
/* margin to separate tags */
margin: 0.1em;
}
<div>
<span>Apple</span>
<span>Orange</span>
<span>Banana</span>
<span>Pear</span>
<span>Apricot</span>
<span>Cranberry</span>
<span>Blackcurrant</span>
<span>Raspberry</span>
<span>Strawberry</span>
<span>Plum</span>
<span>Tomato</span>
<span>Lemon</span>
<span>Lime</span>
<span>Coconut</span>
</div>
Try using display:flex, also use flex-wrap:wrap-reverse in order to wrap the elements the way you want.
div {
display: flex;
flex-wrap: wrap-reverse;
position: fixed;
bottom: 0%;
right: 0%;
line-height: 1.4;
text-align: right;
}
span {
border-radius: 5px;
padding: 1px 3px;
font-family: sans-serif;
color: white;
background-color: #7B68EE;
}
Using flex property to align like this,
div {
display: flex;
flex-wrap: wrap-reverse; // reverse the wrapping
flex-direction: row-reverse; // reverse the row
}
also add some margin to span
span{
margin:3px;
}
flex-wrap - The flex-wrap CSS property sets whether flex items are forced onto one line or can wrap onto multiple lines. If wrapping is allowed, it sets the direction that lines are stacked.
flex-direction: row-reverse - Work in a left-to-right language such as English. If you are working in a right-to-left language like Arabic then row would start on the right, row-reverse on the left.
Result:-
LIVE DEMO
div {
position: fixed;
bottom: 0%;
right: 0%;
line-height: 1.4;
display: flex;
flex-wrap: wrap-reverse;
flex-direction: row-reverse;
}
span {
border-radius: 5px;
padding: 1px 3px;
font-family: sans-serif;
color: white;
background-color: #7B68EE;
margin:3px;
}
<div>
<span>Apple</span>
<span>Orange</span>
<span>Banana</span>
<span>Pear</span>
<span>Apricot</span>
<span>Cranberry</span>
<span>Blackcurrant</span>
<span>Raspberry</span>
<span>Strawberry</span>
<span>Plum</span>
<span>Tomato</span>
<span>Lemon</span>
<span>Lime</span>
<span>Coconut</span>
</div>
I have a problem with positioning and centering the round shape in the horizontal list cell.
I've a class for my cicrle:
.user-logo {
background-color: #4CAF50;
border: none;
border-radius: 50%;
height: 50px;
width: 50px;
text-align: center;
}
And class for the list:
.navbar-list {
#extend ul;
height: $navbar-height;
float: right;
li {
float:left;
}
a {
display: block;
margin: 0 auto;
padding-left: 5px;
padding-right: 5px;
}
li a:hover {
background-color: #111;
}
}
I'm working with react so class usage looks like this:
<ul className='navbar-list'>
<li><NavLink to='/'>New Project</NavLink></li>
<li><NavLink to='/'>Log Out</NavLink></li>
<li><NavLink to='/' className='user-logo'>NN</NavLink></li>
</ul>
How can I adjust the position of my circular shape inside a cell? For now, the text of my Navbar is well displayed - in the middle of every cell (even the text for my circle), but my circle is still aligned to the upper left corner of the cell.
You can use below CSS code:
.user-logo {
background-color: #4caf50;
border: none;
border-radius: 50%;
height: 50px;
width: 50px;
display: flex;
justify-content: center;
align-items: center;
}
.navbar-list {
height: 50px;
justify-content: flex-end;
display: flex;
align-items: center;
}
.navbar-list li {
list-style-type: none;
}
.navbar-list li a {
padding-left: 5px;
padding-right: 5px;
}
.navbar-list li a:hover {
background-color: #111;
}
One way is to make the parent element into a flexbox by doing:
li{ display: flex; }
For more info on flexbox css you can have a look here or other tutorials online.
Otherwise, make sure your circular shape has display: inline-block so that you can control its vertical positioning with margins and try to optimize with even top and bottom margins on the circular shape or top and bottom paddings on the parent element.
I've a button on the right side.
If I choose this button, a DIV opens with other elements.
It looks like:
[6x][5x][4x][3x][2x][1x][BUTTON]
What I want to achieve is that each element takes the width of the previous one and adds up to 50px.
<details>
<summary>CHA</summary>
<ul>
<li>ENG</li>
<li>FRA</li>
<li>ATA</li>
<li>AUT</li>
<li>BEL</li>
<li>BRA</li>
</ul>
</details>
summary {
position: absolute;
right: 0;
top: 0;
}
ul{
width: 100%;
right: 50px;
position: absolute;
}
ul li {
float: right;
margin-left: 1rem;
}
ul li a,
summary {
color: #fff;
display: flex;
width: 50px;
height: 100%;
justify-content: center;
align-items: center;
}
The problem here is that the element - ul li a dont get the full height.
By adding to the ul li a element a position absolute all are at the same position/place.
So I thought I can use the nth-of-type(x) css statement like:
ul li a:nth-of-type(n){
right:calc(50px+n)
}
Or somehow like that - I know that this is not the right syntax.
Is it possible, am I thinking wrong, how to?
Here is the PEN:
https://codepen.io/User-123456789/pen/MOzdLp
How can I do this sort of a gallery style layout with flex box?
I have a <ul> with <li> in them. The first <li> I want to be double size and have the rest of the items flow around it.
I can layout the items using flexbox with the following code, but when I go double size on the first item I can't figure out how to reflow the boxes to fit around it as pictured.
ul, li {
padding: 0;
margin: 0;
}
ul {
display: flex;
justify-content: flex-start;
list-style-type: none;
align-items: flex-start;
flex-wrap: wrap;
flex-direction: row;
}
ul > li {
width: 15rem;
height: 15rem;
order: 2;
}
ul > li.active {
width: 30rem;
height: 30rem;
order: 1;
}
I have some javascript that cycles through the <li> tags and adds the .active class. Using order: 1 I can move the currently active image to the first spot (the double-sized version).
I don' really know about flex, but you can do this with 'float'
ul, li {
padding: 0;
margin: 0;
}
ul {
}
ul > li {
width: 50px;
height: 50px;
background-color: black;
margin-right: 5px;
margin-bottom: 5px;
float: left
}
ul li:nth-child(1) {
width: calc( 50px * 2 + 5px);
height: calc( 50px * 2 + 5px);
}
https://jsfiddle.net/vcqp8an6/
I'm trying to center and unordered list perfectly with the title of my website the title on top with the UL elements centered underneath.
The problem is that it does center, but not perfectly aligned with the overhead title. It is slightly to the right.
Here is my code:
.title{
text-align: center;
}
nav{
display: block;
margin-left: auto;
margin-right: auto;
width: 50%;
background: blue;
}
li {
text-align: center;
display: inline-block;
list-style-type: none;
margin: 0;
padding: 0;
background: red;
}
ul {
padding: 0;
}
The slight right-side bias is because of the default padding the entire list gets, not the individual list items. Setting it to zero eliminates the unnecessary offset.
I have to guess the HTML, but most likely you have a <ul> inside your <nav> element. Use this CSS:
nav > ul { margin-left: 0; padding-left: 0; }