点击上方蓝字关注我们
Flexbox模型模块是一个强大的布局工具，在处理对齐和间距等问题上具有更强大的能力，也是未来前端布局的一种主流方案。本文为读者简要地介绍了Flexbox模型的一些注意的使用细节以及附上个别案例，本文也作为参考书籍的学习笔记，参考书籍是大漠老师的《图解CSS3核心技术与案例实战》。在本文中，只介绍W3C为Flexbox推出的最新版本语法，其他版本的Flexbox语法在使用方面与最新的语法大同小异，区别主要在于不同的浏览器兼容问题，例如Chrome首先支持最新版本的Flexbox语法，Firefox则支持旧版本的语法规范，更多旧版本的知识详细介绍可以翻阅此书！(非常推荐阅读)最后，本文适合读者是有使用过Flexbox模型的读者，对于小白，由于篇幅限制本文不会对Flexbox的相关属性进行过多介绍，可以自行上网查阅，谢谢理解！
本文目录：
简单了解Flexbox
回顾Flexbox的相关属性
列举一些Flexbox的应用案例(附代码)
简单了解
常规的布局(块从上到下，内联从左到右)对于大型或者复杂的应用程序(尤其是涉及取向改变、缩放和收缩等)缺乏灵活性，而Flexbox布局对于涉及复杂页面非常有用，可以轻松实现屏幕和浏览器窗口大小发生改变时保持元素的相对位置和大小不变。同时减少了依赖于浮动布局实现元素位置的定义以及重置元素的大小。
Flexbox的功能综合如下：
屏幕和浏览器窗口大小发生改变也可以灵活调整布局。
指定伸缩项目沿着主轴或侧轴按比例分配额外空间(伸缩容器额外空间)，从而调整伸缩项目的大小。
指定伸缩项目沿着主轴或侧轴将伸缩容器额外空间，分配到伸缩项目之前、之后或之间。
指定如何将垂直于元素布局轴的额外空间分布到该元素的周围。
控制元素在页面上的布局方向。
按照不同于文档对象模型(DOM)所指定排序方式对屏幕上的元素重新排序。也就是说可以在浏览器渲染中不按照文档流先后顺序重排伸缩项目顺序。
回顾属性
Flexbox不是一个属性，而是一个模块，包括多个CSS3属性，包括整个组属性。所以学习Flexbox之前先要了解它的一些基本概念：
其中一些是为了在容器上设置(父元素，称为“伸缩容器”)，而其他则是为了在子项上设置(称为“伸缩项目”)
主轴和侧轴：伸缩项目沿着主轴进行布局(默认是水平向右)，侧轴则是垂直于主轴的轴(默认是垂直向下)，主轴与侧轴可以通过属性来修改方向。
伸缩容器属性：
-
伸缩流方向:flex-direction
伸缩行换行:flex-wrap
伸缩流方向与换行:flex-flow(上两个属性结合起来的简写)
主轴对齐:justify-content
侧轴对齐:align-items和align-self
多行对齐:align-content
伸缩项目属性：
-
显示顺序:order
伸缩性:flex
由于篇幅限制在此不一一详细介绍每个属性，如果有读者对这些属性有疑问的，可以用电脑玩玩下面的闯关游戏，熟悉Flexbox的基本用法：https://flexboxfroggy.com/#zh-cn
在此引入一张介绍缩略图，整理属性提纲
来源Github：https://github.com/wangzhengya/cheatsheet
使用Flexbox布局前，需要对父级容器使用display:flex(块级元素使用)或者inline-flex(行内元素使用)。
温馨提醒：
CSS的columns在伸缩容器上没有效果；float、clear、和vertical-align在伸缩项目上也没有效果。
align-content是当伸缩容器的侧轴有空余空间时，对于空余空间的分配。这个属性只有在伸缩项目有多行时才生效，这种情况只有display的flex-wrap为wrap时，并且没有足够的空间把伸缩项目放在同一行中。也就是这个属性将对每一行起作用而不是针对每个伸缩项目。
默认状态下，伸缩项目不会收缩至比其他最小内容尺寸更小，可以设置min-width或min-height属性来改变这个默认状态。
flex的第三部分flex-shrink很少使用，它称为收缩比率。这个值只有伸缩项目在没主轴方向溢出伸缩容器才会发挥作用。它充当比例值，但这里指的是溢出量，将这个溢出量比例分配给每个伸缩项目，用于防止伸缩容器溢出。
应用实例(附代码)
——水平垂直居中
<html> <head> <meta charset="utf-8"> <title>title> <style type="text/css"> *{ margin: 0; padding: 0; } div{ width: 300px; height: 300px; border: 2px solid red; display: flex; justify-content: center; align-items: center; flex-direction: column; }style> head> <body> <div> <img src="1.jpg" alt=""> div> body>html>
——输入框选中变长效果
<html> <head> <meta charset="utf-8"> <title>title> <style type="text/css"> *{ margin: 0; padding: 0; } form{ display: flex; width: 300px; } input[type="text"]:focus{ background: white; flex-grow: 1; }style> head> <body> <form> <input type="text" placeholder="请输入" /> <input type="submit" value="搜索" /> form> body>html> 
——圣杯布局
<html> <head> <meta charset="utf-8"> <title>title> <style type="text/css"> *{ margin: 0; padding: 0; } body{ text-align: center; height: 500px; display: flex; flex-direction: column; } section{ flex: 1; display: flex; flex-direction: row; } header{ background: red; } .main{ background: blue; flex: 1; } .left{ background: green; flex: 0 0 50px; order: -1; } .right{ background: yellow; flex: 0 0 50px; } @media(max-width:768px){ section{ flex-direction: column; flex: 1; } .main{ flex: 1; } .left , .right{ flex: 0 0 50px; } } footer{ background: navajowhite; }style> head> <body> <header>头部header> <section> <div class="main">内容区域div> <div class="left">左边div> <div class="right">右边div> section> <footer>底部footer> body>html>
——网格布局
<html> <head> <meta charset="utf-8"> <title>title> <style type="text/css"> *{ margin: 0; padding: 0; } section{ display: flex; flex-direction: column; width: 1200px; } section div{ flex: 1; display: flex; flex-direction: row; align-items: center; } .photos1 img:nth-child(1){ flex: 3; } .photos1 img:nth-child(2){ flex: 1; } .photos2 img:nth-child(1){ flex: 1; } .photos2 img:nth-child(2){ flex: 2; } .photos2 img:nth-child(3){ flex: 3; } .photos3 img:nth-child(1){ flex: 1; } .photos3 img:nth-child(2){ flex: 2; } .photos3 img:nth-child(3){ flex: 3; } .photos3 img:nth-child(4){ flex: 4; }style> head> <body> <section> <div class="photos1"> <img src="9.jpg" ><img src="2.jpg" > div> <div class="photos2"> <img src="3.jpg" ><img src="4.jpg" ><img src="5.jpg" > div> <div class="photos3"> <img src="6.jpg" ><img src="7.jpg" ><img src="8.jpg" ><img src="9.jpg" > div> section> body>html>
关注我们
一起学习成长
453
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
