当前位置:网站首页>Flex flexible layout
Flex flexible layout
2022-07-05 03:28:00 【Lao Zhang typed the code online】
What is? flex
felxbox Layout is used for elastic layout , Can be adapted rem Deal with the problem of size adaptation
advantage :
Any container can be specified as flex Layout , More flexible
More in line with the characteristics of responsive layout
shortcoming :
Browser compatibility is not high , Compatible only ie9 Above browser
0
flex-direction
effect : The arrangement of child elements in the parent element box
attribute :row
Is the default value , From left to right row-reverse
And row contrary , From right to left column
Display child elements vertically , Default from top down column-reverse
And column contrary , From bottom to top
flex-warp
effect : Whether the child element is wrapped in the parent element box
attribute :nowrap
The default value is , No line breaks or column breaks warp
Line or column breaks wrap-reverse
Line break or column break , But in the opposite direction
flex-flow
effect : Combine the characteristics of the above two attributes
Example :flex-flow:row wrap
(x Axis arrangement and line feed )
justify–content
effect : Evenly distribute the space occupied by child elements within the parent element
attribute :flex-start
The default value is , From left to right , The first child element is next to the beginning of the line flex-end
Contrary to the above center
centered space-between
Evenly distributed on this line , There is no room on both sides space-around
Evenly distributed on this line , There is half of the space between the two sub elements
align-items
effect : Set each flex Alignment of elements on the cross axis ( If the spindle is x Then the cross axis is y, If the spindle is y The opposite is true )
attribute :flex-start
At the beginning of the container flex-end
At the end of the container center
centered
align-content
effect : Operate multi line elements as a whole
attribute :flex-start
At the beginning of the container flex-end
At the end of the container center
Align center space-between
Leave space between , Close on both sides space-around
There is also a blank on both ends
边栏推荐
- 为什么腾讯阿里等互联网大厂诞生的好产品越来越少?
- 看 TDengine 社区英雄线上发布会,听 TD Hero 聊开发者传奇故事
- Machine learning experiment report 1 - linear model, decision tree, neural network part
- el-select,el-option下拉选择框
- Basic knowledge of tuples
- [groovy] string (string type variable definition | character type variable definition)
- Design and implementation of campus epidemic prevention and control system based on SSM
- Hot knowledge of multithreading (I): introduction to ThreadLocal and underlying principles
- Linux安装Redis
- Eight days of learning C language - while loop (embedded) (single chip microcomputer)
猜你喜欢
Azkaban actual combat
Pdf things
Talk about the SQL server version of DTM sub transaction barrier function
This + closure + scope interview question
Asp+access campus network goods trading platform
Kbp206-asemi rectifier bridge kbp206
Yyds dry goods inventory intelligent fan based on CC2530 design
Utilisation simple de devtools
Azkaban实战
Tiny series rendering tutorial
随机推荐
ICSI213/IECE213 Data Structures
Design of kindergarten real-time monitoring and control system
Why do some programmers change careers before they are 30?
Moco V2 literature research [self supervised learning]
Leetcode92. reverse linked list II
Design and implementation of campus epidemic prevention and control system based on SSM
SQL performance optimization skills
Pdf things
The perfect car for successful people: BMW X7! Superior performance, excellent comfort and safety
Delphi read / write JSON format
The perfect car for successful people: BMW X7! Superior performance, excellent comfort and safety
Kuboard
[daily problem insight] Li Kou - the 280th weekly match (I really didn't know it could be so simple to solve other people's problems)
Pat grade a 1119 pre- and post order traversals (30 points)
There is a question about whether the parallelism can be set for Flink SQL CDC. If the parallelism is greater than 1, will there be a sequence problem?
Ask, does this ADB MySQL support sqlserver?
Voice chip wt2003h4 B008 single chip to realize the quick design of intelligent doorbell scheme
[deep learning] deep learning reference materials
2.常见的请求方法
qrcode:将文本生成二维码