understand :

CSS3 Elastic box ( Flexible Box or flexbox), A layout that ensures that elements behave appropriately when the page needs to adapt to different screen sizes and device types .

Set elastic box :

The elastic box consists of an elastic container (Flex container) And the elastic child element (Flex item) form .

Elastic container by setting display The value of the property is flex or inline-flex Define it as an elastic container .

The elastic container contains one or more elastic sub elements .

example :

Perfect solution to the problem of center

Use elastic boxes , It's very simple , Just want to set up  margin: auto;  It can make the elastic sub elements completely centered in the two upper axis directions

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> example </title>
<style>
.flex-container {
display: -webkit-flex;
display: flex;
width: 400px;
height: 250px;
background-color: lightgrey;
}

.flex-item {
background-color: cornflowerblue;
width: 75px;
height: 75px;
margin: auto;
}
</style>
</head>
<body>

<div class="flex-container">
<div class="flex-item">Perfect centering!</div>
</div>

</body>
</html>

effect :

CSS3 More articles on elastic box

  1. css3 Elastic box model box-flex

    css3 Elastic box model box-flex Browser support There is currently no browser support box-flex attribute . Firefox To support alternative -moz-box-flex attribute . Safari.Opera as well as Chr ...

  2. css3 Elastic box

    CSS3 Elastic box (Flex Box) The elastic box is CSS3 A new layout pattern of . CSS3 Elastic box ( Flexible Box or flexbox), When a page needs to adapt to different screen sizes and device types ...

  3. CSS3 Elastic box (Flex Box)

    CSS3 Elastic box (Flex Box) One . Properties of the container :flex-directionflex-wrapflex-flowjustify-contentalign-itemsalign-content 1 ...

  4. CSS3 Elastic box (Flex Box)

    1 CSS3 Elastic box (Flex Box) 1 http://caniuse.com/#search=flex%20box https://www.w3.org/TR/css-flexbox-1/ C ...

  5. 【CSS3】 CSS3: Elastic box (Flex Box)

    Flex What is the layout How to specify a container as Flex Layout Flex Basic syntax display flex-direction justify-content align-items flew-wrap ali ...

  6. css3 Elastic box model

    Now all kinds of mobile phones , The plates vary in size , If the box model can only be fixed in size , Can't compress at will , Will not be able to cater to this era . therefore css3 A new box model has been introduced —— Elastic box model (Flexible Box Model). The elastic box model can be laid horizontally ...

  7. css3 Elastic box flex Layout

    CSS3 Elastic box 1.display:flex explain : Set to elastic box ( The parent element adds ) 2.flex-direction( Spindle arrangement ) explain : The order specifies the position of the elastic child element in the parent container row The default is in one line ...

  8. css3 Elastic box review

    The elastic box consists of an elastic container (Flex container) And the elastic child element (Flex item) form . Elastic container by setting display The value of the property is flex or inline-flex Define it as an elastic container . elastic ...

  9. css3 Elastic box display:flex

    Look at the code above first , Explain the meaning , See how many you know ( There's a note at the back ): .container { display: flex; // Elastic layout flex-direction: column; // The arrangement of items in the container ...

Random recommendation

  1. c# How to determine webbrowser Finished loading

    Recently, a small program needs to collect web page source code , But some pages JS The script generates additional code , such as http://www.cnblogs.com/lidabo/p/4169396.html The red box is the code loaded in addition . this ...

  2. C# Application GmaQrCode Generate qr code

    The QR code needs to be generated in the project , There are many ways , May adopt JS plug-in unit , You can also use a third-party plug-in to generate QR code in the background , In the background method QRCode perhaps GmaQrCode, Now I'd like to introduce a C# The method of generating two-dimensional code in the background : /// < ...

  3. // solve validator Verify multiple plug-ins name The same only verifies the first question

    // solve validator Verify multiple plug-ins name The same only verifies the first question var validatorName = function () { if ($.validator) { $.validator.p ...

  4. not The subquery contains null When it's worth it not in It will fail

    not in The subquery contains null When it's worth it not in It will fail however in In the subquery of null Of It won't fail

  5. oracle Basic usage

    As the backstage data support of enterprise version , First of all, we should master oracle How to use !!! Before registering users , Need to use system Administrator to register function !!! 1. First, create a new user 2. Will this enable new users to log in ? No , We still need to score ...

  6. RHEL Local yum Source

    One . Mount the local image to do yum Source ( Environmental Science :RHEL6.5 64 position VM11) 1. Get into /etc/yum.repos.d Catalog , [root@localhost yum.repos.d]# ls packagek ...

  7. vscode To write python How to prohibit flake8 Tips line too long

    Use vscode To write python It's still comfortable , But if you give vscode The syntax check plug-in is installed , for example flake8, Will often prompt some very harsh grammar problems , One of the most intolerable is line to long. A line can only ...

  8. Sublime Text 3 Solutions to a number of problems

    1. Solution to abnormal display of Chinese folder name on high score screen I bought a new one 2K Screen of , Some Chinese folder names have become “ Mouth mouth mouth mouth mouth mouth mouth mouth mouth mouth mouth mouth mouth mouth mouth mouth mouth mouth mouth mouth mouth mouth mouth mouth mouth mouth mouth mouth mouth mouth mouth mouth mouth mouth mouth mouth mouth mouth mouth mouth mouth mouth mouth mouth mouth mouth mouth mouth mouth mouth mouth mouth mouth mouth ”. stay “preferences” - " Set up - user " add to "dpi_ ...

  9. NSLog Set not to print

    When debugging an application, you often need to print the information you need , But when there are more places to print, running applications on real machines will be much slower , More output statements will greatly affect the performance of the application program . Here we can define a macro to control whether to output debug messages ...

  10. iis To configure php

    1.CGI The full name is “ Public gateway interface ”(Common Gateway Interface),HTTP The server communicates with programs on your or other machines “ conversation ” A tool of , Its program must run on the network server . CGI You can use any language ...