Tag：flex
-
Time：2021-1-22
First look at the code and effect <style> .main { outline: 1px solid; display: flex; justify-content: space-between; flex-wrap: wrap; } .main>div { width: 100px; height: 100px; margin-bottom: 10px; background-color: lightgreen; } </style> <body> <div class=”main”> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> <div>6</div> <div>7</div> <div>8</div> </div> </body> You can see that the last div is not in […]
-
Time：2021-1-21
This paper mainly introduces the sample code of realizing seamless scrolling with flex layout, which is shared with you as follows: Demonstration of cases Flex layout The so-called flex layout is elastic box layout, which is commonly used in mobile terminals. However, with the update of browser version, flex layout is increasingly used because of […]
-
Time：2021-1-18
1、 The effect diagram of this paper is as follows: Flex layout is used on the right side of the layout, and if there are more than 3, the line will be wrapped. The parent element code is as follows: .nav-right{ width: 75%; padding: 10px; display: flex; /*The default is horizontal*/ Flex direction: row; / […]
-
Time：2021-1-17
This paper mainly introduces the flex layout to realize the fixed up and down and sliding in the middle. The details are as follows: For example, for a page like this, you want to have a header image, a bottom bar at the bottom, and a sliding middle content area. Briefly introduce how to realize […]
-
Time：2021-1-16
This article mainly introduces the CSS3 flex layout to realize the average allocation of elements. I will leave a note for myself and share it with you. The details are as follows: Example 1: <!DOCTYPE html> <html lang=”en”> <head> <meta charset=”UTF-8″> < title > flex layout <style> *{ padding:0; margin:0; } body,html{ height: 100vh; min-width: […]
-
Time：2021-1-11
quoteAn article by Zhang XinxuShare with you, if you want to modify, enter the link point to the corresponding image to generate the link to enter, can be modified. Problem description //html <div class=”container”> <div class=”list”></div> <div class=”list”></div> <div class=”list”></div> <div class=”list”></div> <div class=”list”></div> <div class=”list”></div> <div class=”list”></div> </div> //css .container { display: flex; justify-content: […]
-
Time：2021-1-4
After using flex layout, you will find that the height of all sub items will be the same after horizontal arrangement. This is because flex layout defaults to: Make all the subitems horizontal. The default is not wrap. Make the subitem as wide as its content, and change the height of all subitems to […]
-
Time：2021-1-3
1. Flex is the abbreviation of flexible box, which means “flexible layout”, and is used to provide the maximum flexibility for the box model. Any container can be specified as a flex layout. Note that when set to flex layout, the float, clear, and vertical align properties of the child elements will be invalid. Elements […]
-
Time：2021-1-2
Before the author in the process of development projects encountered this pit, flex layout and position:absolute/fixed The problem of conflict in China. Later, I came up with a solution. Today I would like to share with you: Project practice: Now we want to make a navigation bar for the head, fix it on the top […]
-
Time：2020-12-31
Flex layout is now a common layout, but sometimes it will lead to some small problems. When I use flex layout to make a picture on the left and text on the right, I find that when the width of the picture is fixed, the width of the picture still changes. In the picture below, […]
-
Time：2020-12-30
Page head fixed layout previously used position:fixed Now it can be implemented with flex layout, which is fast and convenient. Flex layout benefits: 1. Does not destroy the HTML document stream 2. Better compatibility. Display: flex and display: – WebKit box are only named for each stage, and there is no difference. <view> <view class=”header”></view> […]
-
Time：2020-11-26
Inline flex, like inline block, is a display:flex The container is an inline block for external elements. The difference between them is described as follows Flex: displays the object as an elastic expansion box Inline flex: display objects as inline block level elastic expansion boxes In a word, when the flex box container does not […]
