前端开发 ·

移动响应式布局(二)

三、Flex弹性布局

0x1 Flex概念

1、弹性盒模型
它能够更加高效方便控制元素对齐、排列,更重要的是能够自动计算布局内元素的尺寸,无论这个元素的尺寸是固定的还是动态的。

2、变成弹性盒模型的步骤
Display: flex;
注:Display: inline-flex; 则父容器不会满屏显示,会变成inline的样式。

0x2 Flex 容器属性

  • [flex-direction]
    • 定义子元素在主轴的排列方向
    • row 默认值 横向排列 从左到右
    • row-reverse 横向排列 从右到左
    • column 纵向排列 从上到下
    • column-reverse 纵向排列 从下到上
  • [flex-wrap]
    • 控制元素换不换行
    • nowrap 默认值不换行,当宽度设置过大要换行时宽度值不生效
    • wrap 换行
    • wrap-reverse 倒序,换行
  • [flex-flow]
    • 上面两个属性的合并写法
    • flex-flow:flex-directionflex-wrap;
  • [align-content]
    • 控制容器内多行在交叉轴上的排列方式
    • flex-start 交叉轴开始的地方对齐
    • flex-end 交叉轴结束的地方对齐
    • center 交叉轴居中对齐
    • stretch 交叉轴拉伸对齐
  • [justify-content]
    • 子元素在主轴上的对齐模式
    • flex-start 主轴起点对齐
    • flex-end 主轴终点对齐
    • center 居中对齐
    • space-between 伸缩项目两边碰中间空间平均分
    • space-around 伸缩项目平均分剩余空间两边碰
  • [align-items]
    • 子元素在交叉轴上的对齐模式
    • flex-start 起点对齐
    • flex-end 终点对齐
    • center 居中对齐
    • baseline 子元素在交叉轴上以内容的基线为准来对齐
    • stretch 拉神对齐

垂直水平居中对齐:
justify-content:center;
align-items:center;

0x3w Flex 子元素属性

  • [order]
    • 控制子元素出现在父容器的顺序
    • 默认0 任何整数 从小到大优先级越高
    • -1 无效,相当于不设置 优先级最高
  • [flex-grow]
    • 控制子元素所占父元素的空间比例
    • 默认0 任何数字 不能设置为负数
    • 设置为同一数值 空间相同
    • 设置为不同数值 空间按照数值比例分配
    • 注意,空间是除去内容本身剩下的空间,而不是包含内容的容器大小
  • [flex-shrink]
    • 揭不开锅的日子里比谁能受屈
    • 默认值1 任何数字 不能为负数
    • 剩余空间不足 谁多委屈点
    • 我就不!设置为0
  • [flex-basis]
    • 计算前刨去内容所占的空间
    • 默认auto
    • width 设置内容宽度
  • [align-self]
    • 在交叉轴上怎么对齐自己说了算
    • flex-start flex-end center baseline stretch

四、Flex基础

参与评论