【css】 flex布局基本知识

Flexible Box 模型，是一种一维的布局模型。一个 flexbox 一次只能处理一个维度上的元素布局，一行或者一列。

轴线

flex 属性与主轴和交叉轴有关，通过flex-direction定义

主轴由 flex-direction 定义，可以取 4 个值：

row
row-reverse：交换起始线和终止线位置
column
column-reverse

flex容器

将一个容器设置display:flex后，其直系子元素会变成flex元素，有以下初始行为：

flex-direction:row, 子元素排列成一行
子元素从容器的主轴起始线开始排列
元素不会沿主轴拉伸，但会缩小
元素会沿交叉轴拉伸，填满交叉轴;
flex-basis:auto
flex-wrap:nowrap，不换行

如果元素太多，会沿主轴溢出而不是换行；一些元素比其他元素高，那么元素会沿交叉轴被拉伸来填满它的大小

flex-flow，：flex-firection + flex-flow

flex-direction 和 flex-wrap 组合简写属性
flex-flow第一个指定的值为 flex-direction ，第二个指定的值为 flex-wrap.

如下图，容器设置主轴方向为row，wrap（换行）

flex-firection:主轴方向

主轴的方向也是子元素排列的方向；与主轴垂直的方向是元素拉伸填满的方向

reverse交换起始线和终止线位置，也就是元素从哪里开始排列

row：从左到右
row-reverse：从右到左
column：从上到下
column-reverse：从下到上

flex-wrap：换行/列

对于固定宽/高的子元素，如果设置flex-wrap:nowrap，元素过多会缩小元素以适应容器

flex：

flex可包含以下属性：

可以按照顺序设置三个属性值：

css 复制代码

.one {
  flex: 1 1 auto;
}

也可以使用预定义值：

flex: initial：重置为初始值，即0 1 auto，只能收缩不能拉伸
flex: auto：1 1 auto ，可以收缩拉伸
flex: none：0 0 auto 不可伸缩
flex: <positive-number>：即指设置grow，其他两个默认的1和0

flex-grow

规定容器中分配剩余空间的相对比例；

默认为0，

如果所有的兄弟项目都有相同的 flex-grow 系数，那么所有的项目将剩余空间按相同比例分配，否则将根据不同的 flex-grow 定义的比例进行分配。

[取值]

$`<'width'>`$
width 值可以是 [<length>]，也可以是一个相对于其父弹性盒容器主轴尺寸的[百分数]。负值是不被允许的。默认为 auto。
$`content`$
基于 flex 的元素的内容自动调整大小。

flex-shrink

默认为1

与flex-grow相反，flex-shrink处理当容器没有足够空间时缩小子元素

和grow一样，按照值的比例来控制收缩程度

flex-basis

指定了 flex 元素在主轴方向上的初始大小，默认为auto

当元素设置了宽度时，flex-basis的值就等于width

align-items

控制元素在交叉轴 方向对齐

初始值为stretch，即默认拉伸元素到最高元素高度，在交叉轴方向填满父容器

css 复制代码

/* 基本关键字 */
align-items: stretch;

/* 定位对齐 */
/* align-items 不能设置为 left 和 right */
align-items: center;  //在交叉轴上居中对齐
align-items: start; //与主轴起点或交叉轴起点对齐
align-items: end; //。。。末端对齐
//flex-xx 只能在flex布局中使用；
align-items: flex-start;
align-items: flex-end;

/* 基线对齐 */
//所有 flex 元素都对齐，以使它们的 [flex 容器基线]对齐
align-items: baseline;


/* 全局值 */
align-items: inherit;
align-items: initial;
align-items: revert;
align-items: revert-layer;
align-items: unset;

justify-content

https://developer.mozilla.org/zh-CN/docs/Web/CSS/justify-content

使元素在主轴方向上对齐

初始值为flex-start

常用：

stretch：均匀排列元素，auto-size的元素会被拉伸以适应容器大小
flex-start：均匀排列每个元素，首个元素放置于起点，末尾元素放置于终点
flex-end：和上相反
center ：居中排列
space-around：均匀排列元素，每个元素周围分配相同空间（不包括边与父容器的距离）
space-between：均匀排列元素，元素间间隔相等（包括边与父容器距离）