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/
Related
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
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/
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; }
I have searched extensively and seen numerous examples on how to vertical-align text using the vertical-align property and the line-height property. However, all my efforts seem to bear no fruit as I am unable to get my text to align vertically. How do I do vertically align text to be centered? The height properties are not fixed so I can't use line-height.
HTML
<nav>
<ul>
<li>Login</li>
<li>Register</li>
<li>Programmes Offered</li>
</ul>
</nav>
CSS
nav
{
height: 30%;
width: 100%;
}
nav ul
{
height: 100%;
margin: 0px;
}
nav ul li
{
height: 33%;
width: 100%;
vertical-align: middle;
}
you may use a pseudo element displayed as an inline-box using full height of li and vertical-aligned to midlle. DEMO
body, html {
height:100%; /* needed for demo */
}
nav {
height: 50%; /* increased for demo */
width: 100%;
}
nav ul {
height: 100%;
margin: 0px;
}
nav ul li {
height: 33%;
box-shadow:inset 0 0 0 1px; /* show me li , for demo */
}
nav ul li:before {
content:'';
height:100%;
display:inline-block;
vertical-align: middle;
}
edit
If you also reset display and vertical-align on <a>, links can be spread on a few lines (demo below):
body,
html {
height: 100%;
}
nav {
height: 70%; /* height set for snippet demo purpose, could be really too much */
width: 100%;
}
nav ul {
height: 100%; /* will follow height, inherit height value , set in nav if any avalaible */
margin: 0px;
}
nav ul li {
height: 33%;
/* see me and my center*/
box-shadow: inset 0 0 0 1px;
background:linear-gradient(to top, rgba(0,0,0,0.1) 50%, rgba(0,0,0,0.2) 50%);
}
nav ul li:before {
content: '';
height: 100%;
display: inline-block;
vertical-align: middle;
}
a {
display: inline-block;
vertical-align: middle;
}
<nav>
<ul>
<li>Login
</li>
<li>Register
</li>
<li>Programmes<br/> Offered
</li>
</ul>
</nav>
If you can use flexbox, you can get away with the following css:
CSS
ul li a {
display:flex; // Enables flexbox
justify-content: center; // Center on main axis
align-items: center; // Center on cross axis
}
Update ( using auto margins )
You can also do it like this:
ul li { display:flex }
li a { margin: auto }
/* These rules are just to make things easier to see. */
nav {
margin: 0 auto;
margin-top: 5rem;
border: 1px dotted green;
width: 100%;
}
ul {
padding: 0;
display: flex;
justify-content: space-around;
}
li {
height: 3rem;
padding: 2rem;
border: 1px dotted red;
}
/* Here are what I am trying to illustrate */
ul li {
display: flex;
}
a {
margin: auto;
/* or adjust them one by one, by targeting
the ones you want and setting
using each margin like this:
margin-top: auto;
margin-right: auto;
margin-bottom: auto;
margin-left: auto;
*/
}
<nav>
<ul>
<li>Login</li>
<li>Register</li>
<li>Programmes Offered</li>
</ul>
</nav>
vertical-align aligns inline elements with their siblings.. unless used in a table cell.
I don't think there's a by-the-book way of vertically aligning.. but this should work:
D E M O
nav ul li
{
background:#f1f1f1;
height: 33%;
width: 100%;
border-top:1px solid #e0e0e0;
}
nav ul li a
{
display:block;
position:relative;
top:50%;
-webkit-transform:translate(0,-50%);
-moz-transform:translate(0,-50%);
transform:translate(0,-50%);
}
Have you tried with
nav ul li a
{
height: 33%;
width: 100%;
vertical-align: 5px; //(you can make it 10px or -10px, just so it fits your style)
}
Your text is within the a tag, so adding a in the css may solve your problem :)