Box-flex flexible and scalable box Model

Box-flex flexible and scalable box Model


I have been focusing on PC-side development and have little access to self-adaptation. Generally, some css methods are used to directly solve some design problems until the current situation begins to change to pure mobile-side development, as a result, I started to get started with new features on the Mobile End. Today I will take notes on flexbox.

The Flexbox layout module allows us to adapt ourselves to the desired layout in unknown or dynamic containers. Vertical center, re-sorting, Dynamic Layout stretching and contraction. At present, the compatibility on mobile terminals is generally good. can I use (Flex ). In essence, Flexbox is not just an attribute, but a type of module, including the scaling container as the parent element and the scaling element of the child element. The scaling element varies depending on the scaling container, similar to the usage percentage of the box size in some cases, however, there will always be some situations where we need to use Nonstandard methods to handle certain situations.
The premise is that the container width and height have been set:

For the common layout logic above, the following html format is generally used.

 
 

  
  
<div class="container">
 
  
  
<div class="item"></div>

  
  
<div class="item"></div>

  
  
<div class="item"></div>

  
  
</div> 
 
 

Use the following css

 
 

  
  
.container{
 
  
  
width: 300px;

  
  
height: 100px;

  
  
margin: 50px;

  
  
}

  
  
.item{

  
  
float: left;

  
  
width: 33.33%;

  
  
height: 100%;

  
  
}

  
  
.item:nth-child(1){

  
  
background-color: #333;

  
  
}

  
  
.item:nth-child(2){

  
  
background-color: #666;

  
  
}

  
  
.item:nth-child(3){

  
  
background-color: #999;

  
  
} 
 
 

But we are more likely to encounter this form.

Well, with some common pseudo-class selectors of css3, we can still write a little better, but html also needs to be slightly disgusting, and of course there are a lot of simple hack writing methods.

 
 

  
  
<div class="container1">
 
  
  
<div class="item1">

  
  
<div class="innerItem1"></div>

  
  
</div>

  
  
<div class="item1">

  
  
<div class="innerItem1"></div>

  
  
</div>

  
  
<div class="item1">

  
  
<div class="innerItem1"></div>

  
  
</div>

  
  
</div> 
 
 

Css is as follows

 
 

  
  
.container1{
 
  
  
width: 300px;

  
  
height: 100px;

  
  
margin: 50px;

  
  
border: 1px solid #000;

  
  
}

  
  
.item1{

  
  
float: left;

  
  
width: 33.33%;

  
  
height: 100%;

  
  
}

  
  
.innerItem1{

  
  
height: 90px;

  
  
margin: 5px 5px 5px 0;

  
  
background-color: #CCC;

  
  
}

  
  
.item1:nth-child(1) .innerItem1{

  
  
margin-left: 5px;

  
  
} 
 
 

Okay. How can I use the html structure in Example 1 to write the layout of example 2 in a beautiful way?

 
 

  
  
<div class="container">
 
  
  
<div class="item"></div>

  
  
<div class="item"></div>

  
  
<div class="item"></div>

  
  
</div> 
 
 

First, we need to create a flex container for flexbox and set its display attribute.

 
 

  
  
.container{
 
  
  
width: 300px;

  
  
height: 100px;

  
  
margin: 50px;

  
  
border: 1px solid #000;

  
  


  
  
display:-webkit-flex;

  
  
display:-ms-flexbox;

  
  
display:flex;

  
  
} 
 
 

Set flex for its child elements:

 
 

  
  
.item{
 
  
  
flex:1;

  
  
background-color: #999;

  
  
margin: 5px 5px 5px 0;

  
  
}

  
  


  
  
.item:nth-child(1){

  
  
margin-left: 5px;

  
  
} 
 
 

In this way, we do not need to place a div layer or write the height of the internal scaling element. The main difference is that the width and height of the internal element are completely dependent on adaptive container elements. You can set the width and height of the container element to make its sub-elements adaptive (previously, the height of multiple nested layers is still not well handled ).
Then, the processing height is coming. Let's take a vertical center first.

Okay, I don't want to write the general form anymore. Let's look at the flexbox form directly.

 
 

  
  
<div class="container-h">
 
  
  
<div class="item-h"></div>

  
  
</div> 
 
 

 
 

  
  
. Container-h {
 
  
  
Height: 300px;

  
  
Width: 100px;

  
  
Margin: 50px;

  
  
Border: 1px solid #000;

  
  


  
  
Display:-webkit-flex;

  
  
Display:-ms-flexbox;

  
  
Display: flex;

  
  


  
  
/* Vertical center */

  
  
-Webkit-align-items: center;

  
  
Align-items: center;

  
  
}

  
  


  
  
. Item-h {

  
  
Flex: 1;

  
  
Height: 100px;

  
  
Background-color: #999;

  
  
Margin: 5px;

  
  
}
 
 

Finally, I wrote a vertical center. I don't need to use line-height, set margin, or compare the whimsy of various css. It suddenly seems that the starting line of the world is the same.
Now, let's get familiar with some simple concepts before felxbox: Scaling container: an external scaling element with display set to flex or inline-flex: sub-element spindle in the scaling container: scaling extension container configuration scaling element direction side axis: vertical line of the spindle
Brief introduction to each attribute:
Flex-direction: row | row-reverse | column-reverse;Define the direction of the spindle on the scaling container.
Row: the default direction and the layout direction.

Row-reverse: opposite to row

Column: top-down Layout

Column-reverse: opposite to column Layout

Flex-wrap: nowrap | wrap-reverse;On a scaling container, it is used to define whether the scaling element in the container is single row or multi-row display. (The minimum height and width are set for each scaling element. The processing done when the scaling container cannot be placed in one row under the minimum width of each element)
Nowrap: default value. The scaling container is displayed as a single line. when the container is too small, internal elements will run out.

Wrap: internal elements are displayed in multiple rows. elements that cannot be placed in one row of the scaling container are placed in the next row (related to the layout direction)

Wrap-reverse: internal elements are displayed in multiple rows. elements that cannot be placed in one row of the scaling container are placed in the upper position.


Flex-flow: | The abbreviation of the preceding two attributes.

Justify-content: flex-start | flex-end | center | space-between | space-around;It is the highlight of a scalable model and is also the css3 attribute that truly elegantly achieves various centers.
Flex-start: the scaling element is aligned with the start position

Flex-end: the scaling element is aligned to the end position

Center: center the scaling Element

Space-between: evenly distributed. The first direction is aligned with the start position, and the last direction is aligned with the end position.


Space-around: the scaling elements are evenly distributed in the row, with half of the space reserved at the beginning and end.



Align-items : Flex-start | flex-end | center | baseline | stretch;
Used to define the alignment of the scaling project inside the scaling container on the side axis
Flex-start: the scaling element moves closer to the start position of the side axis

Flex-end: the scaling element moves closer to the end seat of the side axis

Center: Align scaling elements in the center

Baseline: Alignment of the side axis based on the baseline

Stretch: the default value. The scaling container is filled as much as possible in a more scalable state.

Some attributes are not analyzed one by one:
Order: <int>Indicates the order of the scaling project in the container.

Flex: none | [<flex-grow> <flex-shrink>? | <Flex-basis>]
Flex-grow: <number>Scaling element's unit-less scaling ratio Flex-shrink: <number>Scale down the space according to the shrinkage factor set by the elastic box element. Flex-basis: <length>Scale down the remaining space according to the contraction factor set by the elastic box element.

Test Page code see, try various property value http://hello.exptui.com/demo/cssDemo/flexbox.html in the console