How to Align Flexbox

HTML-CSS
1

Hello guys,
I’m new in here
Sorry if I don’t know the rules in this forum
I want to ask
I have code HTML and CSS like this

<!DOCTYPE html>
<html>
<head>
	<title>Flexbox</title>
	<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>


<div class="flexwrap">
	
	
	
	<div class="fleximg1">	<img src="img/Liberl Kingdom/Rolent.png"></div>
	
	<div class="fleximg1">	<img src="img/Liberl Kingdom/Bose.jpg"></div>
	<div class="fleximg1">	<img src="img/Liberl Kingdom/Ruan.png"></div>
	<div class="fleximg1">	<img src="img/Liberl Kingdom/Zeiss.jpg"></div>
	<div class="fleximg1">	<img src="img/Liberl Kingdom/Grancel.jpg"></div>

		

		

	

</div> <!--end of div flexwrap-->


</body>
</html>

*{

    margin: 0;
    padding: 0;
    font-family: sans-serif;
    box-sizing: border-box;
}

.flexwrap {


    display: flex;
    justify-content: center;
    align-items: space-around;
    flex-direction: row;
    flex-wrap: wrap;
     
}

.flexwrap img{

    width: 400px;
    height: 130px;
    border: 2px solid black;
    
}

.fleximg1 {

   margin: 10px 10px;
}

My question is how to make last image so that it is in line with the image above not in the bottom middle element?
thanks in advance

2

Hey Star,
What is your end goal here? Do you want the images to be aligned underneath each other and centered? When you put justify-content: center; it is going to center that bottom row. Remove that line, and the images are aligned but not centered. Again, I am not sure of how you want it to look but there are a few things I fixed for you:

  1. There is no align-items: space-around. I think you were looking for align-content instead
  2. To use align-content you need to give the container you are using it on a height
  3. You can get rid of that fleximg1 class margin. You can instead use margin-left in the flexwrap img class.

Again, not sure how you wanted it to look so that margin-left can be changed to give the images some space from each other if thats what you want

Here is the code pen so you can see the changes I made.
Just a friendly suggestion, if you dont use code pen I would suggest to start using it. This way you can post a link to your code for everyone to see. You’re more likely to get responses if you do that, so people do not have to do it themselves. Let me know if you have any questions

3

It’s works
Thanks Colby :smiley: :smiley:

4

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.