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;