layout
Web page layout (layout) is a key application of CSS.
The traditional solution of layout is based on the box model. The display: inline | block | inline-block attribute, position attribute, and float are used to implement the layout. It lacks flexibility and some adaptation effects are difficult to achieve.
Flex layout-call it "flexible layout"
In 2009, w3c proposed a new solution-Flex layout. Ken has a simple, complete and responsive implementation of various page layouts. Browser support: Chrome21 +, Opera12.1 +, Firefox22 +, Safari6.1 +, IE10 +
Reminder: any container are willing to have designated as Flex layout display: flex; inline elements also willing to have the use of Flex layout display: inline-flex; Webkit core browser must be added -webkit prefix;
Note: Set Flex layout later, the child elements flex, clearand vertical-alignattributes will fail
Basic concepts of Flex layout
- Elements that use the Flex layout are called Flex containers, or "containers" for short.
- All its child elements automatically become members of the container, called the flex item (flex item), referred to as "item".
There are two axes in the container by default:
- The horizontal x axis is called the main axis (main axis)
- The vertical y axis is called the cross axis (cross axis)
The properties of the
setting container are : setting the container, used to uniformly manage the layout of the items in the container, that is, managing the arrangement and alignment of the items
/* 将容器设置为 Flex 布局 */
display: flex;
/* 通过设置坐标轴, 来设置项目排列方向 */
flex-direction: row(默认) | row-reverse | column | column-reverse;
row: 默认值, 水平方向, 从左到右排列
row-reverse: 水平方向, 从右到左排列
column: 垂直方向, 从上到下排列
column-reverse: 垂直方向, 从下到上排列
/* 设置是否允许项目多行排列, 以及多行排列时换行的方向 */
flex-wrap: nowrap(默认) | wrap | wrap-reverse;
nowrap: 默认值, 不换行。如果单行内容过多, 则溢出容器。
wrap: 换行, 第一行在上方
wrap-reverse: 换行, 第一行在下方
/* 设置项目在主轴方向上对其方式，以及分配项目之间及周围多余的空间 */
justify-content: flex-start(默认) | flex-end | center | space-between | space-around | space-evenly;
flex-state: 默认值, 左对齐, 项目间不留空隙
flex-end: 右对齐, 项目间不留空隙
center: 居中排列, 项目间不留空隙
space-between: 两端对齐, 项目之间的间隔都相等
space-arond: 第一个项目的起点和最后一个项目的终点离主轴的距离是中间项目间距的一半
space-evenly: 项目和项目及主轴的边距离均等
/* 设置项目在行中的对齐方式 */
align-items: stretch(默认) | flex-start | center | flex-end | baseline;
stretch: (默认值) 项目拉伸至填满行高
flex-start: 交叉轴的起点对齐
flex-end: 交叉轴的终点对齐
center: 交叉轴的居中对齐
baseline: 项目的第一行文字的基线对齐
/* 多行排列时, 设置行在交叉轴方向的对齐方式, 以及分配行之间及周围多余的空间 */
align-content: stretch(默认) | flex-start | center | flex-end | space-between | space-around | space-evenly;
stretch: 默认值, 当未设置项目尺寸, 将各行中的项目拉伸至填满交叉轴。当设置了项目尺寸, 项目尺寸不变, 项目行拉伸至填满交叉轴
flex-start: 首行在交叉轴起点开始排列, 行间不留间距
center: 行在交叉轴中点排列, 行间不留间距, 首行和尾行离容器距离相等
flex-end: 尾行在交叉轴终点开始排列, 行间不留间距
space-between: 行与行间距相等, 首尾和容器距离为0
space-around: 行与行间距相等, 首尾和容器距离是行与行间距的一半
space-evenly: 首尾和容器及行与行的距离都相等
The properties of the
setting items are setting items, which are used to set the size and position of the item, and to make special settings for the alignment of the item
/* 设置项目沿主轴方向上的排列顺序, 数值越小, 排列越靠前, 属性值为整数 */
order: 0(默认)
/* 设置项目的缩小比例, 默认为1, 如空间不足, 该项目将缩小 */
flex-shrink: 1(默认)
注意: 如果所有项目属性都为1, 当空间不足时, 都将等比例缩小。如果一个项目的属性为0, 其他为1, 则空间不足时, 前者不缩小。负值对该属性无效
/* 设置项目的放大比例, 默认为0, 如果存在剩余空间, 也不放大 */
flex-grow: 0(默认)
注意: 如果所有项目属性为1, 则等分剩余空间。如一个项目的属性为2, 其他为1, 则前者占据的剩余空间将比其他项多一倍
/* 设置项目占据的主轴空间 */
flex-basis: auto(默认)
注意: 当flex-basis 和 width\height, 其中一个属性值为auto时, 非auto的优先级更高
/* 多个属性的简写形式 */
flex: none | auto | @flex-grow @flex-shrink @flex-basis;
注意: flex 是 flex-grow、flex-shrink、flex-basis 的简写形式
none 等价于 0 0 auto;
auto 等价于 1 1 auto;
/* 设置项目在行中交叉轴上的对齐方式 */
align-self: auto(默认) | flex-start | flex-end | baseline | stretch;
注意: 属性允许单个项目有与其他项目不一样的对齐方式, 可覆盖 align-items 属性。默认 auto, 表示继承父元素的 align-items 属性, 如果没有父元素, 则等同于 stretch
Learning Reference Website
The above notes are transcripts just to deepen understanding ...