flex布局 | CSS

flex布局 | 全面且简洁

💡常用但常忘的知识点 🤔 小小总结一下吧

主轴（main axis）是沿着 flex 元素放置的方向延伸的轴（比如页面上的横向的行、纵向的列）。该轴的开始和结束被称为 main start 和 main end。
交叉轴（cross axis）是垂直于 flex 元素放置方向的轴。该轴的开始和结束被称为 cross start 和 cross end。
设置了 display: flex 的父元素被称之为 flex 容器（flex container）。
在 flex 容器中表现为弹性的盒子的元素被称之为 flex 项（flex item）

规定主轴(main axis)的方向

flex-wrap是CSS中用于控制Flex容器中的子元素如何换行的属性。它决定了当子元素在主轴方向上无法一行容纳时是否换行，并且指定了换行的方式。

flex-direction和flex-wrap的缩写

flex-direction: row;
flex-wrap: wrap;
//等价于
flex-flow: row wrap;

用于指定子元素在可用空间增加时的扩展比例。它的值为一个非负整数，默认为 0。

如果所有的子元素的 flex-grow 值都为 0，它们将不会扩展，宽度将根据它们的内容或固定宽度来确定。
如果一个子元素的 flex-grow 值大于 0，而其他子元素的值为 0，那么这个子元素将占据剩余的可用空间，其占据空间的比例为 flex-grow 值与其他子元素的和的比例。

用于指定子元素在空间不足时的缩小比例。它的值为一个非负整数，默认为 1。

用于指定子元素在主轴上的初始大小。它的值可以是一个长度值（如像素、百分比等），或者关键字 auto。

article {
  flex: 1 200px;
}

article:nth-of-type(3) {
  flex: 2 200px;
}

这表示“每个 flex 项将首先给出 200px 的可用空间，然后，剩余的可用空间将根据分配的比例共享”。

当使用flex属性的缩写形式时，可以指定最多三个不同值：flex-grow、flex-shrink和flex-basis

.flex-container {
  display: flex;
}

.flex-item {
  flex: 1 0 100px;
  background-color: red;
  margin: 5px;
}

align-items 控制flex项在交叉轴 cross axis上的位置
- 默认值是stretch
- center居中常用
- flex-start``flex-end设置对齐开始结束
- align-self某个元素覆盖align-items
justify-content 控制flex项在主轴 main axis上的位置
- flex-start flex-end
- center
- space-around 沿着主轴均匀分布，任意一端留有空间
- space-between 沿着主轴均匀分布，两端不会留有空间

前端 > css

#笔记