css弹性盒子

最新推荐文章于 2022-09-12 20:28:50 发布

布衣而已

最新推荐文章于 2022-09-12 20:28:50 发布

阅读量159

点赞数

本文链接：https://blog.csdn.net/m0_59406757/article/details/119155115

版权

注：本片文章只是为我个人后续复习使用，内容大量参考与搬运freecodecamp，望周知。

1. justify-content:

用于修改子元素的排列方式。
center所有子元素中间对齐，
space-between所有子元素等距排列，与容器边缘紧邻，
space-around所有元素等距排列，与容器边缘有距离，
还有flex-start(默认排列）,flex-end等。

2.display: flex

只要在一个元素的 CSS 中添加 display: flex;，就可以使用其它 flex 属性来构建响应式页面了。同时所有子元素会有上文提到的默认排列。

3.flex-direction: row（行） or row-reverse or column-reverse:

定义列排列还是行排列，默认row排列。

3. align-items(交叉轴）：定义：

align-items 属性与 justify-content 类似。回忆一下，justify-content 属性使 flex 子元素沿主轴排列。行的主轴是水平线，列的主轴是垂直线。

Flex 容器中，与主轴垂直的叫做 cross axis（交叉轴）。行的交叉轴是垂直的，列的交叉轴是水平的。

CSS 中的 align-items 属性用来定义 flex 子元素沿交叉轴的对齐方式。对行来说，定义的是元素的上下对齐方式；对列来说，是定义元素的左右对齐方式。

函数	作用
flex-start	从 flex 容器的起始位置开始对齐项目。对行来说，把项目移至容器顶部；对列来说，是把项目移至容器左边。
flex-end	从 flex 容器的终止位置开始对齐项目。对行来说，把项目移至容器底部；对列来说，把项目移至容器右边。
center	把项目居中放置。对行来说，垂直居中（项目距离顶部和底部的距离相等）；对列来说，水平居中（项目距离左边和右边的距离相等）。
stretch	拉伸项目，填满 flex 容器。例如，排成行的项目从容器顶部拉伸到底部。如未设置align-items的值，那么这就是默认值。
baseline	沿基线对齐。基线是文本相关的概念，可以认为它是字母排列的下端基准线。
:--------:	-------------:

4.flex-wrap:定义：

CSS flexbox 有一个把 flex 子元素拆分为多行（或多列）的特性。默认情况下，flex 容器会调整项目大小，把它们都塞到一起。对于行来说，所有项目都会在一条直线上。
作用：使用 flex-wrap 属性可以使项目换行展示。这意味着多出来的子元素会被移到新的行或列。换行发生的断点由子元素和容器的大小决定。

函数	作用
nowrap	默认值，不换行。
wrap	如果排列以行为基准，就将行从上往下排列；如果排列以列为基准，就将列从左往右排列。
wrap-reverse	如果排列以行为基准，就将行从下往上排列；如果排列以列为基准，就将列从右往左排列。
:--------:	-------------: