黑马CSS3-flex布局

目标

能够说出 flex盒子的布局原理
能够使用 flex布局的常用属性
能够独立完成携程移动端首页案例

传统布局与flex布局

传统布局 flex弹性布局
 兼容性好  操作方便，布局极为简单，移动端应用很广泛
 布局繁琐  PC端浏览器支持情况较差
 局限性，不能再移动端很好的布局  IE 11或更低版本，不支持或仅部分支持

建议：
1.如果是PC端页面布局，我们还是传统布局。
2.如果是移动端或者不考虑兼容性问题的PC端页面布局，我们还是使用flex弹性布局。

  1. <div>
  2.   <span>1</span>
  3.   <span>2</span>
  4.   <span>3</span>
  5. </div>
  7. <style>
  8.   div {
  9.     display: flex;
  10.     with: 50px;
  11.     height:50px;
  12.     background-color: blue;
  13.   }
  14. </style>

flex布局原理

flex是 flexible Box的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性，任何一个容器都可以
指定为 flex布局。
 当我们为父盒子设为 flex布局以后，子元素的 float、clear和 vertical-align属性将失效。
 伸缩布局 =弹性布局 =伸缩盒布局 =弹性盒布局 =flex布局

采用 Flex布局的元素，称为 Flex容器（flex container），简称”容器”。它的所有子元素自动成为容
器成员，称为 Flex项目（flex item），简称”项目”。
image.png
 体验中 div就是 flex父容器。
 体验中 span就是子容器 flex项目
 子容器可以横向排列也可以纵向排列
总结flex布局原理：
就是通过给父盒子添加flex属性，来控制子盒子的位置和排列方式。

flex布局父项常见属性

常见父项属性

flex-direction设置主轴的方向

以下由6个属性是对父元素设置的
flex-direction：设置主轴的方向
justify-content：设置主轴上的子元素排列方式
flex-wrap：设置子元素是否换行
align-content：设置侧轴上的子元素的排列方式（多行）
align-items：设置侧轴上的子元素排列方式（单行）
flex-flow：复合属性，相当于同时设置了 flex-direction和 flex-wrap

flex布局子项常见属性