CSS3---Flex box

The Flexbox layout is a new layout property in CSS3, but any style attribute works by the premise that it must have a corresponding HTML structure. We first define the appropriate structure in the HTML file to use the layout style. We simply write a list of UL Li to experience the power of a flex layout. Create a new index.html writing structure, a index.css writing style.

Index.html, for the sake of explanation later, gave each li a three-to-one mark.

 <  ul     >  <  li  >  1</ li     >  <  li  >  2</ li     >  <  li  >  3</ li  >  </ ul  >  

Index.css, the main is to provide a default style for later operation.

ul{margin:0;padding:0;width:600px;margin:100px Auto;background:Grey;}Li{List-style:None;width:100px;Height:100px;margin:8px;text-align:Center;Line-height:100px;font-size:20px;}li:nth-child (1){background:Red;}Li:nth-child (2){background:Green;}Li:nth-child (3){background:Yellow;}

Now the HTML page shows the following:

The basic content is complete and now you can use the Flexbox. With Flex layout, you first define a flex container. The container, the container, definitely refers to the parent element, because it contains child elements, can be called containers, in our example is in the UL, to UL set what style to make it into a flex container, that is Display:flex, or Display:inline-flex. Set to flex or Inline-flex will make UL into a flex container, the difference is that after setting Display:flex, UL is still block-level elements, exclusive one line, and Display:inline-flex makes UL into the inline elements, Can be arranged horizontally with other inline elements. We can add a span label experiment on the back of UL, the HTML is modified as follows

    <ul>        <Li>1</Li>        <Li>2</Li>        <Li>3</Li>    </ul>    <span>Test whether UL is an inline or block-level element</span>

Add Dispaly:flex attribute to ul:

{    display: flex;   /* add Display:flex; property */     margin: 0;     padding:0;     width: 600px;     margin: 100px auto;     background: grey;}

can see the page below, to the UL set Display:flex, UL is still block-level elements

To replace the UL Display:flex with Display:inline-flex, the page shows as follows:

Display:inline-flex, it does make the UL into an inline element, arranged horizontally.

Whatever it is, UL becomes a flex container because we find that the LI elements are arranged horizontally from the original vertical arrangement. At this point, the element Li also has another name, called the Flex items (Flex project). Each element in the Flex container is called a Flex project. This is two of the most important concepts in the Flex layout: Flex container and Flex project.

When an element becomes a flex container, it defaults to two axes, the spindle (main axis) and the side axis (cross axis), which is what we normally understand as horizontal and vertical axes, because in a plane, only these two axes, the flex layout is also laid out on the plane, and it is no exception, So why not call the horizontal and vertical axes? Because the direction of the spindle is not fixed, it can either be horizontal or vertical. When the spindle is in the horizontal direction, the side axis is the vertical direction, when the spindle is perpendicular, the lateral axis is the horizontal direction. It has two possibilities, so it cannot be simply called a horizontal or vertical axis.

The direction of the spindle is also important because it affects the arrangement of flex projects. As shown, if the spindle is horizontally oriented, the Flex project is arranged horizontally. If the spindle is vertically oriented, then the Flex project will be arranged in a vertical direction. So when an element becomes a flex container, the first thing we need to determine is the direction of the spindle. Exactly the Flex-direction property provides such a setting.

The flex-direction defines the direction of the spindle, and accordingly determines the direction of the side axis, because only these two axes and they are vertical relations. It has four attribute values: Row | | Row-reverse | | Column | | Column-reverse.

Row: The spindle is horizontally oriented and the elements are arranged from the left.

Row-reverse: The direction of the spindle is horizontal, but the elements are arranged from right to left.

Column: The spindle is vertically oriented and the elements are arranged from top to bottom.

Column-reverse: The spindle is vertically oriented, but the elements are arranged from the bottom up.

Reverse is the meaning of inversion, row-reverse is that the base of the row is reversed, originally from left to right, then now is from right to left, Column-reverse represents from bottom to top.

Its default value is row, and even if we do not set this property, its value is row. This also explains the above, when we only give UL set Display:flex, when all the li is arranged horizontally.

In addition to Flex-direction, there are 5 properties that can be used on the Flex container, the parent element, which are: Flex-wrap, Flex-flow, Justify-content, Align-items, Align-content. Here we introduce

Flex-wrap: It defines how the elements are arranged when we have a very long flex project, where the lines in the Flex container do not fit, and the line is not wrapped. It has three property values: nowrap, wrap and wrap-reverse;

NoWrap is its default value, which means no line breaks, so many items are always arranged in one row, which results in all projects being scaled down.

Wrap means that a line can be wrapped, and an element that does not fit in a row is placed on the next line, forming multiple lines.

Wrap-reverse, as you might have guessed, it also means that it can be wrapped, but in the opposite direction.

We give the UL element to add the three properties to try, then we set the square axis direction is row, Flex-drection:nowrap

ul{Display:Flex;/*add Display:flex; property*/flex-direction:Row;/*Setting the spindle direction*/Flex-wrap:nowrap;/*set whether multiple lines are displayed*/margin:0;padding:0;width:600px;margin:100px Auto;background:Grey;}

Because the LI element is also less, can put down in a row, we write a few li, so that the flex project does not fit in one line.

<ul>        <Li>1</Li>        <Li>2</Li>        <Li>3</Li>        <Li>4</Li>        <Li>5</Li>        <Li>6</Li>        <Li>7</Li>        <Li>8</Li>    </ul>

At this point the page is shown below, under No-wrap, no matter how many flex projects are, it will not wrap, and each item will only shrink to fit the width of the container.

Now change the flex-wrap:nowrap to Flex-wrap:wrap, you can see the following display, two lines show that the Flex project line.

Now replace the flex-wrap:wrap with Flex-wrap:wrap-reverse, you can see the element wrapping, and the first line is below, the above diagram is reversed

Flex-flow: It is shorthand for the above two attributes, the value of Flex-flow:flex-direction flex-wrap, such as: Flex-flow:row wrap, is not introduced.

Justify-content: It defines how flex items are arranged on the spindle. Flex-start, Flex-end, center, Space-between, Space-around

Align-items defines how flex items are arranged on the side axis cross axis .  Flex-start, Flex-end, center, stretch, baseline. The default value is stretch. Baseline

Align-content: Only works when the flex-warp:wrap forms more than one row. It and Aling-item are set, multiple rows, how the elements are arranged on the side axis.

Properties used on a single Flex project: Order | | Flex-grow | | Flex-shrink | | Flex-basis

Just content defines how the elements are arranged on the spindle, on the left side of the container, on the right or in the middle.

Align how items defined in the items are aligned on the side axis. It has two values of Strech base. Strech The default property, if our item does not have a height or height of auto, then it will be stretched in the direction of the side axis, occupying the space of the entire side axis.

Baseline mainly refers to the p in the Flex-item, the following alignment in the P tag, and if there is no P tag, the bottom of the element is aligned.

Align Self: The main alignment of an element on the side axis is set, the default property is auto, so if not set, it is consistent with the Align-item property. If set, it does not overwrite the Align-item property.

Settings for a single Flex Item property

Flex-basis: Control the default size of each Flex-item, before other properties, it and item width or height of each other, if we set the spindle is the horizontal direction flex-direction row, it and the width of the element to exchange each other, If we set the spindle direction perpendicular to flex-direction column, it will change the height of the element.

Flex-grow: It refers to when Flex-item does not occupy the entire flex-contain space, each element how to change, do not become larger to occupy space, grow is the growth, grow up meaning, its default value is 0, will not change. When we set the Flex-grow value of each Flex-item to 1, we can see that it fills the space of the entire flex container, and the value of Flex-grow overrides the value of width. So what does this attribute value 1 represent? We set all the values to 999, and it has no difference in shape and just set to 1.

Now let's change the value of one of the Flex-item to Flex-grow to 2, we can find that this element is bigger, and then 3, it is larger, from here can be seen that it is not an absolute value, it is relative, is the proportion of an element relative to its elements. When setting each item's Flex-grow to 1 o'clock, a total of 6 elements, then 6, the entire flex-container will be divided into 6 parts, each flex-item each one, so the same. If one of our flex-flow is set to 2. Or 6 elements, the entire Flex container is divided into 1+1+2+1+1+1 = 7, the remaining 5 are 1/7, and the third is 2/7, so the third one is relatively large, and the ratio of one or some of the items set by Flex-grow to other items.

Flex-shrink:shrink contraction, each item shrinks when the sum of the width of each flex item exceeds the Flex-contaier container. Its default value is 1, which means that each element shrinks proportionally. If you set the Flex-shrink of an element to 0, it will not shrink. If you set it to 3, like Flex-grow, it is also proportional, each flex item shrinks by 1, it shrinks by 3, it shrinks more than other items.

Flex: Is the above three attribute shorthand, like the border border property. Flex:flex-grow Flex-shrink flex-basis

Its default value is 0 1 auto, which is consistent with our usual not set this property, Flex-basis:auto said that it is consistent with the width or height of the element, Flex-grow equals 0, indicating that if the parent element has the remaining space, it will not expand,

Flex-shrink, if the parent element has insufficient space, it shrinks.

Now we set two elements, one is flex:2 1 300px;  One is 1 2 300px; The width of the parent element is 640px, just drop the element.

Now let's see how Flex-shrink works. When we change the width of the container to 430px; The entire container lost 210px of space, because the first element of the Flex-shrink is 1, the second shrink is 2, so the loss of 210px, divided into 3 parts, the first element accounted for 1 parts, that is 70px, so the first element lost 70px, The width becomes 300-70 =230px; The second element occupies two parts, which is 140px, so the second element loses 140px; the width becomes 300-140= 160px; Flex-grow works the same way, when we increase the width of the container to 940px, when it gets more 300px space, each element will increase, because the first is Flex-flow is 2, the second flex-flow is 1, so this more out of 300px, Also divided into 3 parts, the first project accounted for 2 parts, 200px, the width increased to 300+200 =500px; The second accounted for 1 parts, 100px, the width increased to 300+100 =400px;

CSS3---Flex box