flex
flex的用法https://pic4.zhimg.com/v2-56ad1e28c507d485dfec85d382293609_1440w.jpgflex-direction:
row（默认值）：主轴为水平方向，起点在左端。
[*]row-reverse：主轴为水平方向，起点在右端。
[*]column：主轴为垂直方向，起点在上沿。
[*]column-reverse：主轴为垂直方向，起点在下沿。
https://pic2.zhimg.com/v2-92171bf5efac3cdafab4cba87d1d4251_1440w.jpg
https://pic1.zhimg.com/v2-d3b789b9249eaf8f3eea1f2671899cae_1440w.jpg
https://pic2.zhimg.com/v2-961b4b59eb563dd9cb07b2a9ba3c7837_1440w.jpg
flex-wrap:
[*]nowrap（默认）：不换行。
[*]wrap：换行，第一行在上方。
[*]wrap-reverse：换行，第一行在下方。
https://pic4.zhimg.com/v2-3ebaf79d34d9dae47f2b422c9f4de0bd_1440w.jpg
https://pic2.zhimg.com/v2-cc9aee6c0ffdde4ed5a3de0665a046ff_1440w.jpg
https://pic1.zhimg.com/v2-7cee6aba7b8c32de1ecb64471eda564e_1440w.jpg
justify-content:
[*]flex-start（默认值）：左对齐
[*]flex-end：右对齐
[*]center： 居中
[*]space-between：两端对齐，项目之间的间隔都相等。
[*]space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。
https://pica.zhimg.com/v2-2c01d71ac7fde5132c15f1b9ba7bd4a8_1440w.jpg
https://pica.zhimg.com/v2-e36474ce260a97c93b1eb675ce380d6a_1440w.jpg
https://picx.zhimg.com/v2-05e4c333e87b0b4680fbc1430def9617_1440w.jpg
https://pic3.zhimg.com/v2-c06f4e8baa56764b71294ff9202fe870_1440w.jpg
align-items:
[*]flex-start：交叉轴的起点对齐。
[*]flex-end：交叉轴的终点对齐。
[*]center：交叉轴的中点对齐。
[*]baseline: 项目的第一行文字的基线对齐。
[*]stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。
https://picx.zhimg.com/v2-6999ac9cf4d9d49768a1a7bf5c0d733f_1440w.jpg
https://pica.zhimg.com/v2-16239fe8da993486056438de6e7745cc_1440w.jpg
https://pic2.zhimg.com/v2-34217cd167dfd6aebb4c6c5227c5710f_1440w.jpg
https://pic2.zhimg.com/v2-d2dfe1eb8eb5919e36fdc854097eaa21_1440w.jpg
https://pic4.zhimg.com/v2-e0f31ddf428c96c0911d446c4478ef6b_1440w.jpg
align-content:定义了多根轴线的对齐方式，如果项目只有一根轴线，那么该属性将不起作用
[*]flex-start：与交叉轴的起点对齐。
[*]flex-end：与交叉轴的终点对齐。
[*]center：与交叉轴的中点对齐。
[*]space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。
[*]space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。
[*]stretch（默认值）：轴线占满整个交叉轴。**此案例转自他人
https://pic3.zhimg.com/v2-7f045355e6ac42ac9333643cd43d2992_1440w.jpg
https://pic4.zhimg.com/v2-0fa15f1e30642ac29ab60193022536df_1440w.jpg
https://pica.zhimg.com/v2-83bef30fdba549fb064342746a666a18_1440w.jpg
https://pic2.zhimg.com/v2-c9ea29c7581eab83972f0df1cc15c5ab_1440w.jpg
https://pica.zhimg.com/v2-deb5a867334d3ad9761ee381c8d52912_1440w.jpg
https://pic1.zhimg.com/v2-1f55772f6de2e9dfe3b158bf5009dc4a_1440w.jpg
order属性 能改变盒子的顺序....随心所欲的那种https://pic2.zhimg.com/v2-1abae0e150d0d84493f867974472be8b_1440w.jpg
flex-grow注:项目中盒子会按照字的多少呈现出合适的大小,很神奇!https://pic1.zhimg.com/v2-ba6dfbea335c06e0ccdb57ffba762832_1440w.jpg
flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。
如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。
负值对该属性无效①https://pica.zhimg.com/v2-e1a8d0497b30fff97aa8487a6eb0a006_1440w.jpg
②https://picx.zhimg.com/v2-7a47e1efbc4746e09605711558312c53_1440w.jpg
③https://picx.zhimg.com/v2-965c96fd9fa207a968dfbc29bf0e896d_1440w.jpg
④https://pic2.zhimg.com/v2-5ed6a787a22c126015129ae126a4608d_1440w.jpg
align-self: auto | flex-start | flex-end | center | baseline | stretch;属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。https://pic4.zhimg.com/v2-4a631a656caf8eb0df7c3e3f2ba0e74b_1440w.jpg
https://pic2.zhimg.com/v2-f656109be35bf9d82b1972bc888a4779_1440w.jpg
--------------------------------------------------flex结束--------------------------------------------------display: grid;布局---开始.grid-fill {display: grid;grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));gap: 16px;margin-bottom: 40px;}.grid-fit {display: grid;grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));gap: 16px;}如下图:
https://pic4.zhimg.com/v2-2d136f01af1284349da63239d4b5d2a9_1440w.jpg
https://pic2.zhimg.com/v2-207d51aca9f17157989a4c3232414275_1440w.jpg
划分3行3列display: grid;grid-template-columns: 100px 100px 100px; // 3列 还可以是%grid-template-rows: 50px 50px 50px; // 3行grid-template: 100px 100px 100px / 50px 50px 50px;//grid-template-rows和grid-template-columns简写
重复repeatgrid-template-columns: repeat(2, 100px 50px); 就展示了4列 公式：重复次数 * 参数的个数=2*2 =4display: grid;grid-template-rows: repeat(2, 50%);grid-template-columns: repeat(2, 100px 50px);
https://pica.zhimg.com/v2-36dbdc8734bdf0aaf8faa5d65709cc3a_1440w.jpg
row-gap: 30px;行间距width: 300px;height: 200px;display: grid;grid-template-rows: repeat(2, 1fr);grid-template-columns: repeat(3, 1fr);row-gap: 30px;
https://pic4.zhimg.com/v2-b2d82d8fd4c0ebd50684eb957d96e673_1440w.jpg
column-gap:20px列间距https://pic2.zhimg.com/v2-a613d89b08ee2fdde74e4ce6105a147f_1440w.jpg
间距组合定义width: 300px;height: 200px;display: grid;grid-template-rows: repeat(2, 1fr);grid-template-columns: repeat(3, 1fr);gap: 20px 10px;//简写
https://pic3.zhimg.com/v2-fd22e760f1885c9572a0bb840dbeb2f8_1440w.jpg
页:
[1]