Flexbox layout, wrapping issues - html

Im trying to build a layout with large and small blocks.
The issue I am having is that I want block 4 and 5 to sit underneath 2 and 3. But in my fiddle they go on to a new line.
How can this be achieved?
.blocks{
list-style-type: none;
margin: 0;
display: flex;
flex-wrap: wrap;
}
li{
width: 25%;
}
li.large{
width: 50%;
}
img{
width: 100%;
}
<ul class="blocks">
<li class="large"><img src="http://placehold.it/350x250"></li>
<li><img src="http://placehold.it/350x250"></li>
<li><img src="http://placehold.it/350x250"></li>
<li><img src="http://placehold.it/350x250"></li>
<li><img src="http://placehold.it/350x250"></li>
<li><img src="http://placehold.it/350x250"></li>
</ul>


You need change HTML structure and wrap small li's in another li > ul.
ul {
list-style-type: none;
margin: 0;
display: flex;
flex-wrap: wrap;
padding: 0;
}
ul > li {
flex: 1;
}
ul ul li {
flex: 0 0 50%;
}
img {
width: 100%;
vertical-align: top;
}
<ul class="blocks">
<li class="large"><img src="http://placehold.it/350x250"></li>
<li>
<ul>
<li><img src="http://placehold.it/350x250"></li>
<li><img src="http://placehold.it/350x250"></li>
<li><img src="http://placehold.it/350x250"></li>
<li><img src="http://placehold.it/350x250"></li>
<li><img src="http://placehold.it/350x250"></li>
</ul>
</li>
</ul>

Related

How would I separate an item from a UL that is centered?

I am trying to achieve the following:
But what I am getting is this:
Here is my HTML (react JSX but is the same thing):
<div className="snavbarcontainer">
<div className="toplefticon">
<a class="test" href="#"><img src={topleft} alt="Testing Logo" /></a>
</div>
<div className="mainIcons">
<ul className="icons_ul">
<li><img src={ILookupPupils} alt="Pupil Lookup" /></li>
<li><img src={IMUsers} alt="Manage Users" /></li>
<li><img src={IHand} alt="Coming Soon" /></li>
<li><img src={IMAdmins} alt="Manage Admins" /></li>
<li><img src={IDash} alt="Dashboard" /></li>
<li><img src={IDB} alt="Dashboard" /></li>
</ul>
</div>
</div>
And my (S)CSS:
body {
//! background-color: red; - DEBUGGING ONLY!
margin: 0
}
.snavbarcontainer {
background-color: black;
width: 3.5em;
height: 100vh;
position: fixed;
display: flex;
flex-direction: column;
align-items: center;
}
.icons_ul {
text-decoration: none;
list-style-type: none;
padding: 0;
li /* Adds property to EACH LI, not the UL itself. */{
margin: 1em 0;
}
}
.icons_ul {
justify-content: center;
}
.toplefticon {
justify-content: flex-start;
}
I cannot find out for the life of me how to do this, whether with flexbox or something else!
Thanks for your answers,
Henry

.snavbarcontainer {
background-color: black;
width: 3.5em;
height: 100vh;
position: fixed;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.icons_ul {
text-decoration: none;
list-style-type: none;
padding: 0;
}
.icons_ul li{
margin: 1em 0;
}
.icons_ul {
justify-content: center;
}
.toplefticon {
position: absolute;
top: 0;
left: 5px;
transform: translateX(-50%);
margin-top: 25%;
}
<div class="snavbarcontainer">
<div class="toplefticon">
<a class="test" href="#"><img src={topleft} alt="Testing Logo" /></a>
</div>
<div class="mainIcons">
<ul class="icons_ul">
<li><img src={ILookupPupils} alt="Pupil Lookup" /></li>
<li><img src={IMUsers} alt="Manage Users" /></li>
<li><img src={IHand} alt="Coming Soon" /></li>
<li><img src={IMAdmins} alt="Manage Admins" /></li>
<li><img src={IDash} alt="Dashboard" /></li>
<li><img src={IDB} alt="Dashboard" /></li>
</ul>
</div>
</div>

Try this:
//JSX
<div className="snavbarcontainer">
<div className="toplefticon">
<a class="test" href="#"><img src={topleft} alt="Testing Logo" /</a>
</div>
<div className="mainIcons">
<ul className="icons_ul">
<li><img src={ILookupPupils} alt="Pupil Lookup" /></li>
<li><img src={IMUsers} alt="Manage Users" /></li>
<li><img src={IHand} alt="Coming Soon" /></li>
<li><img src={IMAdmins} alt="Manage Admins" /></li>
<li><img src={IDash} alt="Dashboard" /></li>
<li><img src={IDB} alt="Dashboard" /></li>
</ul>
</div>
//added this
<div className="bottomlefticon">
<a class="test" href="#"><img src={bottomLeftIcon} alt="Testing Logo" /</a>
</div>
</div>
//CSS
body {
//! background-color: red; - DEBUGGING ONLY!
margin: 0
}
.snavbarcontainer {
background-color: black;
width: 3.5em;
height: 100vh;
position: fixed;
display: flex;
flex-direction: column;
//added this
justify-content: space-between;
}
.icons_ul {
text-decoration: none;
list-style-type: none;
padding: 0;
li /* Adds property to EACH LI, not the UL itself. */{
margin: 1em 0;
}
}
I added the bottom left icon at the bottom of the code so there can be proper space between them.

Positions set using the justify-position attribute don't take effect at all

HTML Code (it is JSX which is the same as HTML, but class is replaced with ClassName):
<div className="snavbarcontainer">
<div className="toplefticon">
<a class="test" href="#"><img src={topleft} alt="Testing Logo" /></a>
</div>
<div className="mainIcons">
<ul className="icons_ul">
<li><img src={ILookupPupils} alt="Pupil Lookup" /></li>
<li><img src={IMUsers} alt="Manage Users" /></li>
<li><img src={IHand} alt="Coming Soon" /></li>
<li><img src={IMAdmins} alt="Manage Admins" /></li>
<li><img src={IDash} alt="Dashboard" /></li>
<li><img src={IDB} alt="Dashboard" /></li>
</ul>
</div>
</div>
My (S)CSS:
body {
//! background-color: red; - DEBUGGING ONLY!
margin: 0
}
.snavbarcontainer {
background-color: black;
width: 3.5em;
height: 100vh;
position: fixed;
display: flex;
flex-direction: column;
align-items: center;
}
.icons_ul {
text-decoration: none;
list-style-type: none;
padding: 0;
li /* Adds property to EACH LI, not the UL itself. */{
margin: 1em 0;
}
}
.icons_ul {
justify-content: center;
}
.toplefticon {
justify-content: flex-start;
}
Basically, I want the image with the class "test" at the top of the vertical sidebar - and the icons in the center. However what I have done isn't currently working.
Thanks for your responses.

Where is display: flex; on icons_ul and toplefticon?
flex, isn't inherited beyond the first child.
body {
//! background-color: red; - DEBUGGING ONLY!
margin: 0
}
.snavbarcontainer {
background-color: black;
width: 3.5em;
height: 100vh;
position: fixed;
display: flex;
flex-direction: column;
align-items: center;
}
.icons_ul {
text-decoration: none;
list-style-type: none;
padding: 0;
li /* Adds property to EACH LI, not the UL itself. */{
margin: 1em 0;
}
}
.icons_ul {
display: flex;
justify-content: center;
}
<div className="snavbarcontainer">
<div className="toplefticon">
<a class="test" href="#"><img src={topleft} alt="Testing Logo" /></a>
</div>
<div className="mainIcons">
<ul class="icons_ul">
<li><img src={ILookupPupils} alt="Pupil Lookup" /></li>
<li><img src={IMUsers} alt="Manage Users" /></li>
<li><img src={IHand} alt="Coming Soon" /></li>
<li><img src={IMAdmins} alt="Manage Admins" /></li>
<li><img src={IDash} alt="Dashboard" /></li>
<li><img src={IDB} alt="Dashboard" /></li>
</ul>
</div>
</div>
And for the toplefticon, it will be top left by default if your document is made for the English language, because that's the default flow for English documents. So no need for that class.
Remember to rename class to className before using this code in react. Hope this helps.

3 images on first line and 3 images on second line in centre of page

I would like 3 images on the first line and 3 images on the second line and want them in the middle of the page
* { box-sizing: border-box; }
ul {
list-style: none;
font-size: 0;
margin: 0;
padding: 0;
text-align: center; }
li { display: inline-block; padding: 10px;}
li:nth-child(1), li:nth-child(4) {
width: 50%;
}
li:nth-child(4) { text-align: right; }
li:nth-child(2) { text-align: left; }
<ul>
<li><img src="http://lorempixel.com/400/200" /></li>
<li><img src="http://lorempixel.com/400/200" /></li>
<li><img src="http://lorempixel.com/400/200" /></li>
<li><img src="http://lorempixel.com/400/200" /></li>
<li><img src="http://lorempixel.com/400/200" /></li>
</ul>

there are many ways to do it, for example:
ul {
list-style: none;
font-size: 0;
margin: 0;
padding: 0;
text-align: center;
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 10px;
}
https://jsfiddle.net/d6wn79pv/4/
or
ul {
list-style: none;
font-size: 0;
margin: 0;
padding: 0;
display: flex;
flex-wrap: wrap;
text-align: center;
}
ul li {
flex-grow: 1;
width: 33%;
}
https://jsfiddle.net/d6wn79pv/9/

with use of flexbox:
* {
box-sizing: border-box;
}
ul {
list-style: none;
padding: 0;
display: flex;
justify-content:center;
flex-wrap: wrap;
}
li{
width:30%;
margin:3px auto;
}
<ul>
<li><img src="https://via.placeholder.com/150" /></li>
<li><img src="https://via.placeholder.com/150" /></li>
<li><img src="https://via.placeholder.com/150" /></li>
<li><img src="https://via.placeholder.com/150" /></li>
<li><img src="https://via.placeholder.com/150" /></li>
<li><img src="https://via.placeholder.com/150" /></li>
</ul>

check this out.
<!DOCTYPE html>
<html>
<style>
* { box-sizing: border-box; }
ul {
list-style: none;
font-size: 0;
margin: 0;
padding: 0;
text-align: center; }
li {
width: 31%;
display:block;
float:left;
margin:3px;
}
</style>
<body>
<ul>
<li><img src="http://lorempixel.com/100/100/cats/" /></li>
<li><img src="http://lorempixel.com/100/100/cats/" /></li>
<li><img src="http://lorempixel.com/100/100/cats/" /></li>
<li><img src="http://lorempixel.com/100/100/cats/" /></li>
<li><img src="http://lorempixel.com/100/100/cats/" /></li>
<li><img src="http://lorempixel.com/100/100/cats/" /></li>
</ul>
</body>
</html>

You can do it simply by using flex
<ul class="here">
<li><img src="http://lorempixel.com/400/200" /></li>
<li><img src="http://lorempixel.com/400/200" /></li>
<li><img src="http://lorempixel.com/400/200" /></li>
<li><img src="http://lorempixel.com/400/200" /></li>
<li><img src="http://lorempixel.com/400/200" /></li>
</ul>
.here{
list-style: none;
display: flex;
justify-content: space-around;
align-items: center;
flex-wrap: wrap;
width: 100%;
}
.here li {
width: 32%;
}
.here li img{
width: 100%;
}
Change the .here width to auto resize the content

3 images on first line then 2 images on the second line underneath

I want to have 3 images on the first line and 2 on the second. I have this code but it has 2 on top and 3 on the bottom.
<ul>
<li><img src="./icons/User_Management.png" /></li>
<li><img src="./icons/User_Management.png" /></li>
<li><img src="./icons/User_Management.png" /></li>
<li><img src="./icons/User_Management.png" /></li>
<li><img src="./icons/User_Management.png" /></li>
</ul>
* { box-sizing: border-box; }
ul {
list-style: none;
font-size: 0;
margin: 0;
padding: 0;
text-align: center; }
li { display: inline-block; padding: 10px;}
li:nth-child(1), li:nth-child(4) {
width: 50%;
}
li:nth-child(4) { text-align: right; }
li:nth-child(2) { text-align: left; }
I want the two bottom images to be centred with the three images at the top.
Expected Result - 3 Images on first row and 2 on second row
Actual Result - 2 Images on first row and 3 on second row

Use Flex:
#container{
width: 550px;
display: flex;
justify-content: center;
flex-wrap: wrap;
}
#container > img{
margin: 10px;
}
<div id="container">
<img src="https://via.placeholder.com/150">
<img src="https://via.placeholder.com/150">
<img src="https://via.placeholder.com/150">
<img src="https://via.placeholder.com/150">
<img src="https://via.placeholder.com/150">
</div>

You could also do something like this which is an amazing CSS tool. Use CSS grid.
//HTML
<ul class="grid">
<li><img src="./icons/User_Management.png" /></li>
<li><img src="./icons/User_Management.png" /></li>
<li><img src="./icons/User_Management.png" /></li>
<li><img src="./icons/User_Management.png" /></li>
<li><img src="./icons/User_Management.png" /></li>
</ul>
//CSS
.grid {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
}

Like this:
Just adjust the widths and use the appropriate nth-child
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
::before,
::after {
box-sizing: inherit;
}
ul {
list-style: none;
font-size: 0;
margin: 0;
padding: 0;
text-align: center;
}
li {
display: inline-block;
text-align: center;
width: 33.3%;
border: 1px solid red;
}
li:nth-child(4),
li:nth-child(5) {
width: 50%;
}
<ul>
<li><img src="http://www.fillmurray.com/140/100" /></li>
<li><img src="http://www.fillmurray.com/140/100" /></li>
<li><img src="http://www.fillmurray.com/140/100" /></li>
<li><img src="http://www.fillmurray.com/140/100" /></li>
<li><img src="http://www.fillmurray.com/140/100" /></li>
</ul>

Issue with clearing float in li element

Trying to reproduce the following in HTML & CSS:
Here's how I tried to structire it:
.layout ul > li {
list-style: none;
}
.layout ul > li:nth-child(1n) > img {
float: left;
}
.layout ul > li:nth-child(2n) > img {
float: right;
z-index: 9999;
}
<div class="layout">
<ul>
<li><img src="http://placeimg.com/120/80/grayscale" /></li>
<li><img src="http://placeimg.com/120/80/grayscale" /></li>
<li><img src="http://placeimg.com/120/80/grayscale" /></li>
<li><img src="http://placeimg.com/120/80/grayscale" /></li>
</ul>
</div>
The problem is that when applying clearfix it doesn't help at all. The images seem to come on one row. Maybe is there something specific when it comes to li elements and clearfix? How this can be solved?

You can simply consider text-align property and some negative margin for the overlap (this will avoid you all the float issues)
.layout {
width: 200px;
}
.layout ul {
margin: 0;
padding: 0;
}
.layout ul>li {
list-style: none;
margin-bottom: -20px;
position: relative; /* don't forget this to be able to use z-index */
}
.layout ul>li {
text-align: left;
}
.layout ul>li:nth-child(2n) {
text-align: right;
z-index: 999;
}
<div class="layout">
<ul>
<li><img src="http://placeimg.com/120/80/grayscale" /></li>
<li><img src="http://placeimg.com/120/80/grayscale" /></li>
<li><img src="http://placeimg.com/120/80/grayscale" /></li>
<li><img src="http://placeimg.com/120/80/grayscale" /></li>
</ul>
</div>

Try to make use of transform css property
.layout ul {
display: flex;
flex-wrap: wrap;
padding: 0;
list-style: none;
background: #ccc;
padding: 20px;
padding-left: 40px;
}
.layout ul>li {
width: 50%;
box-sizing: border-box;
border: 5px solid #fff;
margin-bottom: 10px;
}
.layout ul>li>img {
width: 100%;
max-width: 100%;
display: block;
}
.layout ul>li:nth-child(even) {
transform: translateY(50%) translateX(-20px);
}
<div class="layout">
<ul>
<li><img src="http://placeimg.com/120/80/grayscale" /></li>
<li><img src="http://placeimg.com/120/80/grayscale" /></li>
<li><img src="http://placeimg.com/120/80/grayscale" /></li>
<li><img src="http://placeimg.com/120/80/grayscale" /></li>
</ul>
</div>