当前位置:网站首页>Align items and align content in flex layout
Align items and align content in flex layout
2022-07-06 03:38:00 【Under the white night】
Definition
align-items : Attribute definitions flex children stay flex Container of Current row The side axis of ( The vertical axis ) In the direction of Alignment mode .
center: The element is in the center of the container .
The elastic box element is on the side axis of the line ( The vertical axis ) Top center .( If the size of the line is smaller than the size of the elastic box element , It will overflow the same length in both directions ).
align-items:center
align-content: All lines inside the free box will be set as all in one Arrange vertically . in the light of Multiple lines The arrangement on the vertical axis as a whole , This attribute is not valid for single line .
center: The element is in the center of the container .
Each row is stacked towards the middle of the elastic box container . Each line is close to each other and aligned in the middle of the elastic box container , Keep the distance between the beginning content boundary of the side axis of the elastic box container and the first row equal to the distance between the end content boundary of the side axis of the container and the last row .( If the rest of the space is negative , Then each line will overflow an equal distance in both directions .)
There must be... In the container Multiple lines Project , This attribute can render the effect .
Be careful
align-items and align-content It has the same function , But the difference is that it is used to make everyone A single Instead of centering the entire container .
Because both are defined in flex Position of the element in the layout , therefore align-items And align-content To work with display:flex Use it together
expand
- flex Layout :Flex yes Flexible Box Abbreviation , Translated into Chinese “ Elastic box ”, Used to provide maximum flexibility for boxed models . Any container can be specified as Flex Layout .
- use Flex Elements of layout , be called Flex Containers (flex container), abbreviation ” Containers ”. All its child elements automatically become container members , be called Flex project (flex item), abbreviation ” project ”.
Reference resources :
Reference resources 1
Reference resources 2( Rookie programming )
边栏推荐
- Shell pass parameters
- [Qt5] QT QWidget immediately appears and disappears
- Shell 传递参数
- 出现Permission denied的解决办法(750权限谨慎使用)
- Failure causes and optimization methods of LTE CSFB
- Lua uses require to load the shared library successfully, but the return is Boolean (always true)
- 记录一下逆向任务管理器的过程
- 3.1 rtthread 串口设备(V1)详解
- February 14, 2022 Daily: Google long article summarizes the experience of building four generations of TPU
- Map sorts according to the key value (ascending plus descending)
猜你喜欢
教你用Pytorch搭建一个自己的简单的BP神经网络( 以iris数据集为例 )
Remote Sensing Image Super-resolution and Object Detection: Benchmark and State of the Art
2.2 STM32 GPIO操作
2. GPIO related operations
StrError & PERROR use yyds dry inventory
[analysis of variance] single factor analysis and multi factor analysis
Exness foreign exchange: the governor of the Bank of Canada said that the interest rate hike would be more moderate, and the United States and Canada fell slightly to maintain range volatility
Flask learning and project practice 9: WTF form verification
EDCircles: A real-time circle detector with a false detection control 翻译
下一个行业风口:NFT 数字藏品,是机遇还是泡沫?
随机推荐
施努卡:视觉定位系统 视觉定位系统的工作原理
Yyds dry inventory what is test driven development
2.2 STM32 GPIO操作
Force buckle 1189 Maximum number of "balloons"
Pytorch基础——(1)张量(tensor)的初始化
Pointer written test questions ~ approaching Dachang
Restful style
[matlab] - draw a five-star red flag
Brush questions in summer -day3
The ECU of 21 Audi q5l 45tfsi brushes is upgraded to master special adjustment, and the horsepower is safely and stably increased to 305 horsepower
Canvas cut blocks game code
Image super resolution using deep revolutionary networks (srcnn) interpretation and Implementation
An article will give you a comprehensive understanding of the internal and external components of "computer"
A brief introduction to symbols and link libraries in C language
Pointer for in-depth analysis (problem solution)
. Net 6 and Net core learning notes: Important issues of net core
The solution of permission denied (750 permissions should be used with caution)
Tidb ecological tools (backup, migration, import / export) collation
关于非虚函数的假派生
Mapping between QoE and KQI