自适应布局之初识flex
说起自适应、恐怕对于flex那是无人不知无人不晓了吧（如果你真的没听过....emmm 大哥我错了），下面将结合一些例子来简单描述下flex
初识flex
案例一
- 三行代码简单实现下子元素垂直、水平居中
.father {
// 三行水平垂直居中
display: flex;
align-items: center;
justify-content: center;
width: 300px;
height: 300px;
background-color: pink; // pink老师，yyds！！！
}
<div class="father">
<span class=“son”>我是子元素</span>
</div>
案例二
-
上下 固定高度，中间自适应
* { margin: 0; padding: 0; } body { display: flex; flex-direction: column; width: 100vw; min-height: 100vh; background-color: pink; } // 三种写法在当前的情况下一样的效果，其实发生作用的是 flex-grow 属性 main { /* flex: 1; */ /* flex: auto; */ flex-grow: 1; } footer, header { background-color: skyblue; height: 50px; } <body> <header>header</header> <main>main</main> <footer>footer</footer> </body>
案例三
-
左边侧边栏(包含滚动条)，右边上下 固定高度，中间自适应
* { margin: 0; padding: 0; } body { display: flex; flex-direction: column; width: 100vw; min-height: 100vh; background-color: pink; } // 三种写法在当前的情况下一样的效果，其实发生作用的是 flex-grow 属性 main { /* flex: 1; */ /* flex: auto; */ flex-grow: 1; } footer, header { background-color: skyblue; height: 50px; } ----------------新增样式----------------------- aside { width: 100px; height: 100vh; background-color: greenyellow; flex: none; overflow-y: auto; } li { height: 200px; } .main-container { flex: 1; display: flex; flex-direction: column; } ---------------------------------------------- <body> <aside> <ul> <li>item</li> <li>item</li> <li>item</li> <li>item</li> <li>item</li> <li>item</li> <li>item</li> <li>item</li> </ul> </aside> <div class="main-container"> <header>header</header> <main>main</main> <footer>footer</footer> </div> </body>
定义
先说说flex定义、简单来说flex包含两部分，一部分是容器（父容器） 、另一部分是项目（子项） ，就像下面的结构一样，那明白了么？就是一个容器包含了几个子项目，这两部分可以通过flex的一些属性进行控制项目（子项）的位置、对齐方式、响应式的变化方式
<div class="father" style="display: flex">
<span class=“son”>我是子元素</span>
......
<span class=“son”>我是子元素</span>
</div>
有了如上的简单展示，那么开始学习一下flex的具体属性值，其实并不复杂，只要多用即可掌握，记住容器（父元素）6个属性、项目（子项）6个属性值，都是6个，66大顺，很好记对吧。
容器（父元素）
- flex-direction （主轴方向）
- flex-wrap （子元素超出是否换行）
- flex-flow （上面两个属性的综合体，可以只写这个，代替上面两个，就像字体的font属性一样）
- justify-content （定义子项在主轴上的对齐方式）
- align-items （定义子项在交叉轴上的对齐方式）
- align-content （定义多根轴线时的轴线对齐方式，只有一根轴线时，设置无效）
以上6个属性，一般常用的我加粗了，其他的少用
项目（子元素）
- order （定义子元素的排序，数值越小越靠前）
- flex-grow （定义子元素在容器还有剩余空间时的放大比例，默认为0，即不放大）
- flex-shrink（与grow相反，定义子元素在容器没有剩余空间时的缩小比例，默认为1，即所有子元素缩小一样）
- flex-basis （定义子项在主轴上的对齐方式）
- flex （定义子项在交叉轴上的对齐方式）
- align-self （允许当前项设置 align-items 并覆盖父元素的设置 ）
本章小结
好嘞，这章节主要就是有个大概的印象，flex能做什么，flex大概有哪些属性，下一章节讲详细讲述 66大顺 的属性含义。如有不对之处欢迎评论区指正，谢谢~
常见问题FAQ
- 免费下载或者VIP会员专享资源能否直接商用？
- 本站所有资源版权均属于原作者所有，这里所提供资源均只能用于参考学习用，请勿直接商用。若由于商用引起版权纠纷，一切责任均由使用者承担。更多说明请参考 VIP介绍。
- 提示下载完但解压或打开不了？
- 找不到素材资源介绍文章里的示例图片？
- 模板不会安装或需要功能定制以及二次开发？
发表评论
还没有评论，快来抢沙发吧！