编程知识 cdmana.com

flex 布局详解,【Java面试题

  • flex-wrap

  • justify-content

  • align-items

  • align-content

应用在 flex items 上的 CSS 属性:

  • flex

  • flex-grow

  • flex-basis

  • flex-shrink

  • order

  • align-self

 flex container 相关属性

======================================================================================

看到 align 属性就是针对 corss axis;

后面跟 items 就是针对单个 item;后面跟 content 就是针对整个模块。

 flex 模块布局


flex 布局详解,【Java面试题_后端开发

 flex-direction:设置 main axis 的方向


flex items 默认都是沿着 main axis(主轴) 从 main start 开始往 main end 方向排布

flex-direction 决定 了 main axis 的方向,有 4 个取值:

  • row(默认值)

flex 布局详解,【Java面试题_面试_02

  • row-reverse

flex 布局详解,【Java面试题_后端开发_03

  • column

flex 布局详解,【Java面试题_Java_04

  • column-reverse

flex 布局详解,【Java面试题_面试_05

 justify-content:设置 flex items 在 main axis 对齐方式


justify-content 决定了 flex items 在 main axis 上的对齐方式

  • flex-start(默认值):与 main start 对齐

  • flex-end:与 main end 对齐

  • center:居中对其

  • space-between

flex items 之间的距离相等

与 main start、main end 两端对齐

  • space-evenly

flex items 之间的距离相等

flex items 与 main start,main end 之间的距离等于 flex items 之间的距离

  • space-around

flex items 之前的距离相等

flex items 与 main start,main end 之间的距离是 flex items 之间距离的一半

flex 布局详解,【Java面试题_后端开发_06

 align-items:设置 flex items 在 cross axis 对齐方式


cross axis(交叉轴),必定与 main axis(主轴)垂直,见  flex模型布局

align-items 决定了 flex items 在 cross axis 上的对齐方式

  • stretch(默认值):当 flex items 在 cross axis 方向上的 size 为 auto 时,会自动拉伸至填充

  • flex-start:与 cross start 对齐

  • flex-end:与 cross end 对齐

  • center:居中对齐

  • baseline:与基准线对齐

flex 布局详解,【Java面试题_后端开发_07

 flex-wrap:设置 flex container 单行还是多行


flex-wrap 决定了 flex container 是单行还是多行

  • nowrap(默认):单行

  • wrap:多行

  • wrap-reverse:多行(对比 wrap,cross start 与 cross end 相反)

 flex-flow:简写属性 (flex-direction || flex-wrap)


flex-flow 是 flex-direction || flex-wrap 的简写

  • flex-flow:column wrap 等价于:

flex-direction:column

flex-wrap:wrap

  • flex-flow:row-reverse 等价于:

flex-direction:row-reverse

flex-wrap:nowrap

  • flex-flow:wrap 等价于:

flex-direction:row

flex-wrap:wrap

 align-content:多行 flex items 在 cross axis 上的对齐方式


align-content 决定了多行 flex items 在 cross axis 上的对齐方式,用法与  justify-content 类似

  • stretch(默认值):与 align-items 的 stretch 类似

  • flex-start:与 cross start 对齐

  • flex-end:与 cross end 对齐

  • space-between

flex items 之间的距离相等

与 cross start,cross end 两端对齐

  • space-around

flex items 之间的距离相等

flex items 与 cross start,cross end 之间的距离是 flex items 之间距离的一半

  • space-evenly

flex items 之间的距离相等

flex items 与 cross start,cross end 之间的距离等于 flex items 之间的距离

 总结


  • flex-flow 是 flex-direction || flex-wrap 的简写

  • flex-direction 设置主轴(main axis)的方向

  • flex-wrap 设置是否能换行

  • justify-content 设置 flex items 在 main axis 上的对齐方式

  • align-items 设置 flex items 在 cross axis 上的对齐方式(一般是针对单行)

  • align-content 设置 flex items 在 cross axis 上的对齐方式(一般是针对多行)

 flex items 相关属性

==================================================================================

 order:决定 flex items 的排布顺序


order 决定了 flex items 的排布顺序

  • 可以设置任意整数(正整数、负整数、0),值越小就越排在前面

  • 默认值是0

 align-self:覆盖 flex container 设置的 align-items


flex items 可以通过 align-self 覆盖 flex container 设置的 align-items

  • auto(默认值):遵从 flex container 的 align-items 设置

  • stretchflex-startflex-endcenterbaseline,效果跟  align-items 一致

 flex-grow:决定了 flex items 如何拓展


flex-grow 决定了 flex items 如何扩展:

  • 可以设置任意非负数字(正小数、正整数、0),默认值是 0

  • 当 flex container 在 main axis 方向上有剩余 size 时,flex-grow 属性才会有效

如果所有 flex items 的 flex-grow 总和 sum 超过 1,每个 flex item 扩展的 size 为:

  • flex container 的剩余 size * flex-grow / sum(按比例分

如果所有 flex items 的 flex-grow 总和不超过 1,每个 flex item 扩展的 size 为:

  • flex container 的剩余 size * flex-grow(直接计算

flex items 扩展后的最终 size 不能超过 max-width 或 max-height

 flex-shrink:决定了 flex items 如何收缩


flex-shrink:决定了 flex items 如何收缩

  • 可以设置任意非负数字(正小数、正整数、0),默认值是 0

  • 当 flex items 在 main axis 方向上超过了 flex container 的 size,flex-shrink 属性才会有效

每个 flex items 收缩的 size 为

  • flex items 超出 flex container 的 size * 收缩比例 / 所有 flex items 的收缩比例之和

收缩比例 = flex-shrink * flex items 的 base size

base size 就是 flex items 放入 flex container 之前的 size

flex items 收缩后的最终 size 不能小于 min-width 或 min-height

 flex-basic:设置 flex items 在 main axis 上的 base size


最后

分享一些系统的面试题,大家可以拿去刷一刷,准备面试涨薪。

这些面试题相对应的技术点:

  • JVM
  • MySQL
  • Mybatis
  • MongoDB
  • Redis
  • Spring
  • Spring boot
  • Spring cloud
  • Kafka
  • RabbitMQ
  • Nginx

大类就是:

  • Java基础
  • 数据结构与算法
  • 并发编程
  • 数据库
  • 设计模式
  • 微服务
  • 消息中间件

flex 布局详解,【Java面试题_Java_08

flex 布局详解,【Java面试题_面试_09

flex 布局详解,【Java面试题_面试_10

flex 布局详解,【Java面试题_后端开发_11

flex 布局详解,【Java面试题_后端开发_12

flex 布局详解,【Java面试题_Java_13

flex 布局详解,【Java面试题_面试_14

flex 布局详解,【Java面试题_后端开发_15

flex 布局详解,【Java面试题_面试_16

本文已被 CODING开源项目:【一线大厂Java面试题解析+核心总结学习笔记+最新讲解视频+实战项目源码】收录

版权声明
本文为[HarmonyOS学习]所创,转载请带上原文链接,感谢
https://blog.51cto.com/u_15438507/4690196

Scroll to Top