Flex layout-Ctrip project
Traditional layout and flex layout
Traditional layout
- Good compatibility and cumbersome layout
- Limitations, cannot be well laid out on mobile
flex layout
- Convenient operation, extremely simple layout, and a wide range of mobile applications
- PC browser support is relatively poor
- IE11 low version does not support
options
- If it is a PC-side page layout, consider the traditional layout mode
- If it is a mobile terminal or a PC terminal that does not consider compatibility issues, use flex flexible layout
Layout principle
- Flexible box flexible layout, used to provide maximum flexibility for boxed models, any container can be designated as flex layout
- When the parent box is set to flex layout, the float, clear and vertical-align attributes of the child element will all be invalid
- Flexible layout=flexible layout=flexible box layout=flexible box layout=flex layout
- Using flex elements-containers
- All child elements are automatically container members-projects
Common attributes
Common attributes of parent
flex-direction sets the direction of the main axis
- row defaults from left to right
- row-reverse from right to left
- column from top to bottom
- column-reverse from bottom to top
Arrangement of child elements on the main axis of justify-content
- flex-start defaults to the main axis x from the head, from left to right
- flex-end arranges from the end
- center The main axis is aligned in the center
- space-around divide the remaining space equally
- space-between first welt the two sides and then divide the rest equally
Whether flex-wrap child elements wrap
- nowrap default value does not wrap
- wrap
align-items side axis sub-element arrangement (single line)
- flex-start defaults from top to bottom
- flex-end from bottom to top
- huddled together in the center
- stretch
align-content side axis sub-element arrangement (multi-line)
- flex-start defaults to the main axis x from the head, from left to right
- flex-end arranges from the end
- center The main axis is aligned in the center
- space-around divide the remaining space equally
- space-between first welt the two sides and then divide the rest equally
- stretch sets the height of the child element to bisect the height of the parent element
flex-flow properties
- Composite flex-direction and flex-wrap
Common attributes of children
The number of flex items
-
You can allocate the remaining space of the parent box to the child project
-
Realize the Holy Grail layout: After setting the fixed width and height of the boxes of 1, 3 elements, set the flex value of 1 directly to the box of 2 to make it exclusive of the remaining parent box space, so that it can change with the page .
section {
/* 必须先设置成为flex布局 */
display: flex;
width: 80%;
margin: 40px auto;
}
div:nth-child(2) {
flex: 1;
}
align-self controls the arrangement of children themselves on the cross axis
- This attribute allows a single item to have a different alignment from other items and can override the align-items attribute
- The default value is auto, which inherits the align-items property of the parent element. If there is no parent element, it is equivalent to stretch
order defines the order of the children
- Adjust the loading order of the children, the default is 0
- If you want to make the premise, the attribute value can be a negative number, if it is in the future, you must give a large number
Ctrip mobile terminal
Search box part
- Use flex layout to allow the search content to occupy the remaining space of the parent element, flex:1, so that the effect that the area changes as the page changes
- Small icons are added using pseudo elements
- The realization of the vertical layout, the text above the picture below
- Realize the horizontal arrangement of pictures and text
- Adjust the main axis to Y axis
- Then center it on the cross axis
.search-box .login {
/* 内部使用flex布局样式 */
display: flex;
flex-direction: column;
/* 主轴侧轴的子元素样式均设置为center排布 */
align-items: center;
justify-content: center;
}
//插入伪元素精灵图的步骤
.search-box .login::after {
content: "";
display: block;
width: 22px;
height: 22px;
background: url(../images/sprite.png)no-repeat 0 -36px;
background-size: 21px auto;
order: -1;//对排布的先后顺序进行调整
}
- Background image gradient using pseudo elements
.focus::after {
content: "";
display: block;
background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0));
}
local-nav column part
- Use ul, li to achieve basic horizontal layout
- In each li, use flex to make Y as the main axis and X as the side axis to center
Main navigation section
- Write the common structure and style first, and re-modify the special style
background-image: url(../images/hot_sale.png), linear-gradient(to right, #ffbc49, #ffbc49);
- Set background properties
- Add a gradient background
- The color-changing background written later will overwrite the background image written first
subnav-entry layout
- The navigation bar cannot use flex distribution. You need to add a percentage of the width and then make the layout adaptive width
- The li label is still used internally, the background is added through an i label, the span is added to the problem, Y is the main axis, and the list style can be realized by centering it
Popular activity area
- About the writing of the small arrow
- Can be achieved by pseudo-class, set an upper right border
- Locate elements by the method of son and father
- Confirm the small arrow to the correct direction by rotating 45°
Add a background to the label of i, add a question to the span, set Y as the main axis, and then align it in the center to achieve the list style
[External link pictures are being transferred...(img-alrHagqp-1609680194967)]
Popular activity area
- About the writing of the small arrow
- Can be achieved by pseudo-class, set an upper right border
- Locate elements by the method of son and father
- Confirm the small arrow to the correct direction by rotating 45°
