lucky 的学习笔记(CSS 弹性盒子)

lucky 的学习笔记(CSS 弹性盒子)
0

只要在一个元素的 CSS 中添加 display: flex; ,就可以使用其他 flex 属性来构建响应式页面了。

1、flex-direction
只要把 flex-direction 属性添加到父元素,并设置其为 row 或 column 即可轻易横或竖排列它的子元素。设为 row 可以让子元素水平排列,column 可以让子元素垂直排列。flex-direction 的其他可选值还有 row-reverse 和 column-reverse。flex-direction 的默认值为 row。

2、justify-content

  • flex-start :从 flex 容器的前端开始排列项目。对行来说是把项目都靠左放,对于列是把项目都靠顶部放。
  • flex-end :从 flex 容器的后端开始排列项目。对行来说是把项目都靠右放,对于列是把项目都靠底部放。
  • space-between :项目间保留一定间距地在主轴排列。第一个和最后一个项目会被挤到容器边沿。例如,在行中第一个项目会紧贴着容器左侧,最后一个项目会紧贴着容器右侧,然后其他项目均匀排布。
  • space-around :与 space-between 相似,但头尾两个项目不会紧贴容器边缘,空间会均匀分布在所有项目两边

3、align-items

可以用于在交叉轴调整 flex 子元素。对于行,它规定了项目在容器中应该靠上还是靠下,而对于列,就是靠左或靠右。

  • flex-start :从 flex 容器的前端开始排列项目。对行来说是把项目都靠顶部放,对于列是把项目都靠左放。
  • flex-end :从 flex 容器的后端开始排列项目。对行来说是把项目都靠底部放,对于列是把项目都靠右放。
  • center :把项目的位置调整到中间。对于行,垂直居中(项目上下方空间相等)。对于列,水平居中(项目左右方空间相等)。
  • stretch :拉伸项目,填满 flex 容器。例如,排成行的项目从容器顶部拉伸到底部。
  • baseline :基线对齐地排列。基线是字体相关的概念,可以认为字体坐落在基线上。

4、flex-wrap

使项目换行。这意味着多出来的项目会被移到新的行或列。换行发生的断点由项目和容器的大小决定。

  • nowrap :默认值,不换行。
  • wrap :行从上到下排,列从左到右排。
  • wrap-reverse :行从下到上排,列从右到左排。

5、flex-shrink

如果 flex 容器太小,该项目会自动缩小。当容器的宽度小于里面所有项目的宽度,项目就会自动压缩。

flex-shrink 属性接受 number 类型的值。数值越大,与其他项目相比会被压缩得更厉害。例如,如果一个项目的 flex-shrink 为 1 ,另一个项目 flex-shrink 为 3,那么 3 的那个与另一个相比会受到 3 倍压缩。

6、 flex-growflex-shrink 相对。

7、flex-basis 属性指定了项目在 CSS 进行 flex-shrinkflex-grow 调整前的初始大小。

8、上面几个 flex 属性有一个简写方式。 flex-growflex-shrinkflex-basis 属性可以在 flex 中一同设置。

例如, flex: 1 0 10px; 会把项目属性设为 flex-grow: 1;flex-shrink: 0; 以及 flex-basis: 10px;

9、 order 属性告诉 CSS flex 容器里项目的顺序。默认情况下,项目排列顺序与源 HTML 文件中顺序相同。这个属性接受数字作为参数,可以使用负数。

10、 align-self 调整每个项目自己的对齐方式,而不是一次性设置全部项目。允许值与 align-items 一样,并且它会覆盖 align-items 的值。

1赞

这样记录知识点的方式很棒啊,一起加油吧,祝我们都早日学有所成 :blush: