CSS3 Flexbox Layout----Flex Project Properties Introduction

Tag: Indicates ISP content text IDT meaning sort style display

Now introduce the CSS properties used in the Flex project, HTML structure or with UL, Li structure, but the content changed to a display:flex, style, directly to the UL set to the Flex container, the default spindle direction for the horizontal direction. Index.html

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

Index.css

ul{Display:Flex;width:600px;Border:1px solid Red;}Li{width:100px;Height:100px;margin:8px;padding:4px;text-align:Center;Line-height:100px;Background-color:#8cacea;}

This page shows the following:

There are a total of 5 properties used on Flex projects, order | | flex-basis | | Flex-grow | | Flex-shrink | | Flex

Order, as implies, sequential meaning, is to re-order each flex project without changing the HTML structure, such as getting the first item on the last side, its value is a number, positive, negative, 0 can be, such as 8. When the browser is redrawn, the Flex project is rearranged according to this number, with the rules being small to large, which item has a large order property, which item is in the back, and vice versa, and if two flex projects have equal order values, they are arranged in the structure defined in the HTML.　　 Of course, the order default value for each flex project is 0, indicating that the flex project is arranged according to the structure defined in the HTML. We add an order attribute to each Li, according to the rule, the third item is ranked first, the second item is the same, the first item is the last one.

{    order: 3;}  {    order: 2;}  {    order: 1;}

The page looks the same as we expected

Flex-basis, before the FLEX-SHINRK and Flex-grow properties work, it controls the default size of each flex project, Flex-shrink and Flex-grow we'll talk about next. Value of flex-basis: Auto | | <length> length is the value of some of our usual properties, such as PX, REM.

The default value of Flex-basic is auto, what does auto mean?

CSS3 Flexbox Layout----Flex Project Properties Introduction