CSS3 Flexbox属性与弹性盒模型学习笔记-CSDN博客

本文链接：https://blog.csdn.net/weixin_43451006/article/details/99576446

Flex属性和弹性盒模型概述

以下几种属性设置在弹性盒布局中是不起作用的：
- 浮动元素（float）
- 清除浮动（clear）
- css3多列布局（columns-*）
- 垂直居中（vertical-align）
- 首行/首字符选择伪类（::first-line和::first-letter）
有的flex属性只能作用于flex容器，而有的flex属性只能作用于flex条目。
传统的布局方案中:
- 块级布局（block）默认是将各个块级元素按照垂直方向自上向下依次堆放；
- 内联布局（inline）默认是将各个内联元素按照水平方向按照从左到右的顺序依次堆放。
弹性盒布局：
- 弹性盒布局不存在这种默认的布局方向限制，它提供了独立的布局方向属性，开发人员可以根据布局需要自行设置。

弹性盒布局基本概念

flex container

即所谓的容器（或者称之为弹性盒、flex容器），特指设置了弹性盒布局的dom元素。

flex item

即所谓的条目（或者称之为flex条目），即容器的子元素。

main axis和cross axis

即所谓的主轴和交叉轴（有的翻译文章也称之为侧轴）。这两个属性定义flex布局方向。分别对应的是水平还是垂直方向不固定，开发人员完全自定义主轴和交叉轴的方向。

在使用flex布局时，首先明确主轴的方向，然后交叉轴的方向也会随之确定下来。因为交叉轴的方向始终是与主轴的方向是垂直的。
flex容器中flex条目可以根据布局需要排列成单行或者多行。
主轴的作用是确定每一行上flex条目的排列方向。
（当flex条目成多行排列时）交叉轴的作用是确定行与行之间的排列方向。

main start和main end

即所谓的主轴起点和主轴终点。

明确主轴的方向后，还需要确定各自的排列方向。
假如已经明确主轴的方向是水平的，那么其排列方向仍然会有两种可选，一种是从左到右的排列方向（flex条目从左到右依次堆放），另一种是从右到左排列方向（flex条目从右到左依次堆放）。
主轴起点在左，主轴终点在右即为从左到右的排列方向。
主轴起点在右，主轴终点在左即为从右到左的排列方向。

cross start和cross end

即所谓的交叉轴起点和交叉轴终点。

交叉轴起点和交叉轴终点明确了行与行之间的排列顺序。
假如已经明确交叉轴的方向是垂直的，那么其排列方向仍然将会有两种可选，一种是从上到下的排列方向（第二行在第一行的下方），另一种是从下到上的排列方向（第二行在第一行的上方）。

所以，在flex容器进行布局时，在每一行中会把其中的flex条目从主轴起始位置开始，依次排列到主轴结束位置。当flex容器中存在多行时，会把每一行从交叉轴起始位置开始，依次排列到交叉轴结束位置。

main size和cross size

即所谓的主轴尺寸和交叉轴尺寸。

对应dom元素在主轴和交叉轴上的大小。
如果主轴方向是水平的（那么交叉轴方向肯定是垂直的），此时主轴尺寸即是dom元素（flex容器）的宽度属性，交叉轴尺寸即是dom元素（flex容器）的高度属性。
如果主轴方向是垂直的，那么主轴尺寸和交叉轴尺寸对应的dom元素宽高属性与之前相反。

针对flex容器的属性

flex-direction

设置主轴方向。
flex-direction属性值及含义

flex-wrap

用于设置当所有的flex条目的尺寸之和超过flex容器的主轴尺寸时应该采取的行为。
flex-wrap属性值及含义

flex-flow

其实就是flex-direction和flex-wrap的结合。

针对flex条目的属性

order

自定义flex容器中条目的顺序。

用整数值来定义排列顺序，数值小的排在前面。默认值为0，可为负值。

flex-basis

用于设置flex条目的初始尺寸（未进行任何调整之前）。

当设置为auto（默认值）时，则实际使用的值是主轴尺寸属性的值。
若主轴尺寸也是auto，那么使用的值由条目内容的尺寸来确定。

flex-grow

当主轴尺寸足够大时，flex条目在容器内一行就全部排列完了，此时容器的空间还有剩余，那么可用flex-grow扩展flex条目。

根据其数值分配剩余空间。
以行为单位来操作。

flex-shrink

设置当主轴尺寸不够大时缩小flex条目。

和flex-grow原理类似，自行体会。
以行为单位来操作。

flex条目的对齐

基于margin: auto对齐

使用空白边，flex容器中额外的空白空间将会由被声明为auto的空白边占据。

基于主轴对齐

通过justify-content属性来进行设置，调整flex条目在主轴方向上的对齐策略，还可以控制当条目超出行的范围时的对齐方式。

发生在修改条目的弹性尺寸和处理自动空白边之后。

基于交叉轴对齐

align-items - 设置flex容器。
align-self - 设置flex条目。
- 属性值和align-item差不多，除此之外，align-self还可以设置为auto：其值是父节点的属性align-items的值,如果该节点没有父节点，则为stretch。
对flex条目设置align-self来复写flex容器指定的对齐方式。