Create a Function for Flexbox Layout (it will fix flexbox perfectly accross multiple rows)

-

 In this video, we'll write a function that gives us total control over the number of flex items being displayed on one line. The function will help us display equally sized and spaced items that line up perfectly across multiple lines.

Resources

Videos


how to fix it?

1. set gutter:10px


2. set the card margin value: $gutter;
3. make a formula:


g-pct: gutter percentage.

g-total: gutter total.

items: flexbox.

per-line: in one line.

4. set _card.css, different min-width, with different flexboxes on one line.


5. check css, you will see:



Now, look the browser:








Comments

Post a Comment

Popular posts from this blog

how to code a weather forecast web

-
Image
  Let's work through the example we saw at the beginning: the weather forecast. The first step is to make the forecast look good on a small screen. The app at a narrow width. Next, resize the browser until there is too much white space between the elements, and the forecast simply doesn't look as good. The decision is somewhat subjective, but above  600px  is certainly too wide. The app at a point where we feel we should tweak the design. To insert a breakpoint at  600px , create two media queries at the end of your CSS for the component, one to use when the browser is  600px  and below, and one for when it is wider than  600px . @media ( max-width : 600px ) { } @media ( min-width : 601px ) { } Finally, refactor the CSS. Inside the media query for a  max-width  of  600px , add the CSS which is only for small screens. Inside the media query for a  min-width  of  601px  add CSS for larger screens. Pick minor break...
Read more

What Build Tools Do JavaScript Developers Use?

-
Image
  When starting a new JavaScript project, developers usually set up a build system using tools that help manage all of the moving parts of the project, and just about everything needed to build and run their application. Package Managers Many JavaScript applications rely on external dependencies like libraries, frameworks and other time-saving tools, which help developers avoid having to rewrite their own solutions to common problems. Libraries, frameworks and software are created and shared by the JavaScript community and brought into a project using a  package manager . A project could have tens or hundreds of external dependencies, and in many cases, some dependencies rely on other installed dependencies. Package managers install and keep track of all the dependencies of a project. They also simplify the process of upgrading, configuring and removing dependencies. The most popular JavaScript package manager is  npm  (node package manager). Another commonly used pa...
Read more

WordPress Theme Development From Scratch - 3. Enqueuing CSS and JS to W...

-
Image
full screen view:  https://youtu.be/KtMwTBl-j8I functions.php file: <?php // Create the function function load_css () { // Register the style wp_register_style( ' my-style ', get_template_directory_uri() . ' /style.css ', array(), false, 'all' ); // Name, get template URL + CSS filename, dependencies, version number, media // Enqueue the style wp_enqueue_style('my-style'); } // Execute the function add_action('wp_enqueue_scripts', 'load_css'); Yellow hight portion can be customized. 'my-style' string name, could be any. '/style.css' string location, could be /css/style.css. depend on your style.css file location. *link functions file with pages, still need some work: 1. add <?PHP wp_head(); ?> right beyond the end of </head> in the single.php file(similar as HTML file) <?php wp_head (); ? > </ head > < body <?php body_class (); ? > id = "top" > <?p...
Read more

how to use :focus

-
  The browser uses the   outline   CSS property in its default style sheet to add the   :focus   styles to focused elements. In order to remove that and add your own   :focus   styles, all you have to do is add   outline: 0;   to the element whose   :focus   style you want to change, and then add your own. For example: a :focus { outline : 0 ; /* then add your own styles here */ } Outlines are similar to borders, but they’re not quite the same. You can read more about outlines and how they differ from borders in the  outline  property entry. When you’re styling links using  :focus  it is recommended that you provide the  :focus  styles after  :link  and  :visited  styles, otherwise the  :focus  styles would be overridden by those of  :link  and  :visited . In addition to these three pseudo-classes, the  :hover  and  :a...
Read more

unit3.online registration form tricks: input field box align right and placeholder text right, but input text left.

-
Image
TrickA: align the input field box to right 1. make the input field to right  the trick is: not float input field to right, you need to give the label margin-right:auto;  then push the input field to right .      .container label{          margin-right:auto; } 2. but after that, the label is not level with input filed. you have to fix it with: .container label{     justify-content:center;     align-self:center; } then you will see the perfect picture: 3. but not end, you will find new issue: the postcode area is also pushed to right, and the project require the postcode field short than others. you will need a little math to fix it: for example:  your input area width is 80%;  label is 15%,  100-80-15=5 then you can set 5% between by: label[for="postcode"]{ margin-right:5% } after that, you will get perfect picture. TrickB the place holder text showing on the right. you can simply align the text to right...
Read more

how to screenshot a drop down menu on mac

-
  macOS In  macOS , to take a screenshot (including any menus you may have selected), press  Command -Shift-3 . You will hear a camera shutter click, and an image of your current screen will be saved to your desktop in  PNG  format. It will be named with the date and time that you take the screen shot. To take a screenshot of only a portion of the screen: Press  Command-Shift-4 . Your mouse pointer will change into crosshairs. Note: If you want to cancel at any point in this process, press  Esc . Move your mouse to the upper-left corner of the area you want to capture. Hold down the mouse button, drag the mouse to the lower-right corner of the area you want to capture, and then release the mouse button. You can also take screenshots of individual windows, menus, and icons: If you want to take a screenshot of a menu, select it. If you want to take a screenshot of a window, click it to bring it into focus. Press  Command-Shift-4 , and then press the...
Read more

Numbers in JavaScript introduction

-
  By  Guil Hernandez Note:  To get the most out of instruction steps, be sure to write all of your code and avoid copying/pasting from the examples. Numbers in JavaScript are as straightforward as they sound; you don’t need any special syntax for numbers, you write them straight into JavaScript. In JavaScript, numbers can be whole numbers (called integers ). For example: 5 0 - 100 9999 Or numbers with decimal points to represent fractions of a whole number like: 3.14 - 9.88888 .0000009 Numbers like these with decimal points are also called " floating point numbers ." JavaScript even lets you use scientific notation to represent really large or really small numbers: 9 e - 6 // same as .000009 9 e + 6 // same as 9000000 Storing Numbers in Variables Just as with string values, you can put a number in a variable, or "assign" a number to a variable using the equals sign (or assignment operator): let score = 0 ; const pi = 3.141592653589793 ; const abs...
Read more