HomeworkLib
Question

Need to use flex box for solution.

<div class=section section-5> <div class=space-invader green></div> <div class=space-invader green></div> <div class=s

original picture:

This is how it should look like:

Order the space invaders so one green space invader is on the left side oppose the rest of the space invaders. The remaining

engineering   Computer-Science   
0 0
Add a comment Improve this question Transcribed image text
Next > < Previous
Sort answers by oldest

Homework Answers

Answer #1

Hi,

I have managed to do it with my own css and HTML, since you didn't share the complete code. Please feel free to replace the css elements as per your requirement especially space invader images.

<!DOCTYPE html>
<html>
<head>
<style>
.section {
width: auto;
height: auto;
border: 1px solid #c3c3c3;
display: -webkit-flex; /* Safari */
-webkit-flex-flow:row-reverse wrap ; /* Safari 6.1+ */
display: flex;
flex-flow: row-reverse wrap;
flex-direction: column;
align-items: flex-end;
}

.section div {
width: 50px;
height: 50px;
border: 1px solid #c3c3c3;
}
.green{
background-color: green;
}
.purple{
background-color: purple;
}

.section :nth-child(1) { order:6;align-self: center;}
.section :nth-child(2) { order: 7; }
.section :nth-child(3) { order: 8; }
.section :nth-child(4) { order: 9; }
.section :nth-child(5) { order: 10; }
.section :nth-child(6) { order: 1; }
.section :nth-child(7) { order: 2; }
.section :nth-child(8) { order: 3; }
.section :nth-child(9) { order: 4; }
.section :nth-child(10) { order: 5; }
  
</style>
</head>
<body>

<h1>The flex-flow Property</h1>


<div class="section section-5">

<div class="space-invader green"></div>
<div class="space-invader green"></div>
<div class="space-invader green"></div>
<div class="space-invader green"></div>
<div class="space-invader green"></div>
<div class="space-invader purple"></div>
<div class="space-invader purple"></div>
<div class="space-invader purple"></div>
<div class="space-invader purple"></div>
<div class="space-invader purple"></div>


</div>

</body>
</html>

Please let me know if you need more assistance on this. Happy Learning!

0 0
Add a comment
Know the answer?
Add Answer to:
Need to use flex box for solution. original picture: This is how it should look like:...
Your Answer:

Post as a guest

Your Name:

What's your source?

Earn Coins

Coins can be redeemed for fabulous gifts.

Log In

Sign Up

Not the answer you're looking for? Ask your own homework help question. Our experts will answer your question WITHIN MINUTES for Free.
Similar Homework Help Questions

  • the picture above is the one you are supposed to use for the MATlab code please...

    the picture above is the one you are supposed to use for the MATlab code please help Problems. Grayscale images are composed of a 2D matrix of light intensities from O (Black) to 255 (White). In this lab you will be using grayscale images and do 2D-array operations along with loops and iflelse branches. 1. We can regard 2D grayscale images as 2D arrays. Now load the provided image of scientists at the Solvay Conference in 1927 using the imread)...

  • I want to make a really simple maze game in Python. I need to use tkinter and GUI to make this ha...

    I want to make a really simple maze game in Python. I need to use tkinter and GUI to make this happened. Under you can see the description of the task, but i need help to getting startet. If there is an other easier way I'm just happy for the help!! task Description: You have to create a maze game. The goal of the game is to get out of the maze. The game should read The maze from a...

  • Website Case Study 59 JavaJam Coffee Hous Home Dobs Gear avaJam Gear Jnva)am Shirt Figure 12.6 Ne...

    JavaJam Gear Page We were unable to transcribe this imageWebsite Case Study 59 JavaJam Coffee Hous Home Dobs Gear avaJam Gear Jnva)am Shirt Figure 12.6 New JavaJam Gear page Task 4: Create the New Gear Page. One way to be productive is to create pages based on earlier work. Launch a text editor and cpen the Music page (music.html). Save the file your as gearhtml. This will give you a head start and ensure that the pages on the website...

  • Sp 4 ised class. What is the maximum current through the inductor? 8. Where should an object be p...

    question 9 Sp 4 ised class. What is the maximum current through the inductor? 8. Where should an object be placed relative to a thin lens with focal length 35 cm so that it's magnification is +4.5. What's the image position? Is it on the same side of the lens as the object? 9. A near sighted person has their far point at 4.80 meters. What is the power P (or focal length, 1/P) required to correct their near sightedness...

  • Please look at all 3 photos Homework Problems (Spring 2019) - These problems are designed to...

    Please look at all 3 photos Homework Problems (Spring 2019) - These problems are designed to give you more practice in calculating the values for these stocks. Follow the steps we did in class to help you figure out the proper growth rates for your valuations. I will let you know when they are due in class. you have questions, please feel free to stop by my office or visit with one of the 318 tutors for assistance 1. Coca...

  • Question 1 To remove the underlining from an <a> element, you can use CSS to set...

    Question 1 To remove the underlining from an <a> element, you can use CSS to set its A. text-decoration property to none B. text-decoration property to off C. underline property to none D underline property to off Question 2 You can use the CSS list-style-type property to change A. the bullet style in an unordered list B the number style in an ordered list C the terms style in a description list Dthe bullet or number style in an unordered...

  • Question 1 To remove the underlining from an <a> element, you can use CSS to set...

    Question 1 To remove the underlining from an <a> element, you can use CSS to set its A. text-decoration property to none B. text-decoration property to off C. underline property to none D underline property to off Question 2 You can use the CSS list-style-type property to change A. the bullet style in an unordered list B the number style in an ordered list C the terms style in a description list Dthe bullet or number style in an unordered...

  • please help witb coding! this is a beginner level class! second picture is what it is...

    please help witb coding! this is a beginner level class! second picture is what it is suppose to look like 3 - A A A EVENE Äv 21 Never email your code to anyone. Maintain the standards of academic honesty discussed in lecture and in previous labs. The work you turn in must be your work not copied from anywhere. • You should use Firefox or Chrome for the browser for testing your code, NOT Internet Explorer. Part I-lab12xxx.html -...

  • Need a solution using simple C++03 and control structures only. one image shows how program should...

    Need a solution using simple C++03 and control structures only. one image shows how program should look like. 2/5 132% Program Requirements USER INPUTS: Number of each species attempting to board the life boat ALGORITHM/CALCULATIONS: The programmer will develop an algorithm to prioritize boarding by species OUTPUTS: Number of each species allowed to board the life boat (of passengers attempting to board) Total passenger weight on board Percentage of available payload capacity utilized MESSAGES to display to user Number of...

  • need help with this .. From the pages 571-587 attached below. 1a) Suppose a population of...

    need help with this .. From the pages 571-587 attached below. 1a) Suppose a population of guppies was infected with a parasite. In that population a mutation results in a parasite resistant genotype that spreads through the population through natural selection. A subsequent mutation in the parasite results in a genotype that is unaffected by the newly evolved resistant guppy genotype. What is the name of the hypothesis that explains this host parasite “arms race”.? 1b) What is this name...

ADVERTISEMENT
Free Homework Help App
Download From Google Play
Scan Your Homework
to Get Instant Free Answers
Need Online Homework Help?
Ask a Question
Get Answers For Free
Most questions answered within 3 hours.
ADVERTISEMENT
ADVERTISEMENT