CSS3 Flex Box (Flex Box)

CSS3 Flex Box

Flex Box is a new layout mode of CSS3.

CSS3 Flexible Box (Flexible Box or flexbox) is a layout method that ensures that elements have appropriate behavior when the page needs to adapt to different screen sizes and device types.

The purpose of introducing the flexible box layout model is to provide a more efficient way to arrange, align and allocate empty space to sub-elements in a container.

CSS3 flexible box content

The flexible box is composed of a flexible container (Flex container) and a flexible sub-element (Flex item).

A flexible container is defined as a flexible container by setting the value of the display property to flex or inline-flex.

The flexible container contains one or more flexible sub-elements.

Note: The outside of the flexible container and inside the flexible sub-element are rendered normally. The flex box only defines how the flex child elements are laid out within the flex container.

Flexible sub-elements are usually displayed in one line within the flexible box. By default there is only one row per container.

The following elements show that the elastic sub-element is displayed in a row, from left to right:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<style> 
.flex-container {
    display: -webkit-flex;
    display: flex;
    width: 400px;
    height: 250px;
    background-color: lightgrey;
}
.flex-item {
    background-color: cornflowerblue;
    width: 100px;
    height: 100px;
    margin: 10px;
}
</style>
</head>
<body>
<div class="flex-container">
  <div class="flex-item">flex item 1</div>
  <div class="flex-item">flex item 2</div>
  <div class="flex-item">flex item 3</div>  
</div>
</body>
</html>

The following will explain each attribute of the old version through a simple example:

<html>
<head>
<meta charset="utf-8">
<style>
p{
    width:150px;
    border:3px solid lightblue;
    background:lightgreen;
    padding:5px;
    margin:5px;
}
</style>
</head>
<body>
<div>
    <p>发生过的空间还是看价格哈健康啊水果和卡刷卡更何况规划哈萨克的骨灰撒块光辉卡萨很干净啊是高科技傻空给发生过的空间还是看价格哈健康啊水果和卡刷卡更何况规划哈萨克的骨灰撒块光辉卡萨很干净啊是高科技傻空给</p>
    <p>发生过的空间还是看价格哈健康啊水果和卡刷卡更何况规划哈萨克的骨灰撒块光辉卡萨很干净啊是高科技傻空给</p>
    <p>发生过的空间还是看价格哈健康啊水果和卡刷卡更何况规划</p>
</div>
</body>
</html>

The above result is normal. Take a look at the following example:

<html>
<head>
<meta charset="utf-8">
<style>
p{
    width:150px;
    border:3px solid lightblue;
    background:lightgreen;
    padding:5px;
    margin:5px;
}
div{
    display:-webkit-box;
    display:box;
}
</style>
</head>
<body>
<div>
    <p>发生过的空间还是看价格哈健康啊水果和卡刷卡更何况规划哈萨克的骨灰撒块光辉卡萨很干净啊是高科技傻空给发生过的空间还是看价格哈健康啊水果和卡刷卡更何况规划哈萨克的骨灰撒块光辉卡萨很干净啊是高科技傻空给</p>
    <p>发生过的空间还是看价格哈健康啊水果和卡刷卡更何况规划哈萨克的骨灰撒块光辉卡萨很干净啊是高科技傻空给</p>
    <p>发生过的空间还是看价格哈健康啊水果和卡刷卡更何况规划</p>
</div>
</body>
</html>

See, now each p element has become a box. This is the magic of flexible layout!

In the above, we set the display of the div element to box, which is the old version of flexible layout. For older browser versions, we need to add the -webkit- prefix.

The old version of elastic layout has two attribute values:

box: display the container box model as a block-level elastic expansion box; inline-box: display the container box model as an inline-level elastic expansion box Box display

PS: We know that the block level occupies the entire row, such as the div element; while the inline level does not occupy the entire row, such as the span element. But we set up the entire box so that none of them occupied it, keeping it consistent. Just like our example above, if a box is set for the div element, the p element inside the div element will not be occupied.

box-orient attribute

The box-orient attribute mainly realizes the flow direction of elements inside the box.

div{
    display:-webkit-box;
    display:box;
    -webkit-box-orient:vertical;
    box-orient:vertical;
}

The result at this time is vertical arrangement:

The attribute values of this attribute are:

horizontal: telescopic items from left to Right horizontal arrangement vertical: Flexible items are arranged vertically from top to bottom inline-axis: Flexible items are arranged along the inline axis and displayed block-axis: Flexible items are arranged along the block axis and displayed

You may wish to try: horizontal and inline-axis are arranged horizontally, while vertical and block-axis are arranged vertically.

box-direction property

The box-direction attribute is mainly used to set the flow order in the scaling container.

div{
    display:-webkit-box;
    display:box;
    -webkit-box-direction:reverse;
    box-direction:reverse;
}

The attribute values of this attribute are:

normal: normal order, default value reverse: reverse order

box-pack attribute

box-pack Properties used to distribute scalable items.

The attribute values of this attribute are:

start : The telescopic items are aligned with the starting point end : The telescopic items are aligned with the end point center : The telescopic items are aligned with the center point justify : The telescopic items are aligned with the center point Tie distribution

Let’s try the effect of each attribute value:

start attribute value:

div{
    -webkit-box-pack:start;
    box-pack:start;
}

2. end attribute value:

div{
    -webkit-box-pack:
end
;
    box-pack:
end
;
}

3.center attribute value:

div{
    -webkit-box-pack:
center
;
    box-pack:
center
;
}

4.justify attribute value:

div{
    -webkit-box-pack:
justify
;
    box-pack:
justify
;
}

PS: The same principle applies in the vertical direction, but if height If it is auto, the effect will not be produced. So you need to set a fixed height for height (preferably higher than the default). At this time, you can see the effect in the vertical direction. I won’t go into details here.

box-align attribute

The box-align attribute is used to handle the extra space of the scalable container.

The attribute values of this attribute are:

Start: The scalable project is based on the top, clearing the extra space in the lower part. End: The scalable project is based on the bottom, clearing the extra space in the upper part. center: The scalable project is based on the bottom. The middle part is used as the baseline, and the extra space in the upper and lower parts is cleared on average. Baseline: The scalable project is based on the baseline, and the extra space is cleared. Stretch: The flex project fills the entire container. The default value is

Similarly, we will try each attribute value. Effect:

1.start attribute value

div{
    display:-webkit-box;
    display:box;
    -webkit-box-align:start;
    box-align:start;
}

2.end attribute value

div{
    display:-webkit-box;
    display:box;
    -webkit-box-align:
end
;
    box-align:
end
;
}

3.center attribute value

div{
    display:-webkit-box;
    display:box;
    -webkit-box-align:
center
;
    box-align:
center
;
}

4.baseline attribute value

If box-orient is inline single-axis or horizontal, all child elements are aligned to their baseline.

div{
    display:-webkit-box;
    display:box;
    -webkit-box-orient:horizontal;
    box-orient:horizontal;
    -webkit-box-align:baseline;
    box-align:baseline;
}

And if box-orient is block axis or vertical, then all child elements will be centered and arranged vertically.

div{   
 display:-webkit-box;  
   display:box;  
     -webkit-box-orient:vertical;  
       box-orient:vertical;   
        -webkit-box-align:baseline;  
          box-align:baseline;
          }

5.stretch attribute value

All child elements stretch to fill the containing block.

div{   
 display:-webkit-box;  
   display:box;  
     -webkit-box-align:stretch;    
             box-align:stretch
;}

box-flex property

The box-flex property can use floating point numbers to allocate the proportion of the telescopic item. This property is set for the items in the container. They will allocate their proportion based on the width of the parent container:

p:nth-child(1){
    -webkit-box-flex:1;
    box-flex:1;
}p:nth-child(2){
    -webkit-box-flex:3;
    box-flex:3;
}p:nth-child(3){
    -webkit-box-flex:1;
    box-flex:1;
}

Of course, some items can have a fixed width, and other items will also be allocated. The remaining width, for example, the first p element here is set to a fixed width:

p:nth-child(2){
    -webkit-box-flex:2;
    box-flex:2;
}p:nth-child(3){
    -webkit-box-flex:1;
    box-flex:1;
}

For more usage, you can try it yourself slowly.

box-ordinal-group attribute

The box-ordinal-group attribute can set the display position of the scalable item.

p:nth-child(1){
    -webkit-box-ordinal-group:2;
    box-ordinal-group:2;
}p:nth-child(2){
    -webkit-box-ordinal-group:3;
    box-ordinal-group:3;
}p:nth-child(3){
    -webkit-box-ordinal-group:1;
    box-ordinal-group:1;
}

You can see: the first p element is ranked second, the second p element is ranked third, and the third p element is ranked first. This attribute can be set individually for a p element, and other items will be changed in the original order.

OK, then all the attributes of the old version have been briefly introduced. For more combined usage, you can practice it yourself as needed.

Here is an example of horizontal and vertical centering:

div{   
 display:-webkit-box;  
   display:box;   
    height:500px; 
       border:1px solid #f00; 
          -webkit-box-pack:center;  
            box-pack:center;   
             -webkit-box-align:center;  
               box-align:center;
               }

At this time, we set a fixed height for the p element:

p{
    width:150px;
    height:200px;
}

CSS3 flexible box attribute

Next The table lists the properties commonly used in flexible boxes:

#Attributes Specify HTML element box type.

flex-direction Specifies the arrangement of sub-elements in the flexible container

justify-content Sets the alignment of the flex box elements in the main axis (horizontal axis) direction.

align-items Set the alignment of the flexible box elements in the side axis (vertical axis) direction.

flex-wrap Set whether the child elements of the flex box should wrap when they exceed the parent container.

align-content Modify the behavior of the flex-wrap attribute, similar to align-items, but instead of setting the alignment of child elements, set the row alignment

flex-flow The abbreviation

Order Sets the sub -element arrangement order of the elastic box.

align-self Used on flex child elements. Override the container's align-items property.

flex to set how the child elements of the flex box allocate space.

Continuing Learning

new file

<html> <head> <meta charset="utf-8"> <style> p{ width:150px; border:3px solid lightblue; background:lightgreen; padding:5px; margin:5px; } div{ display:-webkit-box; display:box; } </style> </head> <body> <div> <p>发生过的空间还是看价格哈健康啊水果和卡刷卡更何况规划哈萨克的骨灰撒块光辉卡萨很干净啊是高科技傻空给发生过的空间还是看价格哈健康啊水果和卡刷卡更何况规划哈萨克的骨灰撒块光辉卡萨很干净啊是高科技傻空给</p> <p>发生过的空间还是看价格哈健康啊水果和卡刷卡更何况规划哈萨克的骨灰撒块光辉卡萨很干净啊是高科技傻空给</p> <p>发生过的空间还是看价格哈健康啊水果和卡刷卡更何况规划</p> </div> </body> </html>

submit Reset Code

Automatic operation

CSS3 Flex Box (Flex Box)

ElementaryImperial CMS enterprise imitation website tutorial

ElementaryNewbies with zero foundation in WordPress build personal blogs and corporate websites

ElementaryUltimate CMS zero-based website building instruction video

ElementaryFront-end project-Shangyou [HTML/CSS/JS technology comprehensive practice]

IntermediateVue3.0 from 0 to build a universal backend management system project practice

ElementaryZero-based front-end course [Vue advanced learning and practical application]

ElementaryWEB front-end tutorial [HTML5+CSS3+JS]

ElementaryQuick introduction to apipost

IntermediateVue3+TypeScript practical tutorial-enterprise-level project practice

ElementaryLet's briefly talk about starting a business in PHP

IntermediateVUE e-commerce project (front-end & back-end dual project actual combat)

ElementaryApipost practical application [api, interface, automated testing, mock]