Full solution of CSS3 elastic layout grammar

This article describes the syntax for CSS3 elastic layouts

2. HTML Layout

   <class="box">    <class="item">1</div>    <div class="item">2</div>    <class="item">3</div></div>

3. CSS notation (the elastic layout defaults to the x axis as the spindle and is displayed from left to right)

   .Box{    width:  -%;    Border:1px solid #ccc;    Display:Flex; //Open Flexible layoutFlex-direction:Row-Reverse; //Adjust the display direction from right to left    /*Flex-direction:column; set spindle to Y axisJustify-content Set the arrangement rules for the item along the spindle directionFlex-start at the beginning of the spindleFlex-end at the end of the spindleCenter row in the middle of the spindleSpace-between average arrangement, no gap at both endsSpace-around average arrangement with clearance at both endsAlign-items Setting the item's alignment rules along the secondary axisFlex-start at the beginning of the secondary axisFlex-end at the end of the sub-axisCenter row in the middle of the secondary axisbaseline Text Baseline alignmentstretch automatically stretches the item to fill the remaining void, which is the default value that can be set by setting the width height override default valuealign-content:when the item width exceeds the total width of the container, it is compressed and can be set flex-flow:row wrap; let him wrap it.you can use Align-content to set the arrangement rules for multiple lines of item, that is, the arrangement of the secondary axes.setting properties and justify-content all along, just one more stretchStretch Jambila The secondary axis of the line, occupying the remaining spaceFlex-flowThis is flex-direction and flex-wrap and writing forms.Flex-wrap set up line wrappingnowrap Default Valuenowrap Automatic Line wrappingWrap-reverse The starting position of the replacement secondary axis    */}.Item{    Flex: 1; //Set Item percentage    /*align-self Setting the arrangement of individual itemattribute values are consistent with Align-itemsOrder sort priority, can be a positive integer, negative integer, default is 0such as Order:1the higher the value, the lower the priority    */}

5. Small example

    Box  { width  :  500rpx     height     :  500rpx border     :  1px solid #ccc  display  :  flex  . item     { width  :  200rpx;  height      :  100rpx margin  :  auto background  :  red }   

CSS3 Elastic Layout Syntax Full solution