What is elastic layout (question mark face)? Previous box layout is the use of position, float, display to the layout, in fact super-tired recently discovered a knowledge point, it is elastic layout, let's look at what it is elastic layout!
What's elastic layout
Flex is elastic, the box model used to provide maximum flexibility, any of a container can be specified as the layout Flex.
E.g:.box{display:flex;}
.box{inline-display:flex;}Note that, in the future to flex layout, sub-element float, clear, and vertical-align property will fail !!!
basic concepts
Using flex layout elements, called flex container (Container flex), referred to as "container." It's all child elements automatically become members of the vessel, called flex project (flex item), referred to as "project."
Container has two axes, a horizontal shaft (main axis) intersecting a vertical axis (cross axis), start and end points are the bounds of the container.
How to do
To be honest I really do not know much, I can only write what I know is coming!
For example, define two boxes:
.box{
width: 200px;
height: 200px;
background-color: rgb(135, 135, 248);
display: flex;
align-items: center;
justify-content: center;
}
.inner {
width: 100px;
height: 100px;
background: pink;
align-self: flex-end;
}<div class="box">
<div class="inner">
</div>
</div>Renderings
We can see two boxes in the middle of the screen, it is because we have added in the blue box style display: flex;align-items: center;justify-content: center;made me one by one to have been.
display: flex so that the box has the elastic properties of the layout, and as a child element of the pink box also been defined, Like father like son Well, ( ^ ▽ ^ );
justify-content
justify-content as spindle alignment, center name suggests is centered slightly, of course, he has other attributes friends
flex-start (default): Left
flex-end: the right alignment
center: center
space-between: justification, the spacing between the items are equal.
space-around: at equal intervals on both sides of each item. Therefore, the gap between the project twice the size of the project and the interval of the border.
align-items
align-items is a vertical cross-axis alignment, with the following properties:
flex-start: the starting point of cross-axis alignment.
flex-end: end cross-axis alignment.
center: the midpoint of cross-axis alignment.
baseline: first line of text of the project baseline alignment.
stretch (default): If the project height is not set or set to auto, occupies the entire height of the container.
align-self
We can also see that our pink boxes and no father in the middle of it, it is because he has his own personality Yeah, that's our align-self it!
align-self attribute allows a single item with other items has a different alignment, may cover the align-items property.
auto (default): inheritance property of the parent element.
flex-start: the starting point of cross-axis alignment.
flex-end: end cross-axis alignment.
center: the midpoint of cross-axis alignment.
stretch: occupies the entire height of the container.
Well, I want to say so much, elastic layout is really good with style! ! ! ?
Should not satisfied for this article also look understanding, a rookie sincere heart! ! ! ♥