In addition to Weibo, there is also WeChat
Please pay attention
WeChat public account
Shulou
2025-03-31 Update From: SLTechnology News&Howtos shulou NAV: SLTechnology News&Howtos > Development >
Share
Shulou(Shulou.com)06/01 Report--
This article will explain in detail what the common layout of CSS is, and the editor thinks it is very practical, so I share it with you for reference. I hope you can get something after reading this article.
Flex realizes the layout of left, middle and right
The main thing is to use the following code in the parent element
Display: flex
Flex-direction:row
Compared with the traditional layout, is it much easier?
Flex left, center, right
Flex to achieve vertical centering
Display: flex
Justify-content:center
Align-items:center
Flex is vertically centered
You can see that the flex layout is very convenient.
If you want to know more about flex layout, you can read Ruan Da's blog. Of course, you can read MDN.
The previous introduction is all one-dimensional layout, but in terms of complex two-dimensional layout, there is no doubt that the CSS grid layout created to solve the layout is more professional.
Learning grid layout is actually a process of learning corresponding English, so being good at English really has an advantage.
Grid layout to achieve left, middle and right
Although it is a bit overqualified, we are trying to compare it with the previous layout method.
You only need to use two lines of code
Display: grid
Grid-template-columns: 30% 40% 30%
The code of the grid layout is more economical, and the child elements do not need to be set separately, but directly on the parent element.
Grid left, center, right
Of course, the child elements here should match the corresponding grid, that is, 30%, 40%, 30%, 30%, 40%, 30%, 30%, 40%, 30%, 30%, 40%, 30%, 30%, 40%, 30%, 30%, 40%, 30%, 30%, 40%, 30%, 30%, 40%, 30%, 30%, 40%, 30%, 30%, 40%, 30%, 30%, 40%, 30%, 30%, 40%, 30%, 30%, 40%, 30%, 30%, 40%, 30%, 30%, 40%, 30%, 30%, 40%, 30%, 30%, 40%, 30%, 30%, 40%, 30%, 30%, 40%, 30%, 30%, 40%, 30%, 30%, 40
Grid layout
The fr here is the unit of fraction.
Display: grid
Grid-template-columns: 1fr 1fr 1fr. / / 3 columns equally divided
Grid-template-rows: 1fr 1fr 1fr. / / 3 lines evenly divided
Through the above code, a 3x3 grid is implemented.
You can select the corresponding grid and add properties using the following code
Grid-column: 1; / / or 2 or 3
Grid-row: 1; / / or 2 or 3
This is the end of this article on "what are the common layouts of CSS?". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, please share it for more people to see.
Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.
Views: 0
*The comments in the above article only represent the author's personal views and do not represent the views and positions of this website. If you have more insights, please feel free to contribute and share.
Continue with the installation of the previous hadoop.First, install zookooper1. Decompress zookoope
"Every 5-10 years, there's a rare product, a really special, very unusual product that's the most un
© 2024 shulou.com SLNews company. All rights reserved.