0
点赞
收藏
分享

微信扫一扫

Flex布局 + Grid布局

迪莉娅1979 2022-03-11 阅读 36
csscss3html

Flex布局

flexible box弹性盒子 — 任何元素都可以指定为flex布局

flex布局:父元素—容器(flex container),子元素—项目(flex item)

**原理:**当通过给父盒子添加flex属性,来控制子盒子的位置和排列方式

**注意:**当父盒子设为flex布局后,子元素的float、clear、vertical-align属性都失效

容器属性

1. 指定为flex布局

display: flex;
/* 父元素指定为flex布局后,子元素都可以设置宽高 */

2. 设置主轴方向

flex-direction: row / row-reverse / column / column-reverse;

3. 设置主轴上子元素排列方式

justify-content: flex-start;默认值

flex-start / flex-end / center
space-around 平分剩余空间
space-between 先两边贴边,再平分剩余空间

4. 设置换行

flex-warp: nowrap / wrap;

/* 复合写法 */
flex-flow: column wrap;设置主轴方向 允许换行

5. 设置侧轴上子元素的排列方式(单行)

align-items: center / flex-start / flex-end / stretch子盒子不给高度时拉伸;

6. 设置侧轴上子元素的排列方式(多行)

align-content: flex-start;默认值

flex-start / flex-end / center / stretch
space-around 平分剩余空间
space-between 先两边贴边,再平分剩余空间

项目属性

1. flex子项目占的份数

flex: number;
flex: 1;

2. 控制子项目自己在侧轴上的排列方式

align-self: auto;默认
center / flex-start / flex-end / stretch

3. order定义项目排列顺序

/* 数值越小,排列越靠前,默认为0,可以负值 */
order: 1;

flex-shrink: 0; 不要压缩(可能会导致溢出,要加溢出隐藏)

flex-grow 规定项目将对其他灵活项目扩展量

flex-basis 项目的长度

Grid布局

网格布局:父元素—容器,子元素—项目

容器属性

1. 指定为网格布局

display: grid;
display: inline-grid;
/* 可以转换为块元素或行内元素 */

容器触发网格布局后,子元素会转换为块元素,且子元素处于拉伸状态

2. 划分行和列

grid-template-rows:;
grid-template-columns:;

取值说明:

1.取多个具体值,中间空格隔开,

多少个值则代表多少个行/列,值内容代表具体长度

grid-template-rows: 100px 200px 200px 100px;
grid-template-columns: 100px 200px 200px 100px;

2.可以用百分比表示

/* 表示划分5个行,高度分别为父标签的指定百分比 */
grid-template-rows: 10% 20% 30% 20% 20%;

3.划分的行或列,宽度或高度一致的话,可以使用

repeat(行/列个数,百分比/具体值)

grid-template-rows: repeat(3, 100px);
grid-template-columns: repeat(3, 100px);

/* 百分比和具体像素值可以混合使用 */
grid-template-columns: 50px repeat(3, 20%) 70px;

4.可以根据指定的单元格的宽和高,自动划分行和列,分配宽高

/* auto-fill自动铺满,每个占父元素20% */
grid-template-rows: repeat(auto-fill, 20%);
grid-template-columns: repeat(auto-fill, 30%);

5.还可以使用分数来描述

/* 将容器分为5份、3列,每列分别占五分之一,五分之三,五分之一 */
grid-template-rows: 1fr 3fr 1fr;

/* 将容器分为5份、3列,每列分别占五分之一,五分之二,五分之二 */
grid-template-columns: 1fr 2fr 2fr;

6.还可以设置行或列的 最大值和最小值

grid-template-columns: minmax(最小值, 最大值);

/* 表示最后一行,最小100px,最大150px */
grid-template-rows:100px 150px minmax(100px, 150px);

/* 表示最后一列,最小50px,最大150px*/
grid-template-columns: 80px 50px minmax(50px, 150px); 

7.设置auto代替具体值,表示自动填充,占据剩余距离

/* 表示第一列30px,第三列20px,剩余的所有距离都属于第二列 */
grid-template-columns:30px auto 20px;

3. 设置行间距和列间距

grid-row-gap: 20px;
grid-column-gap: 20px;

/* 复合写法 */
grid-gap: 行 列;

4. 设置单元格的排列顺序

grid-auto-flow: row(默认横向排列) / column(纵向排列);

5. 内容在单元格内的对齐方式

justify-items: start左对齐 / end右对齐 / center / stretch;
/* 如果给内容设置了宽高,stretch拉伸 不生效 */

align-items: start左对齐 / end右对齐 / center / stretch;

/* 复合写法 */
place-items: 垂直对齐 水平对齐;

6. 设置网格在容器中的对齐方式

水平对齐方式:
justify-content: start/ end / center / stretch / space-around / space-between / space-evenly网格的列间距和距离容器的间距一样;

垂直对齐方式
align-content: start/ end / center / stretch / space-around / space-between / space-evenly网格的列间距和距离容器的间距一样;

7. 指定网格线名称

/* 划分行和列的时候指定名称 */
grid-template-columns: [c1] 100px [c2] 100px [c3] 100px [c4];
grid-template-rows: [r1] 100px [r2] 100px [r3] 100px [r4];

8. 指定单元格名称

grid-template-areas: 
   'a b c'
   'd e f'
   'h i j'
;

/* 无用的单元格,建议不给名称,用.代替 */
grid-template-areas: 
   '. . .'
   '. e .'
   '. . .'
;

/* 名称可以重复 名称相同的相邻单元格会合并 */
grid-template-areas: 
   'a a c'
   'd e f'
   'h i j'
;

项目属性

1. 合并单元格

指定网格线合并单元格

/* 合并行 */
grid-row-start: r1;
grid-row-enf: r3;

/* 合并列 */
grid-column-start: c2;
grid-column-end: c4;

/* 复合写法 中间要用/隔开 开始线名称/结尾线名称 */
grid-row: r1 / r3;
grid-column: c2 / c4;

2. 指定项目放在指定单元格

1.给所有单元格起名字 - 属于容器属性
2.指定项目放在指定单元格

在要指定的项目 写指定位置单元格名称:
grid-area: e;
举报

相关推荐

0 条评论