About the flexible layout of CSS Flex

This article mainly introduces the CSS Flex flexible layout of the relevant information, small series feel very good, and now share to everyone, but also to make a reference. Let's take a look at it with a little knitting.

Case Base Layout

Html

    <ul class= "box" >        <li class= "item" ></li>        <li class= "item" ></li>        <li Class= "Item" ></li>        <li class= "item" ></li>    </ul>

Css

        . box{            Display:-webkit-flex;            Display:flex;        }        . item{            width:200px;            height:300px;            background:red;            border:1px solid #ccc;            font-size:50px;            Text-align:center;            line-height:300px;            Color: #fff;        }

Because Flex is primarily handy with mobile-side layouts, the test looks at Google's simulated mobile side:

because the flex layout is used, the child elements are arranged horizontally by default, so no float is required and does not work;

Parent Box Properties Explore

Flex-direction

Flex-direction represents the direction and order of the child elements, the default row (horizontal, left to right), and row-reverse for horizontal right to left

. box{            Display:-webkit-flex;            Display:flex;            Flex-direction:row-reverse;            }

If each li is set to width:3000px, (current screen width 980px), the effect:

The child element width exceeds, not only does not wrap, will automatically adapts the size, the split is 25%;

The above split is divided evenly between the row and if it is arranged vertically:

Flex-direction:column;

The element will not be squeezed, it has a width of 3000px, but note that it is not wrapped because it is not enough space, but the column value specifies that it is vertically arranged

The following values can be adjusted to reverse the vertical arrangement

Flex-direction:column-reverse; Indicates that the element is inverted vertically

Flex-wrap

Flex-wrap default nowrap: No wrap. The above 3000px sub-element is precisely because this vertical default is not wrapped, so the above set 3000px width, will not wrap;

The same code, if you add more than one sentence

. box{            Display:-webkit-flex;            Display:flex;            Flex-direction:row-reverse;            Flex-wrap:wrap;    Line breaks, the first line is above.        }

It can be found that when set to wrap, the child element width changes to 100% screen width; it's like a flexible box that plugs into a box smaller than itself, and the elastic box automatically shrinks its width.

If you write this:

. box{            Display:-webkit-flex;            Display:flex;            Flex-direction:row-reverse;            Flex-wrap:wrap-reverse;    Line breaks, the first line is below.        }

Flex-flow

The Flex-flow property is a shorthand for the Flex-direction property and Flex-wrap property, and the default value is row nowrap.

Flex-flow:row wrap  = = =  Flex-direction:row; flex-wrap:wrap

The code changes again:

. box{      Display:-webkit-flex;      Display:flex;      Flex-direction:row-reverse;      Flex-wrap:wrap-reverse;    }      can be written in. box{      display:-webkit-flex;      Display:flex;      Flex-flow:row-veverse Wrap-reverse    }

Justify-content

It has five values, where if you compare item to Word document text, Flex-star can be seen as left-aligned, Flex-end: right-aligned; Flex-center: centered;

Focus on the value of Space-around: Split the contents of the free space, each item on both sides of the interval equal;
Set free space as area, with sub-elements k, each child element equals to how much margin is added? ==> area/2k

This example:

. item{    width:200px;}. box{       display:-webkit-flex;       Display:flex;       Justify-content:space-around;}

It is important to note that the interval between items is one times larger than the interval between items and borders.

Space-between: Justified, the interval between items is equal. Don't give

Align-items

Align the word basic know that it is for the vertical direction;

. box{            Display:-webkit-flex;            Display:flex;            Justify-content:space-between;            height:1760px;            Align-items:center;        }

Remember to add a height to the parent; this way you can see that the element is centered vertically.

Other similar attributes are no longer written in one by one.

Flex-start: The start alignment of the intersection axis.
Flex-end: The end alignment of the intersection axis.
Stretch (default): If the item is not set to height or auto, it fills the height of the entire container.

Look at the Baseline property: The baseline alignment of the first line of text in the item.

This property is relatively novel, you can try:

. box{     align-items:baseline;     }         <ul class= "box" >        <li class= "item" style= "height:150px;line-height:150px" >1</li>        <li Class= "Item" style= "height:500px;line-height:500px" >2</li>        <li class= "item" style= "height:250px; line-height:250px ">3</li>        <li class=" item "style=" height:170px;line-height:170px ">4</li >    </ul>

Above I have set a different height and line-height for each item;

You can see the container to adjust its position in order to align the text;

Align-content

Defines the alignment of multiple axes. If the item has only one axis, this property does not work.

. box{            height:1760px;   Height to open            display:-webkit-flex;            Display:flex;            Justify-content:space-between;            Flex-flow:row Wrap; horizontal line wrapping; Generate multi-axis        }                <ul class= "box" >        <li class= "item" >1</li>        <li class= "Item" >2 </li>        <li class= "item" >3</li>        <li class= "item" >4</li>        <li class= " Item ">5</li>        <li class=" item ">6</li>        <li class=" item ">7</li>        <li class= "Item" >8</li>        <li class= "item" >9</li>    </ul>

Try to add code

Align-content:flex-end;

Align-content:space-around;

Align-content:space-between;

Align-content:center;

It can be said that the flex layout controls the vertical direction of the child elements on the parent element.

A study of child element attributes

Order

Probably can be understood as the child element of the queue number, the default is 0, the larger the queue the more after;

<ul class= "box" >        <li class= "item" style= "Order:10" >1</li>        <li class= "Item" style= " Order:11 ">2</li>        <li class=" item ">3</li>        <li class=" item ">4</li>        <li class= "Item" >5</li>        <li class= "item" >6</li>        <li class= "Item" >7</li >        <li class= "item" >8</li>        <li class= "item" >9</li>    </ul>

As you can see, number 1th is ranked behind because the order is set to 10, and number 2nd is the last because of the larger order.

Flex-grow Excess Space allocation ratio

Its value is a number, the default is 0, as long as a coaxial element is set to Flex-grow, all the extra space is allocated according to this scale, and the element fills the entire line. This allocated space is counted within itself;

<ul class= "box" >        <li class= "item" style= "FLEX-GROW:1;" >1</li>        <li class= "item" style= "FLEX-GROW:2;" >2</li>        <li class= "item" >3</li>        <li class= "item" >4</li>        <li class = "Item" >5</li>        <li class= "item" >6</li>        <li class= "item" >7</li>        < Li class= "item" >8</li>        <li class= "item" >9</li>    </ul>

The width of the box is getting bigger, (it's Grow)

If the child element has margin, then the number of horizontal is calculated first, and then the amount of space allocated by the Flex-grow is determined.

For example, the following code

Without setting Flex-grow <li class= "item" style= "flex-grow:0;margin:0 100px;" >1</li> <li class= "item" style= "FLEX-GROW:0;" >2</li>

Set the Flex-grow when <li class= "item" style= "flex-grow:2;margin:0 100px;" >1</li> <li class= "item" style= "FLEX-GROW:1;" >2</li>

Therefore, margin does not count as extra space and will not be redistributed;

Flex-shrink

This property has a bit of the opposite meaning to Flex-grow, which is used to handle non-newline, content beyond the screen, should decide who to narrow;

The larger the value, the greater the scale; default is 1.

Change the code;

. box{    flex-flow:row nowrap;} <ul class= "box" >        <li class= "item" >1</li>        <li class= "item" >2</li>        <li Class= "Item" >3</li>        <li class= "item" >4</li>        <li class= "Item" >5</li>    </ul>

At this point the parent box is not allowed to wrap, but the 5 item width is already wider than the screen;

The following set number 1th flex-shrink:600

<ul class= "box" >        <li class= "item" style= "FLEX-SHRINK:600;" >1</li>        <li class= "item" >2</li>        <li class= "item" >3</li>        <li class = "Item" >4</li>        <li class= "item" >5</li>    </ul>

As you can see, although I set the number 1th to scale very large, but the actual width is not very small, indicating that the browser will decide whether the content is enough to put down, enough to stop scaling;

<ul class= "box" >        <li class= "item" style= "FLEX-SHRINK:600;" >1</li>        <li class= "item" >2</li>        <li class= "item" >3</li>        <li class = "Item" style= "FLEX-SHRINK:200;" >4</li>        <li class= "item" >5</li>        <li class= "item" >6</li>        <li class = "Item" >7</li>        <li class= "item" >8</li>        <li class= "item" >9</li>    < /ul>

When the content was very large, number 1th was obviously scaled very badly, and I found that number 4th, despite setting 200, was the same size as the 1th number set to 600.

This is because they have scaled to the last space that can only hold the text, so it's not going to scale anymore;

Flex-basis

property defines the spindle space (main size) that the item occupies before allocating extra space. Based on this property, the browser calculates whether the spindle has extra space. Its default value is auto, which is the original size of the project.

Simply put, this value will affect the input value of the browser calculation, there are four cases

1, it will be exceeded, and then you set the value is lower than the original value (the original value of 200px per item), your element will be compressed.

<ul class= "box" >        <li class= "item" style= "flex-basis:100px;" >1</li>        <li class= "item" >2</li>        <li class= "item" >3</li>        <li class = "Item" style= "" >4</li>        <li class= "item" >5</li>        <li class= "Item" >6</li>        <li class= "item" >7</li>        <li class= "item" >8</li>        <li class= "Item" >9< /li>    </ul>

1, it will be exceeded, then you set the value is larger than the original value, your element will be relatively enlarged.

<ul class= "box" >        <li class= "item" style= "flex-basis:600px;" >1</li>        <li class= "item" >2</li>        <li class= "item" >3</li>        <li class = "Item" style= "" >4</li>        <li class= "item" >5</li>        <li class= "Item" >6</li>        <li class= "item" >7</li>        <li class= "item" >8</li>        <li class= "Item" >9< /li>    </ul>

3 will not exceed, you set the value is smaller than the original, you still smaller

<ul class= "box" >        <li class= "item" style= "flex-basis:100px;" >1</li>        <li class= "item" >2</li>        <li class= "item" >3</li>    </ul >

4 will not exceed, you set a value larger than the original, you would be larger

<ul class= "box" >        <li class= "item" style= "flex-basis:600px;" >1</li>        <li class= "item" >2</li>        <li class= "item" >3</li>    </ul>

The value you can see as the width, when set to the same as the original worth of time, basically no change

<ul class= "box" >        <li class= "item" style= "flex-basis:200px;" >1</li>        <li class= "item" >2</li>        <li class= "item" >3</li>    </ul>

Align-self

This child element sets the vertical alignment independently; The default auto means how the father defines it; the other values are the same as the Align-items.

<ul class= "box" >        <li class= "item" style= "Align-self:center" >1</li>        <li class= "Item" Style= "Align-self:flex-end" >2</li>        <li class= "item" >3</li>        <li class= "Item" >4 </li>        <li class= "item" style= "Align-self:center" >5</li>    </ul>

This property is primarily handy for special positioning of a WORD element

Flex Properties

is a shorthand for flex-grow, Flex-shrink, and Flex-basis, with a default value of 0 1 auto. The latter two properties are optional.

. item {  Flex:none | [< ' Flex-grow ' > < ' Flex-shrink ';? | | < ' flex-basis ' >]}

This property has two shortcut values: Auto (1 1 Auto) and none (0 0 Auto).

It is recommended that you use this property instead of writing three separate properties separately, because the browser calculates the relevant values.

At last

Mobile use of flex layout feeling is still very force, and usually meet the needs of each screen adaptive, there is a chance to practice more.

The above is the whole content of this article, I hope that everyone's learning has helped, more relevant content please pay attention to topic.alibabacloud.com!