当前位置:网站首页>Flex flexible layout
Flex flexible layout
2022-07-07 09:44:00 【Not enough to eat】
flex Elastic layout
Reprinted from :Flex Layout of the tutorial : Grammatical passage - Ruan Yifeng's Weblog (ruanyifeng.com)
List of articles
Page layout (layout) yes CSS A key application of .
Traditional solutions for layout , be based on The box model , rely on display attribute + position attribute + float attribute . It is very inconvenient for those special layouts , such as , Vertical center It's not easy to do .
2009 year ,W3C Put forward a new scheme —-Flex Layout , It's easy 、 complete 、 Responsive implementation of various page layouts . at present , It's supported by all browsers , It means , Now you can use this function safely .
Flex Layout will be the first choice for future layout . In this paper, Flex The syntax of layout .
The following content mainly refers to the following two articles :A Complete Guide to Flexbox and A Visual Guide to CSS3 Flexbox Properties.
One 、Flex What is the layout ?
Flex yes Flexible Box Abbreviation , Meaning for ” Elastic layout ”, To provide maximum flexibility for box models .
Any container can be specified as Flex Layout .
.box{
display: flex;
}
Inline elements can also be used Flex Layout .
.box{
display: inline-flex;
}
Webkit Browser for kernel , Have to add -webkit Prefix .
.box{
display: -webkit-flex; /* Safari */
display: flex;
}
Be careful , Set to Flex After the layout , The child element float、clear and vertical-align Property will fail .
Two 、 Basic concepts
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 ”.
The container has two axes by default : Horizontal spindle (main axis) And the vertical cross axis (cross axis). Starting position of spindle ( The intersection with the border ) be called main start, The ending position is called main end; The starting position of the cross axis is called cross start, The ending position is called cross end.
Items are arranged along the main axis by default . The spindle space occupied by a single project is called main size, The cross axis space occupied is called cross size.
3、 ... and 、 Properties of the container
following 6 Properties are set on the container .
- flex-direction
- flex-wrap
- flex-flow
- justify-content
- align-items
- align-content
3.1 flex-direction attribute
flex-direction Property determines the direction of the spindle ( That is, the arrangement direction of the project ).
.box {
flex-direction: row | row-reverse | column | column-reverse;
}
It may have 4 It's worth .
- row( The default value is ): The principal axis is horizontal , The starting point is on the left .
- row-reverse: The principal axis is horizontal , The starting point is on the right .
- column: The principal axis is perpendicular , The starting point is at the top .
- column-reverse: The principal axis is perpendicular , Starting edge .
3.2 flex-wrap attribute
By default , The projects are all in one line ( also called ” axis ”) On .flex-wrap Attribute definitions , If an axis doesn't line up , How to wrap .
.box{
flex-wrap: nowrap | wrap | wrap-reverse;
}
It may take three values .
(1)nowrap( Default ): Don't wrap .
(2)wrap: Line break , The first row is at the top .
(3)wrap-reverse: Line break , The first row is at the bottom .
3.3 flex-flow
flex-flow The attribute is flex-direction Properties and flex-wrap Attribute shorthand , The default value is row nowrap.
.box {
flex-flow: <flex-direction> <flex-wrap>;
}
3.4 justify-content attribute
justify-content Property defines the alignment of the item on the spindle .
.box {
justify-content: flex-start | flex-end | center | space-between | space-around;
}
It may take 5 It's worth , The alignment depends on the direction of the axis . Let's assume that the main axis is from left to right .
- flex-start( The default value is ): Align left
- flex-end: Right alignment
- center: In the middle
- space-between: full-justified , The intervals between the items are all equal .
- space-around: The spacing between each item is equal . therefore , The spacing between items is twice as large as the spacing between items and the border .
3.5 align-items attribute
align-items Property defines how items are aligned on the cross axis .
.box {
align-items: flex-start | flex-end | center | baseline | stretch;
}
It may take 5 It's worth . The specific alignment is related to the direction of the cross axis , Let's assume that the cross axis is from top to bottom .
- flex-start: Align the starting points of the intersecting axes .
- flex-end: The ends of the intersecting axes are aligned .
- center: Align the midpoint of the intersecting axis .
- baseline: Baseline alignment of the first line of text for the project .
- stretch( The default value is ): If the project is not set to height or set to auto, Will fill the entire container .
3.6 align-content attribute
align-content Property defines the alignment of multiple axes . If the project has only one axis , This property does not work .
.box {
align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}
This attribute may take 6 It's worth .
- flex-start: Align with the starting point of the intersecting axis .
- flex-end: Align with the end of the cross axis .
- center: Align with the midpoint of the intersecting axis .
- space-between: Align with both ends of the cross axis , The average distribution of spacing between axes .
- space-around: The spacing between each axis is equal . therefore , The spacing between the axes is twice as large as the spacing between the axes and the borders .
- stretch( The default value is ): The axis occupies the entire cross axis .
Four 、 Project properties
following 6 Properties are set on the project .
- order
- flex-grow
- flex-shrink
- flex-basis
- flex
- align-self
4.1 order attribute
order Property defines the order in which items are arranged . The smaller the numerical , The further up the line , The default is 0.
.item {
order: <integer>;
}
4.2 flex-grow attribute
flex-grow Attribute defines the magnification of the item , The default is 0, That is, if there is any remaining space , And don't zoom in .
.item {
flex-grow: <number>; /* default 0 */
}
If all of the items flex-grow Attributes are 1, Then they will divide the remaining space equally ( If any ). If a project flex-grow The attribute is 2, Everything else 1, Then the former will occupy twice as much space as the others .
4.3 flex-shrink attribute
flex-shrink Attribute defines the reduction ratio of the project , The default is 1, That is, if there is not enough space , The project will shrink .
.item {
flex-shrink: <number>; /* default 1 */
}
If all of the items flex-shrink Attributes are 1, When space runs out , I'm going to scale it down . If a project flex-shrink The attribute is 0, Everything else 1, When there is not enough space , The former does not shrink .
Negative values are not valid for this property .
4.4 flex-basis attribute
flex-basis Property defines before allocating extra space , Spindle space occupied by the project (main size). Browser according to this property , Calculate if the spindle has extra space . Its default value is auto, The original size of the project .
.item {
flex-basis: <length> | auto; /* default auto */
}
It can be set to follow width or height Property is the same value ( such as 350px), Then the project will occupy a fixed space .
4.5 flex attribute
flex The attribute is flex-grow, flex-shrink and flex-basis Abbreviation , The default value is 0 1 auto. The last two properties are optional .
.item {
flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}
This property has two shortcut values :auto (1 1 auto) and none (0 0 auto).
It is recommended to use this property first , Instead of writing three separate attributes , Because the browser will calculate the relevant value .
4.6 align-self attribute
align-self Property allows a single item to have a different alignment than other items , covering align-items attribute . The default value is auto, Represents the... That inherits the parent element align-items attribute , If there is no parent element , Is equivalent to stretch.
.item {
align-self: auto | flex-start | flex-end | center | baseline | stretch;
}
This attribute may take 6 It's worth , except auto, Everything else goes with align-items The attributes are exactly the same .
边栏推荐
- How to become a senior digital IC Design Engineer (1-6) Verilog coding Grammar: Classic Digital IC Design
- [bw16 application] Anxin can realize mqtt communication with bw16 module / development board at instruction
- 小程序弹出半角遮罩层
- 如何成为一名高级数字 IC 设计工程师(1-6)Verilog 编码语法篇:经典数字 IC 设计
- 【BW16 应用篇】安信可BW16模组/开发板AT指令实现MQTT通讯
- sqlplus乱码问题,求解答
- VSCode+mingw64+cmake
- JS reverse tutorial second issue - Ape anthropology first question
- [4G/5G/6G专题基础-146]: 6G总体愿景与潜在关键技术白皮书解读-1-总体愿景
- 有没有大佬帮忙看看这个报错,有啥排查思路,oracle cdc 2.2.1 flink 1.14.4
猜你喜欢
Install pyqt5 and Matplotlib module
[4G/5G/6G专题基础-146]: 6G总体愿景与潜在关键技术白皮书解读-1-总体愿景
Where is the answer? action config/Interceptor/class/servlet
其实特简单,教你轻松实现酷炫的数据可视化大屏
印象笔记终于支持默认markdown预览模式
【frida实战】“一行”代码教你获取WeGame平台中所有的lua脚本
JS逆向教程第一发
AI从感知走向智能认知
CSDN salary increase technology - learn about the use of several common logic controllers of JMeter
網易雲微信小程序
随机推荐
[Frida practice] "one line" code teaches you to obtain all Lua scripts in wegame platform
Nested (multi-level) childrn routes, query parameters, named routes, replace attribute, props configuration of routes, params parameters of routes
Dynamics 365online applicationuser creation method change
Binary tree high frequency question type
Colorbar of using vertexehelper to customize controls (II)
用flinksql的方式 写进 sr的表,发现需要删除的数据没有删除,参照文档https://do
How to become a senior digital IC Design Engineer (5-2) theory: ULP low power design technology (Part 1)
Unity shader (learn more about vertex fragment shaders)
Upload taro pictures to Base64
Esp8266 uses TF card and reads and writes data (based on Arduino)
面试被问到了解哪些开发模型?看这一篇就够了
创建一个长度为6的int型数组,要求数组元素的值都在1-30之间,且是随机赋值。同时,要求元素的值各不相同。
**grafana安装**
[4g/5g/6g topic foundation -147]: Interpretation of the white paper on 6G's overall vision and potential key technologies -2-6g's macro driving force for development
flinkcdc 用sqlclient可以指定mysqlbinlog id执行任务吗
[4g/5g/6g topic foundation-146]: Interpretation of white paper on 6G overall vision and potential key technologies-1-overall vision
Oracle installation enhancements error
VSCode+mingw64
Final keyword
js逆向教程第二发-猿人学第一题