弹性布局（基础）

弹性布局

弹性布局是一种全新的布局方式
我们之前的传统布局，基于盒模型，依赖display + position + float。我们之前的处理方式对于某些布局，排布起来不是特别方便，比如：元素垂直居中

flex布局是w3c推出的一种新的布局方案，可以简便，完成，响应式的实现各种页面布局，目前，flex布局已经适配与所有浏览器

基于盒模型 + flex布局
flex的基本概念：
1.容器(flex container)：设置了display：flex或者inline-flex的元素
2.弹性子元素(flex item)：容器的子元素

容器内部默认存在两条轴：主轴(mian axis)和侧轴/交叉轴(cross axis)

• 主轴的方向默认是水平的，默认方向从容器左边(main start)延申到容器的右边(main end)

• 侧轴的方向默认是垂直的，默认方向从容器的顶边(cross start)延申到容器的底边(cross end)

注意：主轴和侧轴不是真实存在的，它只是我们为了方便识别方向规定的概念

与flex布局有关的样式

一.与容器有关的样式

1. 将元素设置为容器：display：flex/inline-flex

• 默认弹性子元素会沿着主轴的起点开始一直排布到主轴的终点

2. 设置主轴的方向：flex-direction

• row 默认值，水平方向，从左至右
• row-reverse 水平方向，从右至左
• column 垂直方向，从上至下
• column-reverse 垂直方向，从下至上

3. 换行方式：flex-wrap

• nowrap 默认值，不换行，如果宽度不够，强制压缩弹性子元素的宽
• wrap 换行
• wrap-reverse 反向换行

4. 弹性子元素在主轴上的对齐方式：justify-content

• flex-start 默认值，主轴方向起点对齐
• flex-end 主轴方向终点对齐
• center 主轴方向居中
• space-between 两端的元素靠边，其余元素间隔等距
• space-around 所有元素左右等距

5.弹性子元素在侧轴上的对齐方式：align-items

• flex-start 侧轴方向起点对齐
• flex-end 侧轴方向终点对齐
• center 侧轴方向居中
• stretch 默认值，规定弹性子元素的默认高度，该值只有在不设定弹性子元素的高度时有效，默认填满整个侧轴
• e. baseline 基线对齐

6.多行弹性子元素在侧轴上的对齐方式：align-content

• flex-start 侧轴方向起点对齐
• lex-end 侧轴方向起点对齐
• center 侧轴方向起点对齐
• stretch
• space-between 侧轴两端元素靠边，其余元素之间等距
• space-around 所有元素侧轴方向等距

二. 与弹性子元素有关的样式

1.调整弹性子元素的排列顺序：order

• 默认值都是0.值越小元素越先排布，如果值相同，html标签写的越早，越先排布

2.单独调整某个弹性子元素在侧轴上的对齐方式：align-self

• 值与align-items相同

3.多余空间的分配比例：flex-grew

• 默认值为0，按比例分配

4.当空间不足时的收缩比例:flex-shrink，默认值为1

每个元素最终收缩的值的计算公式

1. 步骤一：先计算权重
   (每个元素的宽*各自收缩比例)的和 ===权重

2. 步骤二：计算每个元素的具体收缩值
   元素的宽收缩比例/权重溢出的量 ===元素收缩的值

   例子：
   div1:300px
   div2:220px
   div3:180px
   溢出量：(容器的宽)400 - (300+220+180) = 300px
   权重：3001 + 2201 + 180*1 == 700px

   div1收缩的值：3001/700300 == 128.57
   div2收缩的值：2201/700300 == 94.29
   div3收缩的值：1801/700300 == 77.14

5. flex-basis表示弹性子元素被放入容器之前的大小，可以理解成弹性子元素的理想或者假设大小但是并不是真实大小，弹性子元素最终的真实大小取决于容器的宽度

弹性子元素的应用准则
content < width < flex-basis < (limted max/min-width)

不给弹性子元素人为设置宽度，其宽度由内容content撑出，如果设置了width，就以width为准，如果同时设置了width和flex-basis，以flex-basis为准

flex-basis与width的区别

• flex-basis优先级大于width
• flex-basis只对弹性子元素
• flex-basis当主轴是水平时，其作用的是元素的宽，当主轴是垂直时，
  其作用的实际是元素的高度
• flex-basis对绝对定位的元素不起作用

6. 合写 flex 是对flex-grow，flex-shrink，flex-basis的合写

• flex的默认值：0 1 auto（长度等于灵活的项目长度，如果元素没有指定长度，由内容决定）
• flex：auto 相当于 1 1 auto
• flex：none 相当于 0 0 auto
• flex：1 相当于 1 1 0%

一个简单的flex布局

 
  
  
  
 
 
  
标题栏
  

   
"lnav">左边导航栏
   
"content">主内容自动伸缩
   
"rnav">右边提示栏
  
  
页脚栏