search

benmiller314 / cdm2020spring

website codebase for Ben Miller's course in Composing Digital Media
https://benmiller314.github.io/cdm2020spring
1 stars 5 forks source link

Aligning images next to each other #11

Closed emmawooten12 closed 4 years ago

emmawooten12 commented 4 years ago

The challenge I am trying to place images next to each other in a row rather than on top of each other on the homepage.

Files involved https://github.com/emmawooten12/website-portfolio-2020spring and I am working on home-page.html with images IMG_5713.jpg, IMG_4651.jpg, and IMG_4826.jpg.

Steps you've taken I have tried (as seen in the screenshot) just using different classes to align them, and also some image aligning in the .css file but nothing has worked.

Screenshots

Screen Shot 2020-03-24 at 3 52 39 PM

What systems are you using? I'm on a Mac and opening these pages in Chrome

benmiller314 commented 4 years ago

Thanks for posting this question, Emma! It's a good one to answer on the forum, because this is a common task that a lot of people will probably want to know how to do. And it's fairly straightforward to achieve your goal, using flexbox.

We'll wrap the images in a <div>, which essentially just groups them together; then we'll create a rule that says, "This group is a flexbox."

The key css rule is 'display: flex'; It has to be applied to a container to affect items inside the container.

Having done that, all the direct children of the container – in this case, the three <img>es – jump up into a row. (We could also make this a column by declaring flex-direction: column; but by default, flex-direction is presumed to be row.)

Images will move to a horizontal row, but will not have an alignment (unless one of the items is aligned separately).

We can then add more rules to the flex container (our div.row) to control the spacing. The primary axis (in our case, horizontal) is controlled with the justify-content CSS attribute; Atom or your browser's inspector will tell you the many values it can take. In our case, justify-content: center; will cluster them in the middle, and you can then add some margin to the images, if you want. (The selector .row img will catch them all.) Or try justify-content: space-around; to let the browser figure out spacing on its own.

With center: flexbox--center

With space-around: flexbox--space-around

And that's just about it! You may want to add some padding and max-width to body to help with the spacing around these particular images, but that's separate from this question.

NB: I've also recorded this in action with voiceover as a screencast; click that link to view.