Reviewing Flex I found a few interesting games in the layout , Share and record some difficult answers here

1. Flexbox Froggy

Through adjustment CSS The pattern makes all kinds of frogs return to the corresponding lotus leaf , The default difficulty of the game is Beginner There will be hints. , It can be in settings Turn off the prompt , altogether 24 Turn off , It just feels like 17 and 24 A little confused , Mark the answer here

Flexbox Froggy 17 Turn off

Flexbox Froggy 24 Turn off ## 2. Flexbox Defense

This is a tower defense game , adopt CSS Adjust the position of each turret according to the layout , The default is to adjust Flex container( I don't know what is Flex container You can refer to here ),Flex item The options are hidden , If you need to adjust, you have to click on the left first hide tower inputs After adjustment, you can start fighting , The only requirement is the turret Not in orbit , The winning conditions of each level are different , But it's better to get full marks . Except for the last level , The others are not too difficult .

Learning through games CSS Of Flex More articles on layout

  1. CSS Of flex Layout ( Reprint )

    We've learned some layout models before , For example, floating , Absolute positioning and so on , But these layouts are not simple enough , But the scope of use is really too narrow . flex Models have a lot of properties , To set up a variety of layouts , Next, we will introduce in detail the effects of various properties on cloth ...

  2. “ In vain ” The eye wants to wear -CSS And flex Layout and border shadows

    In vain : Arrogance : The only thing that won't happen is to have a arrogant heart , Pretend you can see through it . As a little white who can't do anything , In order to learn (zb), Especially after taking doctrine, write something about some css A summary of the layout , Further deepen the memory of knowledge . Knowledge is the common wealth of mankind ...

  3. CSS And Flex Layout

    Flex Layout of the tutorial : Grammatical passage Page layout (layout) yes CSS A key application of . Traditional solutions for layout , Based on the box model , rely on  display  attribute + position attribute + float attribute . It's for those ...

  4. Wechat applet CSS And Flex Layout

    Reprint :https://blog.csdn.net/u012927188/article/details/83040156 I believe that beginners who just started learning to develop small programs must be troubled by the layout of the interface , I don't know how to lay it out , How to put ...

  5. Detailed explanation CSS Of Flex Layout

    This article is You Yun. + Community publication Flex yes Flexible Box Abbreviation , Meaning for " Elastic layout ", yes CSS3 It's a layout pattern of . adopt Flex Layout , It can solve a lot of problems gracefully CSS Layout issues . The following will introduce Rong ...

  6. CSS And FLex Layout introduction

    Page layout (layout) yes CSS A key application of . img Traditional solutions for layout , Based on the box model , rely on display attribute + position attribute + float attribute . It is very inconvenient for those special layouts , such as , ...

  7. CSS And Flex Layout : Grammatical passage

    Page layout (layout) yes CSS A key application of . ​ Traditional solutions for layout , Based on the box model , rely on  display  attribute + position attribute + float attribute . It is very inconvenient for those special layouts , such as ...

  8. CSS Of flex Layout and Grid Layout

    One . What is? flex Layout 2009 year ,W3C Put forward a new scheme ----Flex Layout , It's easy . complete . Responsive implementation of various page layouts . at present , It's supported by all browsers , It means , Now it's safe to use this ...

  9. CSS And flex Layout

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name ...

Random recommendation

  1. SpringAOP Realization ( principle )

    AOP principle : AOP It is divided into :JDK Dynamic proxy sum CGLIB agent Static proxy : Source code created by programmers or generated automatically by specific tools , Then compile it . Before the program runs , The proxy class .class The file already exists .               notes ...

  2. Control ( Select class ): Selector, ComboBox

    1.Selector( Base class ) An example of Controls/SelectionControl/SelectorDemo.xaml <Page x:Class="Windows10.Contr ...

  3. grep Common configuration of environment variables

    vim ~/.bashrc GREP_OPTIONS="-irns --exclude-dir=output --exclude=tags --exclude=*.files" however ...

  4. Linux The data backup

    Today we need to use the backup website , Wrote a script , Back up mysql and redis data . #!/bin/bash BACKDIR="/home/tan/getll_backup" if [ ! -d ...

  5. LIst duplicate removal , Rewriting methods , Inherited interface .

    call : ]).ToList(); var dic = dataThis.Distinct( new repDic()).ToList();var repList = ""; for ...

  6. IOS Simple implementation of proxy

    original text  http://www.cnblogs.com/lovekarri/archive/2012/03/04/2379197.html I made one yesterday demo, Using a simple proxy . delegate yes ios ...

  7. alisql Installation steps

    Unload the original Mysql yum remove mysql-libs   Install dependency packages yum install centos-release-scl devtoolset-4-gcc-c++ devto ...

  8. Thread local variable ThreadLocal ( Time consuming tools )【 primary 】

    Thread local variable class package king; import java.util.ArrayList; import java.util.List; import java.util.Map; impor ...

  9. C# The fifth day of Foundation - Homework answers - use DataTable Make a business card collection

    .DataTable Realization DataTable PersonCard = new DataTable(); // Create a DataTable DataTable PersonCardCopy = new ...

  10. 【Git Use notes 】 The fourth part :git The development process in the company

    First, declare a few variables Warehouse management A: The main branch , Only master Branch warehouse management B: Development branch , Only business development branches    Warehouse management B fork On A Here's the picture In order to ensure The stability of the code , Only Warehouse management B One of the branches in is tested and coded r ...