Big brother you good night!
Hello nice day from the beginning, and today I bring you little knowledge about the layout of elasticity,
first of all, we should all know the advantages of elastic layout is done unidimensional, as to why, are explained below Oh!
The reason is called elastic elastic layout layout, it is because the sub-container (flex) available space can take full advantage of the parent container. Well, first of all for all of us to bring a spectrum including:
Well! Next we talk about a few details we used elastic layout syntax. The first is our original code and showing:
<style> ul{list-style: none;} a{text-decoration: none;} #box{margin: 20px auto; width: 400px;height: 400px;border: 1px solid black;} #box div{width: 100px;height: 100px;border: 3px solid black;} #box div:nth-of-type(1){background-color: red;} #box div:nth-of-type(2){background-color: green;} #box div:nth-of-type(3){background-color: blue;} </style>
<body>
<div id="box"> <div></div> <div></div> <div></div> </div>
</body
Showing that:
Role in the parent container above
-
flex-direction: to change the direction of the spindle
-
justify-content: attribute determines the alignment direction of the main shaft and a distributed fashion subkey.
-
align-items; vertical alignment of subelements in each row. Axis is moved in the sub
-
flex-wrap: whether the line feed process
Written in the above sub-container
- align-self; allow a single sub-container to other sub-containers is not the same alignment can align-items covered property. (In this case the second example)
- flex-grow: extended;
Examples
Note: The
level is the main axis of the time: By default, when the width and height do not write, width is determined by the content, determined by the height of the parent container.
Vertical spindle time: By default, when the width and height when not writing, is determined by the width of the parent container, the height determined by the contents.
When the child is greater than the total width of the parent container, automatically shrink (the priority is greater than its own elasticity fixed size)
when the child has reached the contents of the parent container when the minimum width and height, there will be an overflow phenomenon .
White one, welcome you guidance heavyweights.
