html编写移动端界面时常用的弹性盒子的基础知识点

忘是亡心i 2021-09-15 14:40 332阅读 0赞

弹性盒子在pc端存在兼容性问题，在移动端不存在，是编写移动端项目时大量使用的布局方式

弹性盒子display:flex;

设置子级排列的方向 flex-direction:row;

默认情况下是水平为row从左向右

row-reverse 从右向左

column 列分布 从上向下

column-reverse 列分布 从下向上

设置子级盒子是否强制换行 flex-wrap:wrap;

默认是nowrap不换行

wrap换行

简写属性

flex-flow: row wrap;

设置子级盒子在水平的分布 justify-content: space-between;

space-between平均分布

center内容居中

flex-start居左

flex-end 居右

space-around 到间隙平均分布，左右距父级有间隙，间隙为子级盒子之间距离的一般

垂直方向：align-items:stretch;

align-items用来设置一行上的子级盒子，在垂直方向上的对齐方式默认值是拉伸

stretch 拉伸 高度被强制拉伸到与父级高度一样高

flex-start 取消拉伸 顶对齐

center 取消拉伸 居中对齐

flex-end 取消拉伸 底部对齐

align-content: center;

垂直方向的分布问题

align-content多行在垂直方向上的分布问题

flex-start 居上

center 居中

flex-end 居下

space-between 垂直方向平均分布

space-around 垂直方向带间隙平均分布

如果垂直方向只要一行，那么垂直方向的分布问题就转换为垂直方向的对齐问题

此时只有align-items有效

只要有标签在，就会参与平均分布，常见的问题是父级通过after添加一个看不见的盒子，

导致子级个数发生变化，从而产生对不齐的效果

order设置弹性盒子中子级盒子排列的先后顺序 值越大越靠后 每个盒子都要设置

order: 1;

flex-grow 用来设置子级弹性盒子中宽度比例 此时子级的宽度设置将无效

当弹性盒子中的子级是按列分布时，flex-grow用来设置每个盒子的高度比例

当一些盒子的高度和宽度给定盒子将对剩余的空间进行比例分配

flex-grow：在使用时首先会对每个子级盒子的宽度做一个预估，

flex-grow按比例拆分的实际是父级盒子这一行剩余的空间，由于子级盒子

中不可避免的有内容存在，因此在使用flex-grow进行宽度比例划分时，可先将子级盒子的

宽度设置为0px

发表评论取消回复

表情：

评论列表（有 0 条评论，332人围观）

还没有评论，来说两句吧...

相关阅读

相关 ⑩HTML+CSS 弹性盒及移动端页面简述

弹性盒和移动端相关问题弹性盒 ※ 弹性容器的样式 ※ 移动端问题像素视口（viewport）移动端页面

分手后的思念是犯贱/ 2023年07月21日 06:22/ 0 赞/ 3 阅读

相关移动端知识点总结

移动端知识点总结一、移动端—屏幕移动设备与PC设备最大的差别在于屏幕，这主要体现在屏幕尺寸和屏幕分辨率两个方面。通常我们所指的屏幕尺寸，实际上是指屏幕对角线

- 日理万妓/ 2022年10月13日 05:21/ 0 赞/ 217 阅读

相关 html5移动端知识点总结（一）

第1章使用rem作为单位 html{ font-size:10px} 1.1使用媒体查询，不同分辨率设置不同的html的font-size @(

谁践踏了优雅/ 2022年09月26日 01:49/ 0 赞/ 219 阅读

相关移动端尺寸基础知识

本文转载地址：[http://colachan.com/post/3435 ][http_colachan.com_post_3435] 初涉移动端设计和开发的

àì夳堔傛蜴生んèń/ 2022年08月08日 05:12/ 0 赞/ 246 阅读

相关后端的基础知识点

对于一个互联网企业，后端服务是必不可少的一个组成部分。抛开业务应用来说，往下的基础服务设施做到哪些才能够保证业务的稳定可靠、易维护、高可用呢？纵观整个互联网技术体系再结合公司的

待我称王封你为后i/ 2022年07月13日 08:10/ 0 赞/ 276 阅读

相关移动端尺寸基础知识

初涉移动端设计和开发的同学们，基本都会在尺寸问题上纠结好一阵子才能摸到头绪。我也花了很长时间才弄明白，感觉有必要写一篇足够通俗易懂的教程来帮助大家。从原理说起，理清关于尺寸的所

￡神魔★判官ぃ/ 2022年06月18日 11:08/ 0 赞/ 275 阅读

相关 001.html常用的基础知识点

Web标准 -------------------- Web 标准的好处让Web的发展前景更广阔内容能被更广泛的设备访问更容易被搜寻引擎搜

向右看齐/ 2021年10月06日 12:52/ 0 赞/ 405 阅读

相关移动端适配的基础知识

先上楼主的图 ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0

秒速五厘米/ 2021年09月18日 07:58/ 0 赞/ 404 阅读

相关 html编写移动端界面时常用的弹性盒子的基础知识点

弹性盒子在pc端存在兼容性问题，在移动端不存在，是编写移动端项目时大量使用的布局方式弹性盒子display:flex; 设置子级排列的方向 flex-direc

忘是亡心i/ 2021年09月15日 14:40/ 0 赞/ 333 阅读

相关 html中盒子模型的基本知识点盒子大小的计算

盒子模型边框的样式有 solid dashed(虚线) dotted(点线) border-style:solid; 边框的宽度:border-style:1px; 边

怼烎@/ 2021年09月15日 11:28/ 0 赞/ 964 阅读