二、移动WEB开发之flex布局
1、flex 布局体验
1.1 传统布局与flex布局
传统布局：兼容性好、布局繁琐、局限性、不能再移动端很好的布局
flex弹性布局：操作方便，布局极为简单，移动端应用很广泛；PC 端浏览器支持情况较差；IE 11或更低版本，不支持或仅部分支持
建议：
1. 如果是PC端页面布局，我们还是传统布局。
2. 如果是移动端或者不考虑兼容性问题的PC端页面布局，我们还是使用flex弹性布局
1.2 初体验
2、flex 布局原理
2.1 布局原理
flex 是 flexible Box 的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性，任何一个容器都可以指定为 flex 布局。
当我们为父盒子设为 flex 布局以后，子元素的 float、clear 和 vertical-align 属性将失效。
伸缩布局 = 弹性布局 = 伸缩盒布局 = 弹性盒布局 =flex布局
采用 Flex 布局的元素，称为 Flex 容器（flex container），服务器托管网简称”容器”。它的所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称”项目”。
体验中 div 就是 flex父容器。
体验中 span 就是 子容器 flex项目
子容器可以横向排列也可以纵向排列
总结flex布局原理： 就是通过给父盒子添加flex属性，来控制子盒子的位置和排列方式
3、flex 布局父项常见服务器托管网属性
3.1 常见父项属性
以下由6个属性是对父元素设置的
flex-direction：设置主轴的方向
justify-content：设置主轴上的子元素排列方式
flex-wrap：设置子元素是否换行
align-content：设置侧轴上的子元素的排列方式（多行）
align-items：设置侧轴上的子元素排列方式（单行）
flex-flow：复合属性，相当于同时设置了 flex-direction 和 flex-wrap
3.2 flex-direction：设置主轴的方向
2.1 主轴与侧轴
在flex布局中，是分为主轴与侧轴两个方向，同样的叫法有：行和列、x轴与y轴
默认主轴方向：x轴方向，水平向右
默认侧轴方向：y轴方向，水平向下
2.2 属性值
flex-direction 属性决定主轴的方向（即项目的排列方向）
注意： 主轴和侧轴是会变化的，就看 flex-direction 设置谁为主轴，剩下的就是侧轴。而我们的子元素是跟着主轴来排列的
flex-direction设置主轴的方向
div {
/* 给父级 添加flex属性 */
display: flex;
width: 80%;
height: 300px;
background-color: saddlebrown;
/* 默认的主轴是x轴 行row，那么y轴是侧轴 */
/* 元素是跟着主轴排列的 */
/* flex-direction: row; */
/* 翻转 */
/* flex-direction: row-reverse; */
/* 可以把主轴设置为y轴 那么x轴是侧轴 */
flex-direction: column;
}
div span {
width: 150px;
height: 100px;
background-color: salmon;
margin-left: 5px;
}
1
2
3
服务器托管，北京服务器托管，服务器租用 http://www.fwqtg.net
相关推荐: 15 分钟带你感受 CSS :has() 选择器的强大
最近看到了许多关于 :has() 选择器的知识点，在此总结下来。 MDN 对 :has() 选择器 的解释是这样的： CSS 函数式伪类 :has() 表示一个元素，如果作为参数传递的任何相对选择器在锚定到该元素时，至少匹配一个元素。这个伪类通过把可容错相对选…
