学习 flex布局

Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。

目录

一、为什么要学习

二、弹性盒模型

1、弹性盒子

三、为弹性盒子定义规则，影响元素的布局

---

一、为什么要学习

能用弹性布局的尽量用弹性布局，其优点：

（1）代码量减少

（2）水平方向增加元素，自动适应布局，不需要修改样式代码

（3）适合移动端布局

缺点：存在兼容性问题。

应用：对于pc端的整体布局应用的不多，适合用在pc布局的局部，主要是用在移动端整体布局。

与传统布局与弹性布局的区别

布局的传统解决方案，基于盒状模型，依赖 diaspaly display 属性 + position属性 + float属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。

基本语法：

任何一个容器都可以指定为 Flex 布局。

.box{
  display: flex;        //加这个
}

二、弹性盒模型

弹性盒子

弹性盒子：块 或行级块

弹性元素

• 声明块级弹性盒子

display:flex;

• 声明内联级弹性盒子

display: inline-flex;

• Webkit内核的浏览器，必须加上-webkit前缀。  

.box{display:-webkit-flex;/* Safari */display:flex;}

注意，设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。

三、为弹性盒子定义规则，影响元素的布局

以下6个属性设置在容器上。

• flex-direction           用于控制盒子元素排列的方向
• flex-wrap                用于换行
• flex-flow                 缩合属性
• justify-content        定义了项目在主轴上的对齐方式
• align-items
• align-content

1、flex-direction

用于控制盒子元素排列的方向。

flex-direction:  row/ row-reverse         默认值是row

 flex-direction:column/column-reverse