css 使用二

css使用一

一、place-items

在相关的布局，如grid或flexbox，可以同时沿着块级和内联方向对齐元素。

构成属性：align-items、justify-items

如果未提供第二个值，则第一个值作为第二个值的默认值。

ie不兼容，其他都兼容。

代码示例参照：https://codepen.io/una/pen/YzyYbBx

二、align-items

将所有直接子节点上的 align-self 值设置为一个组。a

lign-self 属性设置项目在其包含块中在交叉轴方向上的对齐方式。

属性值：

1、normal:

1. 在绝对定位的布局中，对于被替代的绝对定位盒子，这个效果和start?的效果的一样；对于其他所有绝对定位的盒子，这个效果和stretch的效果一样。
2. 在绝对定位布局的静态位置上，效果和stretch一样。
3. 对于那些弹性项目而言，效果和stretch一样。
4. 对于那些网格项目而言，效果和stretch一样，除了有部分比例或者一个固定大小的盒子的效果像start。
5. 这个属性不适用于块级盒子和表格。

        这个我也不太理解，复制粘贴的……

2、flex-start:元素向垂直轴起点对齐

3、flex-end:元素向垂直轴末端对齐

4、start:项目在适当的轴上朝着对齐容器的起始边缘对齐。

5、end:项目在适当的轴上朝着对齐容器的末端对齐。

6、center:元素在垂直轴居中。如果元素在垂直轴上的高度高于其容器，那么在两个方向上溢出距离相同。

7、left:元素在左边缘对齐。如果属性的轴与内联轴不平行，则该值的效果类似于start。

8、right:元素在右边缘对齐。如果属性的轴与内联轴不平行，则该值的效果类似于start。

9、self-start:元素在适当轴上，对齐容器的顶部边缘对齐。

10、self-end:元素在适当轴上，对齐容器的底部边缘对齐。

11、baseline:first baseline,last baseline 所有元素向基线对齐。侧轴起点到元素基线距离最大的元素将会于侧轴起点对齐以确定基线。

12、stretch:元素包含外边距的交叉轴尺寸被拉升至行高。

三、justify-items

使元素沿适当轴线对齐到每个盒子。

属性值：

stretch：元素包含外边距的适当轴尺寸被拉升至行高。

center：元素在对其容器适当轴居中对齐。

start：元素在对其容器适当轴开始位置对齐。

end：元素在对其容器适当轴结束位置对齐。

四、flex

一种一维的布局，能处理一个维度上的元素布局，一行或者一列。有两根轴线，主轴和交叉轴。

主轴由flex-direction定义，交叉轴垂直于主轴。

flex-direction:

row:元素横向排列，默认值

row-reverse:元素横向排列 起始线和终止线交换

colume:竖向排列

colume-reverse:竖向排列 起始线和终止线交换

flex元素有以下行为：

1、排列为一行或一列

2、从主轴起始线开始

3、不会在主轴方向拉伸，但可以缩小

4、拉伸填充交叉轴大小

5、flex-basis:auto

6、flex-wrap:nowrap

由于flex-wrap的值设置为wrap,所以项目的子元素换行显示，nowrap会用允许缩小的初始flexbox值缩小以适应容器，若子元素无法缩小会导致溢出或缩小程度不够。所以为了实现多行效果需设置属性flex-wrap值为wrap。

flex可以设置为三个属性flex-grow、flex-shrink、flex-basis，即flex:<grow> <shrink><basis>，这三个属性改变flex容器的可用空间。flex里除了元素所占的空间以外的富余空间就是可用空间。

flex-basis:定义元素空间大小，无指定尺寸采用元素内容的尺寸。改变控件基础标准。

flex-grow:赋值为正整数沿主轴方向增长尺寸，按比例分配空间。增加空间。

flex-shrink:处理主轴上收缩空间问题。收缩空间

五、grid

网格布局，主要属性：grid-template、grid等。

grid-template 包含三个属性：grid-template-rows、grid-template-columns、grid-template-areas

1、grid-template-rows、grid-template-columns

网格行、网格列

属性值：none、长度大小、百分比（用/分割）、fr单位的弹性大小（1fr和100%的概念一样）、max-content（最大值）

、min-content(最小值)、minmax(min,max)、auto、repeat(次数，长度)(重复)

repeat次数可以为正整数、auto-fit、auto-fill;长度也可以用minmax等。

可根据列的数量用空格分隔属性，比如：auto 1fr auto

用/分割表示占比。

2、grid-template-areas

网格区域。

属性值：none或用空格分隔的字符串（非矩形无效）。

设置行列的不同样式用 /分割。

10、clamp

设置值的范围

clamp：最小值、首选值、最大值

小于最小值用最小值，在最大值和最小值之间用首选值，大于最大值用最大值。

参考路径：

MDN Web Docs

如何用一行 CSS 实现 10 种现代布局

https://codepen.io