FLEX布局实例

大家好，我是IT修真院郑州分院第8期学员，一枚正直善良的web程序员。

今天给大家分享一下，修真院官网css5任务中可能会使用到的知识点：

FLEX布局实例

1.背景介绍

2009年，W3C 提出了一种新的方案----Flex 布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能。

2.知识剖析

采用 Flex 布局的元素，称为 Flex 容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称"项目"。 任何一个容器都可以指定成flex布局

3.常见问题

4.解决方案

5.编码实战

 视频：https://v.qq.com/x/page/m0639s9ha09.html

骰子的布局

圣杯布局

圣杯布局（Holy Grail Layout）指的是一种最常见的网站布局。页面从上到下，分成三个部分：头部（header），躯干（body），尾部（footer）。其中躯干又水平分成三栏，从左到右为：导航、主栏、副栏。

固定的底栏

有时，页面内容太少，无法占满一屏的高度，底栏就会抬高到页面的中间。这时可以采用Flex布局，让底栏总是出现在页面的底部。

流式布局

每行的项目数固定，会自动分行。

  语法：
               flex: 0 0 25%;

6.扩展思考

flex模拟栅格系统

    语法：
               flex: 0 0 25%;
              @media only screen and (max-width: 768px) {
                 .child1{
                   flex: 0 0 50%;
                  }
                  }
               @media only screen and (max-width: 425px) {
                .child1{
                  flex: 0 0 100%;
                 }
                 }

---

更多讨论

PPT：https://it-xzy.github.io/WEB-NEW/1054-css-5.html

1.flex布局可以应用到那些场景？
一般实现垂直居中是一件很麻烦的事，但flex布局轻松解决

display:flex;
justify-content: center;

align-items: center;

2.优点是什么

布局更科学合理，相对原有的浮动布局，可以用很少的代码实现更完美的功能。基本任何地方都可以使用，特别在栅格布局，锤子居中等上面优势明显。

3.缺点是什么 

IE兼容性不好，适用于不考虑IE兼容性的开发环境，总体来看，针对初级学员，flex可以熟悉掌握，但是学好其他兼容性布局方式仍然是基础。

今天的分享就到这里啦，欢迎大家点赞、转发、留言、拍砖~

技能树-IT修真院

IT修真院是一个免费的线上IT技术学习平台 。

每个职业以15个左右的task为初学者提供更快速高效的学习方式 ；

所有task均是从真实项目中提炼出来的技能点，

强调实战演练+自学优先+师兄辅导的学习方式，

严格的日报体系，欢乐的交流讨论学习气氛，更有无数师兄师姐帮你解疑！

点击官网注册  官网 ，使用师兄邀请链接有优惠。