![]() ![]() I hope this helps people who are looking for a start. The properties I covered are some basic concepts that I learned as a beginner. To conclude, Flexbox has a vast range of properties that you can check on the below link. Try playing around by adding other properties and see the changes on it. I hope by looking at the sample images you will better understand these properties.īelow is the working demo for some of the above-explained properties. Flexbox also reduces the inclusion of media queries in our css. These are some very basic flex properties that can help us achieve a responsive design. display:flex is all it takes to get started with the use of Flex. display - It enables flex context for all the direct children, once applied to the parent. Let's have a look at some flex properties:ġ. The start and end of this axis are called the cross start and cross end. The cross axis is the axis running perpendicular to the direction the flex items are being laid out in. The start and end of this axis are called the main start and main end. The main axis is the axis running in the direction the flex items are being laid out in. We can call Flexbox an elegant layout for designing in the present era.įlexbox has two components: A container and the items within it. Its' main purpose is to alter the height/width of the items in a container based on the available space or shrink them in case of overflow. Flex helps in the best utilization of space. Flexbox distributes an allocated space amongst the items in a container even when the size of the items is dynamic. It has replaced floats and tables which were being used for the alignment of the items. Yes, we all do it, but all those hacks have now been replaced by Flexbox. Read about HTML forms and see how much you can understand on your own.Do you apply a lot of hacks when you design a page, like aligning the items, distributing space between multiple items in a container, etc? 1-2 hours) Next week we will learn how to collect user input. Read about CSS Grids, and floats and absolute positioning. ![]() In your work, you may be asked to use other layout techniques, such as CSS Grid, floats, or absolute positioning. This week you learned how to layout content in CSS with Flexbox. Complete the instructions under "For Week 2". 2-4 hours) Return to the HTML/CSS Project you built for homework last week. You will need to clone this repository and follow each directory that matches the videos. 4 hours) Follow along to as many videos as you can from What the Flexbox?!. 1-2 hours) Complete the "Common Responsive Patterns" lesson of the Responsive Web Design Fundamentals course. Use the following resources to learn more about the topics we covered this week. This week you will learn how to merge your changes in one branch back to your master branch.Ĭomplete exercise 18 from the exercise project. Last week you used Git to create a branch so that you could work on two different copies of your project at the same time. Learn more about flexbox by reading this helpful, visual and complete reference to the many properties you can use with flexbox.Ĭomplete exercises 11-17 from the exercise project. Important: While justify-content works in the same direction as flex-direction, align-items works the opposite way! Have a close look at the above images - the "green" arrow is opposite to the yellow flex-direction one. Let's review what you learned and break down a media query: screen and ( min-width : 900px ) Media QueriesĪs you learned in your homework assignment, media queries help us change the display of our content depending on the size of the viewport. ![]() See how much variety there is in viewport sizes. To ensure we're presenting a website that's easy to use on any device, we use Responsive Web Design techniques to modify how content is displayed depending on the viewport.Įxercise: As a group, let's brainstorm as many devices as we can think of which might access the websites we build. When we build for the web, we're making websites that can be viewed in a phone, a laptop, a tablet and many other devices. Week 14 - Middleware, Templating and APIsĪutomatic deployment of sites with Netlify and GitHub Week 2 - Responsive Web, Layout and Flexbox ![]()
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |