CSS is Awesome!

What I'm learning

CSS is what gives the page its pizazz. Over the years, CSS, has gotten more powerful and has made its way into doing animations that previous required JavaScript. This week I've been working through some of its more advanced properties.

Media queries

Media queries have become almost a necessity for the new era of devices. With the advent of the smartphone, more people consume media through their phones than any other device. As such, it's necessary for the site to look good on Mobile, but also have good presentation when it comes to larger size screens. And how do we do that? Well in part...

Flexbox!

When combining media queries with flexbox, CSS becomes a powerful tool for the toolbox. (Almost a UNIX like philosophy of small tools combining into one large tool) Now we can do some really cool stuff.

Effectively, Flexbox will treat the first children in the box according to flexbox's rules that you set:

.flexbox {
    /* Turns on flexbox */
    display: flex;
    /* How would you like stuff displayed? Rows, columns... maybe display the items in reverse order?*/
    flex-direction: row;
    /* How do you want to spacing between your items to work? */
    justify-content: flex-end;
    /* How do you want items arranged on the main axis? */
    align-items: center;
    /*And so on...*/
}

This is my first real attempt to play around with Flexbox, so I'm providing some materials that can provide you some more complete information than my bite-size explanations above. There's way more to it than I can cover here.

Additional reference material

MDN: Using Media Queries
MDN: Flexbox
CSS Tricks: A guide to flexbox

Playing with Flexbox

Check out: https://flexboxfroggy.com
Also: https://mastery.games/post/flexboxzombies2/
Now you can literally play with flexbox!

What's next for me?

Now we get to the fun part. With some of the basic tools I've learned, now I'm going to start making the portfolio. Portfolios are a way of showing employers and others what you've been doing. I expect this to change many times as I proceed. But to start, let's see if we can get the portfolio looking good! CSS will help me do that. Should be fun to push and see just what I can do with it. I expect to hit some roadblocks and may even need to correct some understanding when I write next, so I wouldn't look at this as a definitive take on CSS and Flexbox.

A Random Parting Thought

Need some Lorem Ipsum placeholder? Why not spice it up a bit!

• https://baconipsum.com/ -- Perfect for the carnivore
• http://officeipsum.com -- If you wish to offend me greatly, use this.
• https://cupcakeipsum.com -- For the sweet tooth among us.

For VSCode Users, some extensions:

• lotus-ipsum: Magic The Gathering Placeholder text
• Horadrim ipsum: For the Diablo fans!

The above is the detailed content of CSS is Awesome!. For more information, please follow other related articles on the PHP Chinese website!