布局样式|flex布局个人学习总结及入门案例 html|flex|css

写在前面
flex布局笔者学习时主要参考阮一峰老师的flex讲解，这里给出参考链接可做补充学习，Flex布局教程：语法篇、 Flex布局教程：实例篇。
下面则为笔者个人学习总结和一个入门案例。
理论知识
采用 Flex 布局的元素，称为 Flex 容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称"项目"。

文章图片

容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。默认的主轴方向是从左到右，默认的交叉轴方向是从上到下。
项目默认沿主轴从左往右排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。
容器的属性

flex-direction
flex-wrap
flex-flow
justify-content
align-items
align-content

这六个属性是设置在Flex 容器(flex container)上的，也就是设置了CSS代码++display：flex++的元素上的，具体语法参考上面的Flex 布局教程：语法篇
实际工作中可能用的比较多的有以下属性

flex-direction
flex-wrap
justify-content
align-items
align-content

项目的属性

order
flex-grow
flex-shrink
flex-basis
flex
align-self

这六个属性是设置在Flex 项目(flex item)上的，也就是设置在Flex 容器(flex container)的所有子元素上的，具体语法参考上面的Flex 布局教程：语法篇
实际工作中可能用的比较多的有以下属性

flex
align-self

入门案例

文章图片

效果图如上，使用flex布局实现效果布局。
【布局样式|flex布局个人学习总结及入门案例】首先搭建页面基本架构，
HTML代码如下：

姓名：学号：班级：年龄：性别：爱好：展开

CSS代码如下：

body{ background-color: #e6e6e6; }.wrapper{ width: 1063px; padding: 20px; margin: 0 auto; background-color: #fff; }

页面基本架构效果图如下：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-8C0Vcpj6-1628524161578)(https://junjiang.top/upload/2021/07/1-51e8c9e0374346d287b8478d0911ce6b.png)]
接下来就可专注于写CSS代码，实现flex布局排列
第一步选定一个元素作为Flex 容器(flex container)，一般选所要布局排列的元素的公共父元素，这里选择label元素的父元素,接着从上到下先实现input元素的布局排列，在原CSS代码基础上添加：

.content { display: flex; flex-wrap: wrap; justify-content: flex-end }label { width: 345px; height: 55px; text-align: center; line-height: 55px; }

效果如下：

文章图片

这里为什么要给label元素设置高度呢？这是因为，flex布局默认一行从左向右排列，但设置了 ++flex-wrap: wrap++ 后，当元素填满一行宽度后会自动换行，因此当为label设置了固定的宽度后，就可决定一行放多少个lable元素了。同理，以后flex布局中遇到类似这种效果，都可通过设置一个固定宽度来决定一行放多少个元素。
接下来就剩下把新增按钮排列到右边，如果用flex布局来实现，就可以嵌套使用flex布局了，到底该谁和谁嵌套呢？，在原CSS代码基础上修改wrapper为：

.wrapper{ width: 1063px; padding: 20px; margin: 0 auto; background-color: #fff; display: flex; flex-wrap: wrap; justify-content: flex-end; }

效果如下：

文章图片

可以看到相当于在原flex布局的父元素wrapper上再实现flex布局，即嵌套使用了路由，父元素wrapper上的flex布局不影响原flex布局，而新增按钮受
justify-content: flex-end; 影响向右排列了，最后再添加点外上边距即可实现效果图所示效果，到此大工告成。
以上例子是笔者个人刚学习flex布局时所遇到的问题，或有不足，请见谅，其中最重要的是，元素的固定宽度和嵌套flex布局的何时使用和用法，然后灵活使用flex布局的各属性，相信你一定可以做好flex布局。
以上仅代表个人观点。