首页 前端知识 前端01-css3-flex布局

前端01-css3-flex布局

2024-06-01 10:06:19 前端知识 前端哥 104 235 我要收藏

1.flex布局含义

flex布局,也被称之为弹性盒子布局,是CSS3里面新增的一种布局方式,通过使用fe布局我们可以让布局更加便捷高效

2.如何触发弹性盒子:

1.给父元素添加 display属性,并且将取值设置成:flex
2.父级设置 display: flex; 只影响子一级 孙子级不影响

3.触发弹性盒子有哪些特点?

1.子元素默认横向显示
2.子元素会默认变成块级元素,能设置宽度高度
3.如果只有一个子元素的话,则给子元素添加 margin auto的时候会让子元素直接实现水平垂直居中显示

4.1没有触发弹性盒子 div默认块级元素纵向排列

在这里插入图片描述

4.2设置 display: flex; 触发弹性布局

在这里插入图片描述

5.定义 Flex 容器后可以使用相应的属性, 改变子元素的布局方式,让子元素可以自动的挤压或拉伸

  1. justify-content 主轴元素对齐方式
  2. align-items 交叉轴元素对齐方式
  3. flex-direction 设置主轴方向
  4. flex-wrap 主轴一行满了换行
  5. align-content 交叉轴行对齐方式
  6. flex-flow 同时设置 flex-direction和 flex-wrap属性
5.1设置主轴(默认从左向右)

设置水平为主轴,从右到左
display: flex;
flex-direction: row;//从右到左
flex-direction: row-reverse;//从右到左

在这里插入图片描述

设置垂直为主轴
display: flex;
flex-direction: column;//从上到下
flex-direction: column-reverse;//从下到上
在这里插入图片描述

6.主轴的对齐方式

display: flex;
justify-content: center;//居中对齐
在这里插入图片描述
display: flex;
justify-content: space-between;//元素平分间距(左右元素贴近盒子)
在这里插入图片描述
display: flex;
justify-content: space-evenly;//所有元素间距相等
在这里插入图片描述

7.交叉轴的对齐方式(单行)

display: flex;
align-items: center; //居中
在这里插入图片描述

display: flex;
align-items: stretch;//拉伸 需要删除元素的固定高度
在这里插入图片描述

display: flex;
align-items: flex-end;//将子元素在容器底部对齐
在这里插入图片描述

display: flex;
align-items: flex-start;//将子元素在容器顶部对齐
在这里插入图片描述

8. 交叉轴的对齐方式(多行)

display: flex;
flex-wrap: wrap;//换行
align-content: flex-start; //向上对齐
在这里插入图片描述

display: flex;
flex-wrap: wrap;//换行
align-content: flex-start; //向下对齐
在这里插入图片描述

9.是否换行和换行样式

display: flex;
flex-wrap: nowrap; //不换行 按比例缩放
在这里插入图片描述

display: flex;
flex-wrap: wrap;//换行,从上到下
在这里插入图片描述

display: flex;
flex-wrap: wrap-reverse;//换行,从下到上
在这里插入图片描述

转载请注明出处或者链接地址:https://www.qianduange.cn//article/10453.html
标签
评论
发布的文章

无涯教程-HTML5 - 表单标签

2024-06-08 00:06:06

HTML5基础2

2024-06-07 23:06:19

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!