flex 布局详解,【Java面试题

HarmonyOS学习 2021-11-25 17:49:47
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

  1. La distribution Linux d'Amazon est maintenant entièrement basée sur Fedora
  2. org.springframework.web.bind.MissingServletRequestParameterException
  3. Built in constraints and functions of MySQL Foundation (2)
  4. Basic operation of MySQL Foundation (I)
  5. Introduction to Java zero foundation 3: Java data types
  6. 从零开始搭建EasyDarwin环境——Linux系统开发环境搭建Golang
  7. Redis source Concise Analysis 02 - SDS String
  8. Construire l'environnement easydarwin à partir de zéro - - construire l'environnement de développement du système Linux golang
  9. javaweb代码是正确的,但是第一行代码就报错了
  10. **** | Java | 后端开挂:3行代码写出8个接口
  11. Java || 看了大二学长写的代码,我竟开始默默的模仿了。。。
  12. Java | 手把手教你实现一个抽奖系统(Java版)
  13. Java | Manuel pour vous apprendre à mettre en œuvre un système de loterie (version Java)
  14. Java | | après avoir lu le Code que j'ai écrit en deuxième année, j'ai commencé à imiter silencieusement...
  15. Java | back - end Pending: 3 - line Code write 8 Interfaces
  16. Le Code Web Java est correct, mais la première ligne de code est incorrecte
  17. Android网络编程之Http通信
  18. Android網絡編程之Http通信
  19. Http communication for Android Network Programming
  20. 数据结构实验八 领会图的两种主要储存结构和图的基本运算算法设计
  21. Hibernate数据校验简介
  22. The story of spring
  23. Il a dépensé 270 000 yuans pour soulever Xiaopeng p7 et a parcouru 3 627 km. Le propriétaire du véhicule a partagé 6 avantages et inconvénients.
  24. 阿里蚂蚁花呗团队面试题:spring+分布式+jvm+session+redis
  25. 【Java入门100例】14.字符串排序——compareTo()
  26. 【Java入门100例】13.修改文件扩展名——字符串替换
  27. Leetcode 79. Word Search [C + + / java detailed problem]
  28. Introduction à la vérification des données hibernantes
  29. Expérience de la structure des données
  30. Spring cloud gateway practice 2: more routing configuration methods
  31. Java network programming - summary overview
  32. 基于语法树的 Java 代码自动化插桩
  33. 云原生 Spring Boot 应用配置 Prometheus + Grafana 监控(保姆级)
  34. Spring cloud gateway practice 2: more routing configuration methods
  35. Jenkins file one line of code to deploy. Net program to k8s
  36. Java network programming - summary overview
  37. Cloud Native Spring Boot application configuration Prometheus + grafana Monitoring (baby - sitter)
  38. Insertion automatique de code Java basée sur l'Arbre syntaxique
  39. Le SUV phare de Xiaopeng, Xiaopeng G9, a fait ses débuts au salon de l'automobile et s'est tenu en position C dans la nouvelle force?
  40. Docker 从入门到实践系列四 - Docker 容器编排利器 Docker Compose
  41. 6年老猿带你掌握Spring Boot实现定时任务的动态增删启停
  42. disruptor笔记之六:常见场景,java教程从入门到精通pdf百度云
  43. Pourquoi InnoDB n'utilise - t - il pas un cache LRU naïf?
  44. Java Reflection (2): quelques opérations de base de reflection
  45. 6年老猿帶你掌握Spring Boot實現定時任務的動態增删啟停
  46. Les singes âgés vous permettent de maîtriser le démarrage et l'arrêt dynamiques des tâches programmées par Spring boot
  47. Docker From Beginning to Practice Series IV - docker Container chorégraphe Clean docker Composition
  48. 编写 java 程序,为家用电脑 ipv6 自动更新 goddy dns 记录(ddns)
  49. java jvm-old gc耗时几十s,导致系统告警
  50. Disruptor note 6: scénario commun, tutoriel Java de l'introduction à la maîtrise du PDF Baidu Cloud
  51. 编写Java程序启动脚本最佳实践
  52. How to get the correct Linux user's documents, music videos and other directories?
  53. Java JVM Old GC prend des dizaines de s, ce qui provoque une alarme système
  54. Écrivez un programme Java pour mettre à jour automatiquement les enregistrements DNS goddy (ddns) pour l'ordinateur domestique IPv6
  55. 編寫Java程序啟動脚本最佳實踐
  56. Meilleures pratiques pour écrire des scripts de démarrage de programmes Java
  57. Notes sur springcloud Eureka
  58. Ajout, suppression et modification simples de mybatis
  59. Java - carte mémoire de l'objet
  60. Why did docker lose to kubernetes? Docker employee readme!